3.1
CSS简介3.2在
HTML文档中使用CSS3.3编写CSS样式规则3.4样式的继承与层叠3.5CSS盒模型3.6流式布局与浮动布局3.7盒子的定位方式3.8网页布局实践
2
CSS的作用CSS文档的基本组成元素
SimplestPage.htm
仅仅HTMLHTML+CSS
结论:HTML定义了网页的结构CSS决定了浏览器如何显示HTML代码
4
5
行内式:在HTML标签的style属性中编写CSS代码行内式嵌入式:在中编写CSS代码嵌入式链接式:使用
链接外部CSS文件链接式
导入式:使用@import指令导入式
@import"mystyle.css";
6
7
CSS文档由一条或多条CSS规则组成,规则拥有特定的格式:
8
单位名称pc(pica)pt(point)mm(millimeter)cm(centimeter)in(inch)px(pixel)emex
说明1pc=12point1pt=1/72inch亳米厘米英寸像素,代表计算机屏幕上的一点表示字体的高度的单位表示字体中字母X的高度
9
用于设定HTML文档中指定标签的显示样式
p{color:Red;font-size:25px;}
11
给特定的一组CSS代码取名,然后可以应用于多个不同的标签:
.red_large_text{color:Red;font-size:25px;}定义一个类别选择器
thisisaparagraph.
北京理工大学在不同元素中应用类别选择器
12
对于页面中独一无二的元素,如页脚,可以给其id属性赋予一个独一无二的值
任何建议,请发送至xml:namespace prefix = ahref="mailto />教师邮箱
然后可以用ID选择器给指定ID的元素设置样式
#footer{font-style:italic;font-size:16px;}
13
超链接标签支持几个特殊的CSS样式类,用于定义超链接不同状态的样式,这些样式类被称为“伪类(pseudoclass)”
属性a:linka:visiteda:hovera:active说明超链接的普通样式,即正常浏览状态的样式被点击过后呈现的样式鼠标指针悬停于超链接元素之上时呈现的样式单击超链接时呈现的样式
Demo:PseudoSelector.htm
14
将前面介绍的“标记选择器”、“类别选择器”和“ID选择器”统称为“基本选择基本选择器”。“复合选择器”包括:(1)交集选择器(2)并集选择器(3)后代选择器
15
直接指定特定标记中特定类别或ID的样式。
p.special{/*标记.类别选择器*/color:red;}p#special{/*id选择器*/color:green;}
注意:选择器字符间不要有空格!
Demo:IntersectionSelector.htm
16
一次定义多个标签或类别或ID的样式
div,.special,#one{/*集体声明*/text-decoration:underline;/*下划线*/}Demo:UnionSelector.htm
注意:以逗号隔开各个选择器
17
选择嵌套在指定元素的内部元素的样式
pspan{color:red;}
Demo:DescendantSelector.htm
注意:以空格分隔选择器
18
CSS选择器是编写样式表文档的基础,一定要熟悉并掌握这六种基本的选择器样式,从而为今后网页设计打下基础。
19
浏览器如何显示未定义样式的元素?样式定义相互冲突时如何决定最终显示效果?
Demo:CSSInherits.htm
div.father{color:blue;/*颜色*/text-decoration:underline;/*下划线*/}这是父元素内的文本,显示为蓝色加下划线
这是子元素内的文本
使用交集选择器定义样式
定义两个嵌套的元素
结论:没有定义CSS规则的HTMLCSS规则的HTML元素没有定义CSS规则的HTML元素从它的父元素中继承样式!从它的父元素中继承样式!
21
选择器定义的规则相互冲突怎么办?Demo:CascadingExample.htm
行内样式>id样式>类别样式>标签样式
结论:特殊者胜出!
22
页面布局的关键CSS强大排版能力的根基
htmlheadbodyp
24
marginpadding
Box
25
26
HTML标签分为两大类:1.
-
相关文章
-
最新文件
关于网学 |
万能工具 |
在线交流 |
会员中心 |
查询论文 |
招聘说明 |
精品资源 |
专题论文 |
会员中心 |
联系方式 |
下载目录
论文目录
Copyright 2005-2018 www.myeducs.cn All Rights Reserved 版权所有·网学网 提供大量原创论文 参考论文 论文资料 源代码 管理及投稿 E_mail:3710167@qq.com
郑重声明: 本网站论文均来自互联网,由本站会员上传或下载,仅供个人交流、学习、参考之用,版权归原作者所有
请下载完后24小时之内删除,任何人不得大幅抄录、在期刊上发表或作为商业之用。如涉及版权纠纷,本网站不承担任何法律及连带责任。