一、什么是CSS
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
二、CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
三、CSS基本语法结构
四、HTML中引入CSS样式
<head>
<meta charset="utf-8" />
<title></title>
<!--描述：内部样式表
CSS代码写在<head>的<style>标签中
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 -->
<style>
#neibu {
color: blue;
}
</style>
<!--描述：外部样式表
CSS代码保存在扩展名为. css的样式表中-->
<!--描述：链接外部样式表,<link/>标签属于XHTML
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示-->
<link rel="stylesheet" href="css/初识CSS3.css" />
<!--描述：导入外部样式表，@import是属于CSS2.1
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中-->
<style>
@import url("css/初识CSS3.css");
</style>
</head>
<body>
<!--描述：行内样式表(不建议写)
使用style属性引入CSS样式 -->
<p style="color: brown;">行内样式</p>
<p id="neibu">内部样式</p>
<h1>外部样式</h1>
</body>
五、CSS3基本选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 标签选择器*/
p{color:red;}
/*类选择器,以.开头*/
.lei{color: blue;}
/* id选择器，以#开头*/
#ceshi{color: yellow;}
/* 全局选择器*/
*{font-size: 20px;}
/交集选择器，class值不使用任何东西隔开/
p.one{color: pink;}
/class值用“，”隔开，表示“或”/
.bingji,h3,#test{color: orange;}
</style>
</head>
<body>
<!--描述：标签选择器
HTML标签作为标签选择器的名称
标签选择器直接应用于HTML标签-->
<p>击壤歌</p>
<!--描述：类选择器
类选择器可在页面中多次使用 -->
<p class="lei">关雎</p>
<p>木瓜</p>
<p>桃夭</p>
<p class="lei">蒹葭</p>
<!--描述：id选择器
ID选择器在同一个页面中只能使用一次 -->
<p id="ceshi">无衣</p>
<p id="ceshi">河广</p>
<!--描述：交集选择器
由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
交集选择器 是 并且的意思。 即…又…的意思
比如： p.one 选择的是： 类名为 .one 的 p标签-->
<p class="one">静夜思</p>
<!--描述：并集选择器
通常用于集体声明
，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思
比如 .bingji, h3 , #test {color: #F00;}
表示 .bingji 和 h3 和 #test 这三个选择器都会执行颜色为#F00-->
<p class="bingji">迢迢牵牛星</p>
<p id="test">静夜思</p>
<h3>悯农</h3>
</body>
基本选择器的优先级
不遵循”就近原则”，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
六、CSS的高级选择器
(1)层次选择器
①后代选择器
<head>
<style>
div span{
color: red;
}
</style>
</head>
<body>
<!--描述：后代选择器
E F ：选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入-->
<div>
<span>11111111</span><br />
<span>22222222</span><br />
<span>33333333</span><br />
<ul>
<li>
<span>444444444</span>
</li>
</ul>
</div>
</body>
②子选择器
<head>
<style>
div>span{
color: yellow;
}
</style>
</head>
<body>
<!--描述：子选择器
E>F ：选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素-->
<div>
<span>11111111</span><br />
<span>22222222</span><br />
<span>33333333</span><br />
<ul>
<li>
<span>444444444</span>
</li>
</ul>
</div>
</body>
③相邻兄弟选择器
<head>
<style>
#span2+span{
color: blue;
}
</style>
</head>
<body>
<!--描述：相邻兄弟选择器
E+F ：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面-->
<div>
<span>11111111</span>
<span id="span2">22222222</span>
<span>33333333</span>
<span>44444444</span>
<span>55555555</span>
</div>
</body>
④通用兄弟选择器
<head>
<style>
#span2~span{
color: blue;
}
</style>
</head>
<body>
<!--描述：通用兄弟选择器
E~F ：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素-->
<div>
<span>11111111</span>
<span id="span2">22222222</span>
<span>33333333</span>
<span>44444444</span>
<span>55555555</span>
</div>
</body>
(2)结构伪类选择器
1.child结构伪类
<head>
<style>
/*作为父元素的第一个子元素的元素E*/
div p:first-child{color: red;}
/*作为父元素的最后一个子元素的元素E*/
div p:last-child{color: green;}
</style>
</head>
<body>
<div>
<!--描述：第一个标签不是p标签 -->
<h1>child结构伪类</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p>
<p>第五个元素</p>
<p>第六个元素</p>
</div>
</body>
2.nth-child结构伪类
<head>
<style>
/*选择父级元素E的第n个子元素F，关键字为even偶数、odd奇数*/
div p:nth-child(odd){color: yellow;}
div p:nth-child(even){color: orange;}
</style>
</head>
<body>
<div>
<!--描述：第一个标签不是p标签 -->
<h1>nth-child结构伪类</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p>
<p>第五个元素</p>
<p>第六个元素</p>
</div>
</body>
3.type结构伪类
<head>
<style>
/*选择父元素内具有指定类型的第一个E元素*/
div p:first-of-type{color: red;}
/*选择父元素内具有指定类型的最后一个E元素*/
div p:last-of-type{color: green;}
</style>
</head>
<body>
<div>
<!--描述：第一个标签不是p标签 -->
<h1>type结构伪类</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p>
<p>第五个元素</p>
<p>第六个元素</p>
</div>
</body>
4.nth-of-type结构伪类
<head>
<meta charset="utf-8" />
<style>
/*选择父元素内具有指定类型的第n个F元素，关键字为even偶数、odd奇数*/
div p:nth-of-type(odd){color: yellow;}
div p:nth-of-type(even){color: orange;}
</style>
</head>
<body>
<div>
<!--描述：第一个标签不是p标签 -->
<h1>nth-of-type结构伪类</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<p>第三个元素</p>
<p>第四个元素</p>
<p>第五个元素</p>
<p>第六个元素</p>
</div>
</body>
(3)属性选择器
1.E[attr]全部
<head>
<style>
/*E[attr]:选择匹配具有属性attr的E元素*/
p[class]{color: red;}
</style>
</head>
<body>
<h1>属性选择器</h1>
<p>第一个元素</p>
<p class="abc">第二个class为abc的元素</p>
<p class="bcd">第三个class为bcd的元素</p>
<p>第四个元素</p>
<p class="hjk">第五个class为hjk的元素</p>
<p>第六个元素</p>
<p class="uio">第七个class为uio的元素</p>
<p class="qwer">第八个class为qwer的元素</p>
</body>
2.E[attr*=val]包含
<head>
<style>
/*E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”*/
p[class*='b']{color: orange;}
</style>
</head>
<body>
<h1>属性选择器</h1>
<p>第一个元素</p>
<p class="abc">第二个class为abc的元素</p>
<p class="bcd">第三个class为bcd的元素</p>
<p>第四个元素</p>
<p class="hjk">第五个class为hjk的元素</p>
<p>第六个元素</p>
<p class="bdf">第七个class为bdf的元素</p>
</body>
3.剩余属性选择器
<head>
<style>
/*E[attr=val]：选择匹配具有属性attr的E元素,并且属性值为val
（其中val区分大小写）*/
p[class='abc']{color: blue;}
/*E[attr^=val]：选择匹配元素E，且E元素定义了属性attr，
* 其属性值是以val开头的任意字符串 */
p[class^='b']{color: yellow;}
/*E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，
* 其属性值是以val结尾的任意字符串*/
p[class$='k']{color: green;}
</style>
</head>
<body>
<h1>属性选择器</h1>
<p>第一个元素</p>
<p class="abc">第二个class为abc的元素</p>
<p class="bcd">第三个class为bcd的元素</p>
<p>第四个元素</p>
<p class="hjk">第五个class为hjk的元素</p>
<p>第六个元素</p>
<p class="bdf">第七个class为bdf的元素</p>
</body>
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
