Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
1.内联样式:在标签内使用style属性指定css代码
<div style="color:red;">hello css</div>
2.内部样式:在head标签内,定义style标签,style标签的标签体内容就是css代码
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3.外部样式
1. 定义css资源文件。
2. 在head标签内,定义link标签,引入外部的资源文件
a.css文件:
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
*.注意:
<style>
@import "css/a.css";
</style>
格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;
扩展选择器:
1.选择所有元素:
//语法:*{}
*{
color:red;
}
2.并集选择器:多个选择器都会改变
//语法:选择器1,选择器2{}
div,p{
color:red;
}
3.子选择器:选择器1元素下的选择器2
//语法:选择器1 选择器2{}
div p{
color:red;
}
4.父选择器:选择器2的父元素选择器1
//语法:选择器1 > 选择器2{}
div > p{
color:red;
}
5.属性选择器:选择元素名称,属性名=属性值的元素
//语法:元素名称[属性名="属性值"]{}
input[type='text']{
border: 5px solid;
}
6.伪类选择器:选择一些元素具有的状态。
//语法:元素:状态{}
//初始化的状态
a:link{
color: pink;
}
//鼠标悬浮状态
a:hover{
color: green;
}
//正在访问状态
a:active{
color: yellow;
}
//被访问过的状态
a:visited{
color: red;
}
原文:https://www.cnblogs.com/LampsAsarum/p/12288434.html