css教案.docx
- 文档编号:12278646
- 上传时间:2023-04-17
- 格式:DOCX
- 页数:29
- 大小:993.46KB
css教案.docx
《css教案.docx》由会员分享,可在线阅读,更多相关《css教案.docx(29页珍藏版)》请在冰豆网上搜索。
css教案
3.1 CSS概述
CSS(CascadingStyleSheet,可译为“层叠样式表”)是一组格式设置规则,用于控制Web页面的外观。
通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。
CSS可以用任何写文本的工具进行开发,如文本工具,dreamweaver等。
3.1.1 CSS的语法结构
CSS定义是由三个部分构成:
选择符{属性:
值;}。
例如:
body{background:
#000000;}/*设置页面背景为黑色*/
3.1.1 选择符
1.选择符的书写格式和使用方法
(1)如果需要对一个选择符指定多个属性时,可使用分号将所有的属性和值分开,例如:
p{text-align:
center;color:
red} /*段落居中排列;并且段落中的文字为红色*/
(2)可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义,例如:
h1,h2,h3,h4,h5,h6{color:
green} /*六种标签的文字均为绿色*/
(3)用类选择符能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。
假如想要两个不同的段落,一个段落向右对齐,一个段落居中,则可先定义两个类:
p.right{text-align:
right}
p.center{text-align:
center}
然后用不在不同的段落的XHTML标签里加入class参数:
这个段落向右对齐的
这个段落是居中排列的
(4)类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式。
例如有CSS规则如下
.center{text-align:
center}/*定义.center的类选择符为文字居中排列*/
使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:
这个标题是居中排列的
这个段落也是居中排列的
(5)先在XHTML页面中为某个元素指定id参数,然后采用id选择符对这个元素定义单独的样式。
ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。
ID只能在一个页面中出现一次,而class可以多次运用。
定义ID选择符要在ID名称前加上一个“#”号。
和类选择符相同,定义ID选择符的属性也有两种方法。
下面这个例子,ID属性将匹配id="intro"的元素:
#intro{font-size:
110%;font-weight:
bold;}/*字体尺寸为默认尺寸的110%;粗体*/
下面这个例子,ID属性只匹配id="intro"的段落元素:
p#intro{font-size:
110%;font-weight:
bold;}
(6)可以单独对某种元素定义包含选择符,例如要改变表格内的链接样式,而表格外的链接样式不变:
tablea{font-size:
12px}
2.选择符的优先级别
相比之下,ID选择符-------类选择符--------HTML标记选择符。
3.样式表的层叠性
层叠性就是继承性。
事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值。
另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。
3.1.1 应用CSS样式到网页中
CSS样式表可以以多种方式灵活的应用到所设计的页面中,选择方式根据设计的不同要求来制定
1.内嵌样式表
内嵌样式表将CSS样式所定义的内容写在XHTML代码行内,如
#F00">页面背景色为红色