资源描述：
《《页面设计CSS》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、Web技术原理及应用Web数据库原理和应用烟台大学计算机学院陈智育第4章页面设计-CSS内容什么是CSS1样式引用方式和层叠顺序2样式条目定义规则3样式属性4CSSCSS:CascadingStyleSheetsCSS:层叠样式表,级联样式表;W3C标准[2.0]CSS:将Web显示[表示]从HTML内容[结构]中分离出来样式:定义如何显示HTML元素表:样式通常存放在样式表中,常独立为CSS文件CSS文件为多网页服务.可同时控制多个网页的样式和布局(统一风格);一个Web文件也可引用多个CSS文件层叠:多个样式
2、定义会叠加在一起CSS-样式引用方式内联样式:在元素内部,用style属性设置样式的作用限于元素内部style属性值为样式规则(见后)几乎所有体部标签都支持style属性内容和显示仍混在一起,尽量少用CSS-样式引用方式内部样式表在Web文件head中,用style标签定义样式的作用限于本文件style标签中可包含多个规则条目style标签的type属性默认值为”text/css”使用注释符以适应不支持CSS的浏览器CSS-样式引用方式外部样式表(链接)CSS样式独立为文件(.css),可由多个网页共用head中
3、使用link标签链接CSS文件网页中可同时链接多个CSS文件CSS文件由多个规则条目构成mystyle.cssCSS-样式引用方式外部样式表(引入)在head的style标签中使用或CSS文件中用@import声明引入外部CSS文件表现和link方式一样声明语句由CSS文件内容完全替换(C语言)记得末尾加分号类似#includeCSS-样式引用方式对象引用将HTML元素作为文档对象应用文档对象模型的访问方法JavaScript动态修改style对象属性来改变样式注意名称变化(例:font-size=>fontSi
4、ze)驼峰命名法查看效果CSS-样式层叠五种样式引用方式可混合使用层叠:多种样式设置(多方式,多文件)综合效果继承:下面未定义的样式,继承上面的覆盖:下面定义的样式,覆盖上面的样式层叠(覆盖)优先级(低->高)浏览器缺省样式外部样式表(链接)外部样式表(引入)内部样式表内联样式表对象引用P158同样式表中越后优先级越高选择符也有优先级!importantCSS-样式层叠外部样式表内部样式表层叠样式表?浏览器默认CSS-样式规则条目定义规则条目由3部分构成:选择符[selector],样式属性名,属性值条目括号中内
5、容也称样式规则由一个或多个属性对组成,由分号间隔多字属性值必须加引号(双引号或单引号)规则条目定义中可添加注释/*…*/CSS-选择符选择符:给谁定义样式HTML标签:可以是一个或多个(逗号分隔)类选择符id选择符上下文选择符伪类带特殊属性的标签做选择符CSS-选择符选择符:类选择符标签.类名:区分同一种标签的格式.类名:对不同标签的应用相同样式一个标签可以归属多个类CSS-选择符选择符:id选择符为某单一元素指定样式,因为,同一Web页中,id是唯一的类似内联样式,但id选择符更好下面两种id选择符写法皆可CS
6、S-选择符选择符:上下文选择符表明多层嵌套,用空格分隔CSS-选择符选择符:伪类伪类用于区分标记的不同状态交互的动态响应,将表示和行为合在一起手册CSS属性CSS属性:可以定义哪些样式字体属性文本属性颜色和背景属性方框属性(版式属性)列表属性(分类属性)定位属性CSS样式表中文手册.chmCSS-字体属性字体属性字体:font-family字号:font-size字形:font-style字重:font-weight小型大写:font-variantCSS-字体属性例4-40查看网页效果和书上代码的不同:XHTM
7、L,CSS文件引用引用方式:外部样式表(link)样式条目规则:标签选择符,类选择符查看HTML和CSS文件更换CSS文件例4-40a.css内容未变CSS-字体属性多单词加引号,备选,分号可不加CSS-字体属性font-size的值相对长度单位:em-相对当前字体的大小,1.5emex-相对当前字体的高度px-像素,相对显示分辨率绝对长度单位pt[点],pc[派卡(pica)],in[英寸],cm,mm1in=2.54cm=25.4mm=72pt=6pc其他串值和百分数查阅手册:语法[复合],取值,说明,示例,
8、应用标签CSS-文本属性文本属性text-align:水平对齐vertical-align:垂直对齐letter-spacing:字符间隔line-height:行高text-indent:缩进text-decoration:修饰CSS-文本属性例4-42文本属性示例查看网页效果样式条目规则:id选择符,类选择符查看HTML和CSS文件div和spanCSS-颜色和背景属
