1、概述
CSS样式的基本操作，包含CSS基本语法、CSS选择器、CSS引入方式、CSS布局等，通过熟练掌握网页布局的基本操作，实现网页样式的设置。
CSS文件的后缀名为.CSS，HTML是网页的结构，CSS是网页的修饰，在实际开发过程中为了更好的扩展和项目的维护，一般都是将结构（HTML）和样式（CSS）分离，在页面通过引入的方式来调用。
2、CSS语法
在页面上使用CSS时，通常在head标签中通过style写入CSS样式，具体CSS基本语法：
例1：让段落标签内的文本内容都为红色字体、字体居中
<style type="text/css">
p{
color: tomato;
text-align: center;
}
</style> 
3、CSS样式引用
3.1.外部样式表（外联式）
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始css</title>
<!--外联方式引入
link:外联样式是通过link标签引入
rel：加载方式，表示页面初始化时就加载样式文件
href：引入CSS样式文件的路径
type：指定文件类型，一般可以忽略
-->
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<p>初始CSS样式语法</p>
<p>外部样式表的引用使用</p>
</body>
</html>
CSS文件
p{
color: red;
font-size: 40px;
}
3.2.内部样式（内嵌式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始css</title>
<!-- 内联样式 -->
<style type="text/css">
label{
font-weight: bolder;
font-size: 30px;
}
</style>
</head>
<body>
<label>内联样式</label>
</body>
</html>
3.3.内联样式（行内式）
<!-- 行内样式 -->
<p style="color: #009688;">行内样式的使用</p>3.4.样式优先级
CSS样式优先级采用：就近原则，最靠近相关标签的样式优先级越高
注：
- 行内样式的优先级最高
- 就近原则
- 三种样式属性不冲突，其都会生效
3.5.CSS权重important
作用：提升指定样式的优先级
p{
color: red !important; /*权重*/
font-size: 40px;
}4、CSS选择器
4.1.标签选择器
标签选择器就是使用html标签来定义的选择器称为标签选择器，标签选择器针对页面中所有的标签都有效。。
label{
font-size: 18px;
background-color: beige;
}4.2.id选择器
4.3.class选择器
注意点：
- 选择器名称小写，如果名称由多个单词组成，使用"-"连接，eg：.box-class
- 选择器名称不要纯数字或中文命名，也不要使用数字或特殊符号开头
- 选择器名称要做到见名知意
在一个标签上可以使用多个类选择器，类选择器之间用空格分开
4.4.通配符选择器
CSS中通配符选择器使用"*"来定义
*{
margin: 0 auto;
padding: 0;
background-color: antiquewhite;
}4.5.子代选择器
子代选择器可以选择当前元素的所有儿子元素，CSS中使用">"隔开定义
语法：元素1>元素2{声明样式}
/* 子代选择器 */
div>span{
color:red;
}
备注：子代（子元素）只能选择作为某元素的最近一级子元素（只能针对亲儿子元素）
4.6.后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的所有子元素，CSS中使用空格定义。
语法：元素1 元素2{声明样式}
/* 后代选择器
意思：相当于选择div元素里面的所有span元素
*/
div span{
color:red;
}
注：
后代选择器定义是使用空格 Eg：元素1 元素2
后代选择器是选择元素选择元素1包含的所有元素2标签
4.7.并集选择器
并集选择器可以选择多标签，同时为它们定义相同的样式，通常用于集体声明，在CSS样式中并集选择器是各种选择器通过逗号（,）连接，任何形式的选择器都可以作为并集选择器的一部分。
<style type="text/css">
div>span,div>a
{
color: #FF0000;
}
</style>4.8.交集选择器
选择的元素必须同时满足多个条件才可以被选择，CSS中的定义：标签名.id/类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS相邻兄弟选择器</title>
<style type="text/css">
/* 为所有p标签并且class="part"的段落添加颜色 */
p.part
{
color: red;
}
</style>
</head>
<body>
<div class="part">
元素1
</div>
<p class="part">元素2</p>
<p>元素3</p>
</body>
</html>
4.9.相邻兄弟选择器
可选择紧接在另一个元素后的元素，二者有相同的父元素（兄弟关系），在CSS中使用"+"定义
语法：元素1+元素2{声明样式}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS相邻兄弟选择器</title>
<style type="text/css">
/* 针对相邻兄弟元素 */
div>p+span
{
color: red;
}
</style>
</head>
<body>
<div>
<p>后代元素1</p>
<span>
<p>后代元素3</p>
</span>
<div>
<p>后代元素4</p>
</div>
</div>
</body>
</html>这个选择的就是div标签下的p标签的兄弟标签span标签
4.10.后继兄弟选择器
后继兄弟选择器选取所有指定元素之后的相邻兄弟元素，CSS中使用"~"定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后继兄弟选择器</title>
<style type="text/css">
/* 为div之后的所有P标签设置字体颜色（针对所有兄弟元素） */
div~p
{
color: red;
}
</style>
</head>
<body>
<div>
<p>后代元素1</p>
</div>
<p>后代元素2</p>
<p>后代元素3</p>
</body>
</html>
5、伪类选择器
5.1.a标签伪类选择器
CSS伪类选择器是用来添加一些选择器的特殊效果
常用的是a标签伪类选择器：
- a:link：没有点击过的链接
- a:visted：点击过的链接
- a:hover：鼠标经过的链接
- a:active：鼠标正在按下还没有弹起鼠标的那个链接
注意：为了确保a标签的伪类选择器生效，必须按照顺序声明：link-->visted-->hover-->active
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS相邻兄弟选择器</title>
<style type="text/css">
a:link{
color: aqua;
}
a:visited{
color:gray;
}
a:hover{
color: red;
}
a:active{
color:green;
}
</style>
</head>
<body>
<a href="text1.html">测试1</a>
<a href="text2.html">测试2</a>
<a href="text3.html">测试3</a>
<a href="text4.html">测试4</a>
</body>
</html>
5.2.属性选择器
通过实例进行属性选择器的说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
div{
font-weight: 100%;
background-color: aquamarine;
line-height: 40px; /*设置行高*/
margin-top: 20px;/*上边框外间距*/
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
在页面添加了6个不同的层（div），并设置其基本样式，在网页布局中可以通过使用属性选择器实现样式的改变
5.2.1.[attr]选择器
说明：表示该选择器带有[attr]命名属性的元素
该选择器主要根据属性名称确定选择的标签（元素），并对其进行设置
Eg：改变前3个div背景颜色
[id]{
background-color: tomato;
}
5.2.2.[attr=value]选择器
[id=box2]{
background-color: tomato;
} 
5.2.3.[attr~=value]选择器
[class~="cl3"]{
font-size: 16px;
color: #008000;
background-color: aliceblue;
} 
5.2.4.[attr|=value]选择器
说明：表示选择器以attr命名属性，且属性值为value或以value-为前缀开头
[class|="part"]{
font-size: 24px;
color: red;
font-weight: bolder;
}
5.2.5.[attr^=value]选择器
说明：表示选择器带有attr命名的属性，且属性值是以value开头的元素
[class^="part"]{
background-color: blueviolet;
} 
5.2.6.[attr*=value]选择器
说明：表示选择器带有attr命名的属性，且属性值包含有value的元素
[class*="part"]{
font-size: 30px;
}
5.2.7.[attr$=value]选择器
说明：表示选择器带有attr命名的属性，且属性值是以value结尾的元素
[class$="part"]{
color: antiquewhite;
}
5.3.input标签伪类选择器
input标签伪类选择器主要针对form表单的元素进行相关的修饰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input伪类选择器</title>
<style>
.input1:focus{
background-color: red;
}
.input2:hover{
background-color: blueviolet;
}
.input3:disabled{
background-color: gainsboro;
}
</style>
</head>
<body>
<input class="input1" type="text" value="获取焦点"/>
<input class="input2" type="text" value="鼠标经过改变背景色"/>
<input class="input3" disabled="disabled" type="text" value="只读的背景样式"/>
</body>
</html>
5.4.常规伪类选择器
5.4.1针对全文匹配
- ：first-child：第一个子元素
- ：last-child：最后一个元素
- ：nth-child(n)：选中第n个元素
注：关于：nth-child(n)的特殊值（括号内的内容可以有以下几种情况）
- 第n个：n的范围n到正无穷
- even或2n：选中偶数位的元素
- add或an+1：选中奇数位的元素
注意：以child结尾的是在所有元素中选择
5.4.2.针对局部匹配
- ：first-of-type：第一个子元素
- ：last-of-type：最后一个子元素
- ：nth-of-type(n)：选中第n个元素
综合应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常规伪类选择器</title>
<style>
/* box下的第一个字元素，也就是变元素1 */
.box :first-child{
background-color: antiquewhite;
}
.box :last-child{
font-size: 20px;
}
.box p :first-child{
color: blue;
}
/* box下面的第五个元素 */
.box :nth-child(5){
color: #aaaaff;
}
/* 所有奇数元素加粗 */
.box :nth-child(odd){
font-weight: bolder;
}
/* 局部操作 */
li:first-of-type{
background-color: red;
}
li:last-of-type{
color: aquamarine;
}
/* 所有的偶数行改变背景色 */
li:nth-child(even){
background-color: aqua;
}
</style>
</head>
<body>
<ul class="box">
<p>元素1</p>
<p>元素2</p>
<li>L1</li>
<p>元素3</p>
<li>L2</li>
<li>L3</li>
<p>元素4</p>
<li>L4</li>
<p>元素5</p>
<li>L6</li>
<p>666</p>
</ul>
</body>
</html>
注意：-child与type的区别
child只看某个父元素下面的子元素，-type看的是某父元素下面的同类型子元素
Eg：child就是问班级有多少人，type就是问班级有多少女生和多少男生
5.4.3.其他的伪类选择器
- E:only-child：选择仅有一个子元素并且类型为E的元素
- E:only-of-type：选择仅有一个子元素类型为E的元素
- E:empy：没有子元素的元素，不包含任何文本节点
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
