CSS的基本内容
1.什么是CSS?
CSS(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
2.CSS的作用是什么?
用于在HTML元素上添加外观、改变字体以及字体大小、改变背景颜色、添加图片、边框、构建网页结构等等。
3.CSS的特点是什么?
<1>.丰富的样式定义 。
<2>.易于使用和修改 。
<3>.多页面使用 。
<4>.可层叠(一个元素可具有多个css样式)
<5>.页面压缩 (尽量多次复用同样的css,减小css文件体积,提高网页性能)
4.css样式属性写法是什么?
属性:值;
CSS的样式
1.行内样式
直接在元素的行内style
属性上去写样式。
element.style {
color: red;
}
2.内嵌样式
在网页的head
/body
或者style
的内部去写样式。
3.外部样式
写在外部的css文件里,网页直接调用即可。
引入方式:
rel=“stylesheet” css解析方案 type=“text/css” 可以省略不写
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
CSS的属性
1.inherit
继承属性,继承父元素的值。
2.color
属性,字体颜色。
3.text-align
属性,文本对齐属性。
4.font
属性,字体相关属性。
①font-size
字体大小。
②font-family
设置字体。
5.border
属性,边框样式。
6.background
属性,改变背景。
7.line-height
属性,设置行高,高度和行高一致,单行文本垂直居中。
CSS选择器
1.*选择器
作用:匹配当前页面里的所有元素。
2.元素选择器
作用:根据当前元素的名称来匹配。
3.class
类名称选择器
作用:根据元素的class属性来匹配。
一个元素可能具有多个类名称。
<style>
.btn{
xxxx
}
</style>
<div class="btn">
xxxxx
</div>
4.id
名称选择器
作用:根据当前元素的id
来匹配。
一个元素只能拥有一个id,不能重名。
<style>
#a{
xxxx
}
</style>
<div id="a">
xxxxx
</div>
5.组合选择器
(1)子父关系选择器
①空格选择器
作用:匹配当前元素里的所有后代。
ul li{
xxxxx
}
②>选择器
作用:匹配当前元素的直接子元素。
#menu>li{
xxxxx
}
(2)相邻元素选择器
①+选择器
作用:匹配当前元素紧跟其后的元素。
.p1+p{
xxxx
}
②~选择器
作用:匹配当前元素之后的所有元素。
.p1~p{
xxxx
}
6.属性选择器
作用:根据元素的属性匹配元素。
ul[class]
{ 单属性
xxxxx
}
ul[class][id]
{ 多属性
xxxxx
}
属性匹配也可以根据属性值匹配:
^=
属性值以什么开头。
$=
属性值以什么结尾 。
*=
属性值包含什么。
7.分组选择器
一次写多个元素的样式,中间用逗号隔开。
button,div,ul{
xxxxxxx
}
8.嵌套选择器
多个元素共用一个类或者id
。
button.btn{
width: 100px;
}
ul.btn{
background-color: orangered;
}
CSS三大样式之间的优先级
(1)三大样式之间如果存在冲突
行内样式>内嵌样式>外部样式(行内样式>外部样式>内嵌样式) <加载css的顺序就有关>
(2)如果三大样式之间不冲突,则叠加。
注:
四个基本选择器之间的优先级:
id>class>ele>*
组合选择器里面的优先级:
同匹配方案牵扯到父级,父级的优先级高。
高样式优先级:!important
提高的比行内样式优先级还高。
CSS的伪类
1.访问之前的伪类。
a:link{
border: 1px solid red;
}
2.访问之后的伪类。
a:visited{
border: 1px solid blue;
}
3.悬停伪类。
a:hover{
border: 1px solid green;
}
4.激活伪类。
a:active{
border: 1px solid deeppink;
}
5.选择伪类。
.ckbox:checked~span{
color: red;
}
.ck:checked~span{
color: green;
}
6.表单元素标签。
input:enabled{
border: 1px solid red;
}
input:disabled{
border: 1px solid blue;
}
:enabled :disabled 可用和不可用的伪类。
7.before、after伪类。
.nav:before{
content: "123";
}
.nav:after{
content: "01233";
}
针对所有元素,给匹配元素的内容之前/后追加。