0.1书写位置
第一种方式:内联样式
直接写在开始标签里,用style属性,在属性值里写css样式
样式的语法:属性名:属性值(名值对结构)
优势:比较有针对性;
缺点:不容易修改,结构和耦合在一起
第二种方式:内部样式表
在head标签里写一个style标签,通过各种选择器选对对应元素,然后在{}里写css样式,也是名值对结构
样式的语法:如 p{}、#p1、.p2
优势:方便修改,结构和表现分明
劣势:不方便复用
第三种方式:外部样式表
在html文件外新建一个css文件,在css文件里选中对应的样式,然后通过link标签引入css文件,即可生效。
优势:方便复用
02.常用选择器
1、元素选择器
语法:标签名{} 如 h1{}
2、id选择器
语法:#属性值{} 如#a{}
3、class选择器
语法:.属性值{} 如.b{}
4、通配选择器
语法:*{}
0.3复合选择器
1、交集选择器: 语法:选择器1选择器2选择器3{}
2、并集选择器: 语法:选择器1;选择器2;选择器3{}
0.4关系选择器
1、子元素选择器: 语法:父元素>子元素{}
2、后代选择器: 语法:祖先元素 后代元素{}
3、兄弟选择器(下一个相邻的兄弟): 语法:兄+第{}
4、所有兄弟选择器: 语法:兄~弟{}
0.5属性选择器
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性以及指定属性值的元素
[属性名^=属性值]{} 选择含有指定属性以及指定属性值开头的元素
[属性名$=属性值]{} 选择含有指定属性以及指定属性值结尾的元素
[属性名*=属性值]{} 选择含有指定属性,只要含有某个属性值的元素
0.6伪类选择器
一、伪类选择器: 不存在的类,表示一种状态,就好比第一个,倒数第一个
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
n 选中所有子元素
2n/even 偶数
2n+1/od 奇数
以上的伪类是根据所有的子元素排列的
:first+of+type 第一个子元素
:last-of+type 最后一个子元素
:nth-of+type 第n个子元素
同类型中进行排列
二、:not() 否定伪类 将符合条件的元素去除
额外知识点:去掉项目符号
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
0.7、元素的伪类
1、 :link 表示未访问过的a标签的状态
a:link{
color: red;
}
2、 :visited 表示访问过的a标签的状态
a:visited{
color: orange;
3、:hover 鼠标移入后,元素的状态
a:hover{
font-size: 30px;
color: red;
}
4、:active 鼠标点击后,元素的状态
div{
width: 200px;
height: 100px;
background-color: orchid;
}
div:hover{
background-color: palegreen;
}
div:active{
width: 100px;
height: 50px;
background-color: peru;
}
0.8伪元素选择器
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 在元素开始的位置前
::after 在元素结束的位置后