1、CSS的引入
①行内样式
<p style="color:red;">设置字体颜色为红色</p>
②引入样式文件,链接式
<link rel="stylesheet" herf="ccc.css">
③嵌入式
<style>
p{
color:blue;
}
</style>
2、CSS的基本选择器
/*标签选择器*/
标签名{属性名:属性值;属性名2:属性值2;}
/*类选择器*/
.类名{属性名:属性值;属性名2:属性值2;}
/*id选择器*/
#id名{属性名:属性值;属性名2:属性值2;}
/*通配选择器*/
*{属性名:属性值;属性名2:属性值2;}
3、CSS后代子代选择器
.C1 C2 C3{
#C3是c1的后代选择器
#c2是c1的子代选择器
}
4、CSS与或选择器
/*与选择器*/
p#id{
color:red;
}
/*或选择器*/
p.c1,#i1{
color:lightpink;
}
5、CSS兄弟选择器
/*毗邻选择器即紧挨着*/
#i1 + div.c1{
color: red;
}
/*兄弟选择器*/
#i1 ~ div.c2{
color: red;
}
#i1 ~ div{
color: red;
}
<p id="i1">item0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>
</body>
</html>
6、CSS属性选择器
E[attr]#存在该属性的E元素
E[attr=value]#存在attr属性值为value的E元素
E[attr~=value]#attr属性值用空格隔开的存在value值的E元素
E[attr^=value]#attr属性值以value开头的E元素
E[attr$=value]#attr属性值以value结尾的E元素
E[attr*=value]#attr属性值包含value的E元素
/*属性选择器*/
[type="text"]{
border: 1px solid red;
}
7、伪类选择器
/*未选择过的a链接*/
a:link{
color: red;
}
/*点击过的a链接*/
a:visited{
color: coral;
}
/*鼠标悬浮时的a链接*/
a:hover{
color: blue;
}
/*活动链接*/
a:active{
color: rebeccapurple;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*父元素第一个子元素的每个元素*/
.c1 p:first-child{
color: red;
}
.c1 div:last-child{
color: red;
}
/*在每个内容之后插入内容,一般起修饰效果*/
p#i1:after{
content:"hello";
color:red;
display: block;
}
</style>
</head>
<body>
<div class="c1">
<p>item1</p>
<p>item1</p>
<div>item1</div>
<p>item1</p>
</div>
<p id="i1">p标签</p>
</body>
</html>
8、元素样式继承
子元素继承父元素层级继承。
以下是可继承的样式:
文本相关属性 | |||
---|---|---|---|
font-family | font-size | letter-spacing | line-height |
font-style | font-variant | text-align | text-indent |
font-weight | font | text-transform | word-spacing |
color | direction | ||
列表相关属性 | |||
list-style-image | list-style-position | list-style-type | list-style |
表格和其他相关属性 | |||
border-collapse | border-spacing | caption-side | empty-cells |
cursor |
9、选择器优先级
!important>行内样式>id>class>元素
同优先级按从上到下的顺序执行覆盖