网页设计之CSS层叠样式表

网页设计之CSS层叠样式表

ID:42333988

大小:1.81 MB

页数:46页

时间:2019-09-13

网页设计之CSS层叠样式表_第1页
网页设计之CSS层叠样式表_第2页
网页设计之CSS层叠样式表_第3页
网页设计之CSS层叠样式表_第4页
网页设计之CSS层叠样式表_第5页
资源描述:

《网页设计之CSS层叠样式表》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第4讲CSS层叠样式表内容提要4.1CSS的基本概念4.2如何使用DreamweaverCS3建立CSS4.3CSS滤镜4.1CSS的基本概念CSS(CascadingStyleSheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。优点表现和内容相分离提高页面浏览速度效率高、易于维护和改版4.1CSS的基本概念4.1.1样式和规则4.1.2层叠和顺序4.1.1样式和规则CSS样式选择符(selector)属性(properties)属性值(value)格式:选择符{属性:值}

2、选择符{属性1:值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:"sansserif"}效果:定义了段落字体为sansserif需要对一个选择符指定多个属性时,注意使用分号将所

3、有的属性和值分开。例2:p{text-align:center;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

4、:green}效果:组里包括所有的标题元素,每个标题元素的文字都为绿色。p,table{font-size:9pt}p{font-size:9pt}table{font-size:9pt}效果:段落和表格里的文字尺寸为9号字。例2:4.1.1样式和规则(3)类选择符把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合例1:定义两个不同的段落,一个段落向右对齐,一个居中,可先为段落定义两个类。p.right{text-align:right}p.cente

5、r{text-align:center}应用在不同的段落里,在HTML标签里加入class类参数:这个段落向右对齐的

这个段落是居中排列的

4.1.1样式和规则类选择符的另一种用法,在选择符中省略HTML标签名,这样可以把几个不同的元素定义成相同的样式。例2:.center{text-align:center}效果:定义了.center的类选择符,其表示文字居中排列。这个标题是居中排列的

6、ass="center">这个段落也是居中排列的

可应用到任何元素上。如:使h1元素(标题1)和p元素(段落)都归为“center”类,于是这两个元素的样式都可以随着类选择符“.center”而定:4.1.1样式和规则(4)ID择符ID选择符用来对这个单一元素定义单独的样。方法:直接以“#”开头,使该ID代表的样式属性可用于各种网页元素。#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}例2:效果:

7、定义了一条id="intro"的CSS规则:字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明。整个网页文档中的每个ID名称必须是唯一的,其必须以一个字母开头,紧跟字母、识字或连字符组成。字母限于A-Z和a-z。注:4.1.1样式和规则(5)包含选择符可以单独对元素1里包含的元素2定义样式表。例:对表格元素table里包含的链接元素a定义样式表:tablea{font-size:12px}此定义对表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。这种方式只对在元素1里的元素2定义,对单

8、独的元素1或元素2无定义。注:4.1.2层叠和顺序(1)内联样式(Inlinestyles)在HTML标签内使用style属性定义的,适用于该标签的个别样式。内联样式举例。

例1:使用内联样式,必须使用Content-St

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。