重点记忆:四种结合方式 三种基本选择器
1.CSS:层叠样式表
相当于皮肤
提高了可维护性、样式与内容分离(注释格式/* */)
2.CSS与HTML结合的四种方式:内联式、嵌入式、外部式
1.每个标签上都有一个style【属性】来控制 sytle="key:value;key:value" <div style="">
2.使用style标签:<style type="text/css">div{key:value}</style>写在头部
3.在style标签里面使用语句,与2类似对比 【兼容性差】
@import url{css文件路径};
4.使用link头标签引入外部文件<link rel="stylesheet" type="text/css" href="" />分离了【推荐】
CSS的优先级:由上到下、由外到内优先级增高(就近原则)
3. CSS的选择器:要对哪个标签里的样式进行操作
三种基本选择器
1.标签选择器:使用标签名称作为选择器名称(上2处)
2.类选择器【最常用】:每个HTML标签都有一个class属性,使用这个值作为选择器。
使用方法:div.haha{} .haha{}(所有class值为haha的)
3.id选择器【给js留的】:每个HTML标签都有一个id属性,使用这个值作为选择器。
使用方法:div#haha{} #haha{}(所有id值为haha的)
基本选择器的优先级:(内联的就近的style最高)>id>class>标签
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,
ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式
但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
<span class="stress bigsize">可以给两个同时设置。
三种扩展选择器
1.关联选择器:可以设置嵌套标签里的样式
如:<div><p></p></div> 设置p标签的样式 div p{}
.food>li .first span
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
2.组合选择器:把不同的标签设置成相同的样式
如:<div></div> <p></p> 设置相同的样式 div,p{}
3.伪元素选择器:提供了一些定义好的样式【作了解】
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签设置样式
比如超链接(lv ha):
状态:原始状态 悬停状态 点击状态 点击之后
:link :hover :active :visited
a:hover{color:red;}
样式操作 在头部style中 a:link{} a:hover{}
4.CSS盒子模型 (现在主流为div+css组成)
在讲解CSS布局之前,我们需要提前知道一些知识,
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。
重要概念 边框:border (设置上下左右 border-top border-bottom border-left border-right)
属性:width(即粗细) style(样式) color
内边距:padding(div中文本内容距离边框的值)(四个方向同上)
属性:length
外边距:margin(div距外部的距离)其它亦同上
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)
设置上下左右四个方向的边距是按照顺时针方向设置的(不单独设置的时候的默认顺序)
5.CSS的布局的漂浮【作了解,用的少】
float
两个属性值:left 文本流流向对象【右边】(自己居左,后边div居右) right 流向【左边】
6.CSS的布局的定位
position
两个属性值:absolute :将对象从文档流中拖出(在上面飘着,后面补上),再使用上下左右定位
relative :对象不可重叠(不会拖出),依旧使用上下左右定位
7.案例:图文混排 图片签名