《CSS基础》由会员分享，可在线阅读，更多相关《CSS基础（36页珍藏版）》请在金锄头文库上搜索。
1、CSS 基 础 教 程CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files 一、一、 CSS CSS 概念概念什么是CSS层叠样式表? CSS (Cascading Style Sheets)，就是“ 层叠样式表”。
2、正如其名，就是将多种的格式设置象洋葱的皮一样, 一层一层地加 到网页上面去, 每加一层, 整个页面就象 涂上了一层新的油漆, 获得了新的格式设 置。 以往，要定义字的颜色，必须在HTML文件中的字所在位置加上格式限定，如果网页中有十二行标题，都需要设定为红色，就只好每行标题处都作设定。 例如: This is a title 样式表 Style Sheets 样式表Style Sheets, 就是指对网页特定 的内容一次过添加格式设置。 用了样式表，就不必在每行需要格式设置 的字的前后加上标签了。 你可以设定好一个样式表，把它放在HTML 文件的合适位置，这个样式表就会对整个 文件要格式的相应
3、部分起作用。 例如: td font- color: # FF0000 该该网页页中所有带带td标签标签 的文字，即标标 题题字，都会变变成红红色了，不必逐行格式设设 置。 而当你想把红红色改为为黑色时时，就直接把# FF0000改为为# 000000，一次过过就把所有的 标题标题 改了颜颜色。 W3C从HTML3.2版本开始, 样式表就开始推广 使用了。 CSS的应用是网页编辑的一大革命 通过设置CSS，我们可以随意地控制网页中字体 的大小、颜色等，便于统一网站的整体风格； 可以方便地为网页中的各个元素设置背景颜色和 图片并进行精确的定位控制； 可以为网页中的元素设置各种滤镜，从而产生诸 如
4、阴影、辉光、模糊等只有在图像处理软件中才 能实现的效果； 可以与脚本语言相结合，在网页中实现很多动态 滤镜效果。 CSS是网站设计必不可少的一个重要组成部分 二、样式表语法 HTML 语言由标志和属性构成,CSS 也是如此。 样式表基本语法： 选择器 属性1：值；属性2：值； h3 color: red; text-align: left; font-size: 8pt 对 H3 标签内容样式定义: 红色字, 居左, 8字号 table font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #660099; bac
5、kground-color: #669900; 练 习（1）在DW新建一个TABLE, 通过设置CSS观察其变化 在在 里输入代码里输入代码: :DW中怎样写CSS代码?1. 手写 2. 通过属性栏写 3. 通过左栏选项写 4. 通过代码区的辅助功能 + 手写CSS如何起作用? 在 HTML 页面内直接引用样式表的方法。 网页标题CSS样式表网页的内容HTML标签、类名称、ID名称 与上面的CSS 选择器选择器 要一致练 习（1） 在DW再建另一个TABLE, 通过设置CSS观 察其变化 在DW里写入 及里面的 内容, 通过设置CSS观察其变化 分别把TABLE用不同的CLASS命名，通过 设
6、置CLASS 的CSS观察其变化练 习（2） 在DW新建一个DIV, 用CLASS命名，通过 设置CSS观察其变化 要求：图片优化处理，空白处不能用图片 ，初步理解TABLE排版与DIV排版的不同 理解CSS文件与HTML文件的关系.CSS基本特性：分组、继承、层叠 分组： 通常我们需要同时改变几种样式的属性， CSS允许声明通过使用分号分隔其内容的 方式来进行分组。 例如：body, td, p color:#000000; text- align: left;CSS基本特性：分组、继承、层叠 继承： 通过继承，CSS设置可以被应用到多个标识中。 绝大部分的CSS声明可以通过封闭CSS选择器
7、中 的HTML标识来被继承。 例如通过一个CSS设置来改变整个页面的字体： body font-family: “Arial“; font-size: 14px; line-height: 18px; color: #000000 标识-页面上所有元素的父标识。CSS基本特性：分组、继承、层叠 层叠: Cascading描述了覆盖通用样式的局部样 式的能力。在相同的方式中，一个普遍地 应用到某一块文本上的CSS规则可以被其 他应用到相同文本中某个更为特殊的部分 的规则所覆盖。三、样式表的放置 样式表放在不同的地方，产生作用的范围 也不同。概括起来有四种方法。其中常用 前三种。 方法一：内部（或
8、嵌入式）CSS 样样式表 方法二：外部导导入CSS 样样式表 方法三：外部链接CSS 样式表 方法四：行间间写入式CSS 样样式表. 方法一：内部（或嵌入式）CSS 样式表 直接把CSS代码粘贴到html中。 比如我们把下面一段代码粘贴入HTML代码 的之间就可以了。 方法二：外部导入CSS 样式表 就是将外部的*.css文件导入到所需的网页面HTML文 件上，放置于之间 。 好处是你可以把所有的样式都放在一起，导入的 样式表成为总样式表的一部分。 但这种外部导入CSS 样式表也存在局限性，只有 Internet Explorer浏览器才支持， 在Netscape Navigator浏览器下不
9、产生效果。 外部导入CSS 样式表HTML代码 方法三：外部链接CSS样式表 最常用的方法 就是先编写一个*.css的文件(并非 HTML文 件)，然后将这个css文件链接到所需的页 面HTML文件上。 可以把网站上所有页面都链接到同一个css 文件，一旦这个css文件修改，那么所有的 页面风格也随之改变。外部链接CSS样式表HTML代码： mystyle.css的内容 body line-height: 130pt H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: “ 黑体 ” .b font-sty
10、le: italic; color: #FF3333; text-decoration: underline 以上方法一、二、三都可在Dreamweaver MX 2004中找到相应设定好的应用方式。 方法一：内部（或嵌入式）CSS 样样式表 方法二：外部导导入CSS 样样式表 方法三：外部链接CSS 样式表 方法四：行间写入式CSS 样式表 就是把样式写入HTML代码需要格式化的所在行的 位置。这种方法已很少使用，只是在特定需要定 义的某行中才应用上。在Dreamweaver MX 2004 中已没有与之相应设定好的应用方式，若要使用 这方法，只有手动写代码了。 行间写入式CSS 样式表可放
11、置于以下二地方： 标签之间行间写入式CSS 样式表可放置于以下二地方： 标签之间 World Enterprises 现存的HTML标签内部 Join the club！Events Meetings 以上所介绍的样式表规则，我们发现在一个HTML页中 ，每种HTML标志只能为其定义一种风格，然而我们有 时候会碰到其他一些情况，比如：同一个HTML标志需 要呈现不同的风格；有若干个不同的HTML标志采用相 同的样式规则。 样式表提供了解决方法，创建类（CLASS）可以创 建同一个HTML标志的多种风格。 四、创建CLASS CLASS 其语法为： .类名属性：值；属性：值；属性：值 标签.类名
12、属性：值；属性：值；属性：值 引用方法是： This is a sample 这个段落将缩进0.5in 这个段落将比上面缩进一倍距离 此外，可以直接定义CLASS，应用于HTML页面中的 各个标记。其语法只是比上面的少了一个标志： .类名属性：值；属性：值；属性：值 该“.main01”类可用于任何HTML标签 该CLASS规定了字符的大小和颜色，当HTML文档中 任何地方，无论是段落、表格，需 要其字体大小为10pt颜色为红色时，就可以引用 这个CLASS。引用的方法和上面一样： 例如要设置某单元格中的字符大小为main10所定 义的风格，则可写为： 设置某一段落字符风格为main10，可写为： 我们可以在同一HTML文档中多次引用这个类，引用 该类的地方都将呈现同一种风格。 ID #id 标签属性：值；标签属性：值；标签属性：值 引用的方法也相同： 或 THE END THANK YOU!
