一、css代码书写方式:
1、头部:书写在style标签内。
<head>
<style>
css 代码段
</style>
</head>
2、外链:将css代码写在外部css文件内,再使用link标签链接这个css文件。
<link rel="stylesheet" href="css文件地址">
3、行内:在标签内添加style属性,将css写在style属性里。
<tagName style="css代码段"></tagName>
二、四个基本选择器
1、统配选择器:匹配页面所有元素。
*{
}
2、标签选择器:匹配页面所有标签元素,会匹配多个同名标签元素。
标签名{
}
3、类选择器(99%):匹配页面具备相应class属性的元素,会匹配多个同名class属性名元素。
.类名{
}
4、id选择器:匹配页面具备id属性的元素,具有唯一性,只匹配第一个id名元素。
#id名{
}
三、复合选择器:基本选择器的进阶用法
1、子代选择器:匹配某个元素下的子元素,不会匹配孙子元素或者更低的元素。
选择器>选择器{
}
2、后代选择器:匹配某个元素的所有后代,包括子元素和孙元素及更后代的元素。
选择器 选择器{
}
3、群组选择器:匹配多个选择器,使用同一个样式。
选择器,选择器,...{
}
4、属性选择器:匹配某些属性,例如匹配有 name='名字' 属性的元素。
[属性="值"]{
}
值得注意的是,代码存在优先权,高优先权会覆盖低优先权样式
优先权:从小到大为
统配 < 标签 < 类选择器 < id选择器 < 行内样式 < important关键字
四、伪类选择器:搭配正常选择器使用,实现部分css特效。
1、捕获元素获取焦点时做某事,通常使用于输入标签
选择器:focus{
}
2、鼠标移入时做某事,通常使用于二级菜单与各种指向效果
选择器:hover{
}
3、选择第一个元素(指使用些伪类的选择器)
选择器:first-child{
}
4、选择最后 一个元素
选择器:last-child{
}
5、捕获批量元素中的某个元素,括号内可写数字,用以捕获第几个元素,也可写2n用来捕获2的倍数的元素,以此可以衍生出2n-1匹配奇数等用法。
选择器:nth-child(){
}