《网页设计之CSS层叠样式表》由会员分享，可在线阅读，更多相关《网页设计之CSS层叠样式表（46页珍藏版）》请在金锄头文库上搜索。
1、第4讲 CSS层叠样式表,内容提要,4.1 CSS的基本概念4.2 如何使用Dreamweaver CS3建立CSS4.3 CSS滤镜,4.1 CSS的基本概念,CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。 优点表现和内容相分离提高页面浏览速度效率高、易于维护和改版,4.1 CSS的基本概念,4.1.1 样式和规则4.1.2 层叠和顺序,4.1.1 样式和规则,CSS样式,选择符（selector）,属性（properties）,属性值（value）,格式：选择符 属性 : 值 ,选择符 属性1 : 值
2、1; 属性2 : 值2 ,基本格式：,复合样式：,4.1.1 样式和规则,（1）单个“HTML标签”作为选择符 单个“HTML标签” ： body、table、p等等例：body color: black,body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,效果：页面主体（body）中的文字为黑色。,4.1.1 样式和规则,属性值由多个单词组成，必须在值上加引号。例1：p font-family: sans serif,效果：定义了段落字体为sans serif,需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p text-align: ce
3、nter; color: red,效果：定义了段落居中排列，并且段落中的文字为红色,4.1.1 样式和规则,为了使所定义的样式表易读，可以采用分行的书写格式。,效果：段落排列居中，段落中文字为黑色，字体是arial,例3： p text-align: center; color: black; font-family: arial ,4.1.1 样式和规则,（2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。例：h1, h2, h3, h4, h5, h4 color: green ,效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。,p, ta
4、ble font-size: 9pt ,p font-size: 9pt table font-size: 9pt ,效果：段落和表格里的文字尺寸为9号字 。,例2：,4.1.1 样式和规则,（3）类选择符 把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合 例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。,p.right text-align: right p.center text-align: center,应用在不同的段落里，在HTML标签里加入class类参数：, 这个段落向右对齐的 这个段
5、落是居中排列的,4.1.1 样式和规则,类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。例2： .center text-align: center,效果：定义了.center的类选择符，其表示文字居中排列。,这个标题是居中排列的 这个段落也是居中排列的,可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：,4.1.1 样式和规则,（4）ID择符 ID选择符用来对这个单一元素定义单独的样。方法：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。
6、,#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ,例2：,效果：定义了一条id=intro 的CSS规则：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。,整个网页文档中的每个ID名称必须是唯一的，其必须以一个字母开头，紧跟字母、识字或连字符组成。字母限于A-Z和a-z。,注：,4.1.1 样式和规则,（5）包含选择符可以单独对元素1里包含的元素2定义样式表。例：对表格元素table里包含的链接元素a定义样式表：,table a font-size: 12px ,
7、此定义对表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。,注：,4.1.2 层叠和顺序,（1）内联样式（Inline styles）在HTML标签内使用style属性定义的，适用于该标签的个别样式。,内联样式举例。,例1：,使用内联样式，必须使用Content-Style-Type 和text/css对整个文档进行单独的样式表语言声明所以，使用内联CSS的网页设计者必须在head部分包括以下标签：,4.1.2 层叠和顺序, 这段的样式是红色的New Century Schoolbook字，如果字体可
8、用的话。,style属性可以应用于任意body元素(包括body本身)，除了basefont、param和script。style属性可以将任何数量的样式属性声明当作自己的值，而每个声明用分号隔开。,4.1.2 层叠和顺序,（2）内部样式（Embedded styles）在与之间用style标签加入css样式定义。适用于指定该网页的样式。,内部样式举例。,例：,type属性是指使用何种语法，”text/css”表示使用CSS语法,4.1.2 层叠和顺序,（3）链接样式（Linked styles）事先建立外部样式表文件（.css），然后在网页文件的与之间用link标签链接该样式表文件。此法使页
9、面内容与版面设计分开，易于管理整个网站的网页风貌。,链接样式举例。,rel属性是指在页面中使用外部样式表文件,type属性是指使用何种语法,href属性是指样式表文件的URL地址,样式表文件可使用任何文本编辑器打开并编辑，内容是具体的CSS样式定义，不包括标签。例如my.css文件的内容如下：,p color : red ,例：,4.1.2 层叠和顺序,（4）导入样式（Imported styles）导入样式是指在内部样式定义里，使用import命令引用事先建立的外部样式表文件。,导入样式举例。,例：,4.1.2 层叠和顺序,5）缺省浏览器样式（Default browser styles）浏
10、览器一般按照上述顺序，由内到外，依次地，继承式地（层叠式地）执行样式表的指令。CSS的妙趣在于能够利用CSS样式规则有效地控制页面对象。如下图，从样式(左)和标签(右)两个角度可见CSS定义的层叠性：从外到内均可定义CSS，并且内层能够继承外层的CSS。,4.1.2 层叠和顺序,CSS三级别,外部样式：应用于多个页面，可使用扩展名为.css的外部样式文件（用记事本建立）,内部样式：应用于单个页面，可在网页的与之间定义一个样式代码块；,内置样式：应用于页面内部明确的标签，可在标签内部添加style=.属性,CSS三级别,4.2 如何使用Dreamweaver CS3建立CSS,4.2.1 用“C
11、SS面板”建立CSS4.2.2 用“页面属性”新建内部样式4.2.3 用“属性面板”新建内部样式4.2.4 套用CSS,4.2.1 用“CSS面板”建立CSS,“CSS面板”可以为当前网页新建、管理、编辑和套用内部样式，以及附加外部样式表。例4-1 Dreamweaver CS3新建一个HTML网页，标题为“在线图书”。,在线图书 1.网络安全技术与应用,HTML代码(1)：,4.2.1 用“CSS面板”建立CSS,2.网络安全基础与应用 畅销指数：详细论述网络安全的基础理论认真总结作者多年来的网络安全建设经验准确介绍网络安全的应用技术及前沿成果,畅销指数： 作者多年教学与科研工作总结 概念明
12、晰，实例丰富，注重技能训练 适合作为网络安全应用课程的教材 简明易懂的写作风格，方便读者自学,HTML代码(2)：,4.2.1 用“CSS面板”建立CSS,“修改”-“CSS样式”,“窗口”-“CSS样式”,“CSS”,1)打开CSS面板,4.2.1 用“CSS面板”建立CSS,2)“新建CSS规则”,“删除CSS规则”可以删除当前选定的CSS规则。,“显示列表视图”可按字母序显示属性，并把已设置的属性显示在前；,“只显示设置属性”仅显示已设置的属性；,“附加样式表”可以链接或导入事先建立的外部样式表文件；,“新建CSS规则”可以新建一条CSS规则；,“显示类别视图”可以按照4个类别显示属性；,“编辑样式”可以修改当前选定的CSS规则；,“标签”-输入“p”-选择“仅对该文档”-“确定”,4.2.1 用“CSS面板”建立CSS,3)设置此条CSS规则,“p的CSS规则定义 ”,4)“确定”后编辑p,4.2.1 用“CSS面板”建立CSS,
