1.CSS基本语法结构
文章目录
选择器{声明1;
声明2;}
声明包括属性和值
p{
color:#F00;
font-size:14px;
}
<style>
标签
CSS代码是放在style标签中,它可以放在head中也可以放在body中 ,可以放到代码的任意位置
<style>
p{
color:green
}
</style>
2.HTML中引入CSS样式
2.1行内样式
使用style属性引入CSS样式
<p style="color:green; font-size:14px;" >直接引入</style>
2.2内部样式表
CSS代码写在style标签中
<style>
p{
color:green;
}
</style>
2.3外部样式表
2.3.1链接式
使用link标签链接
<link rel="stylesheet" href="path"/>
2.3.2导入式
使用@import导入
@import url("path")
2.4CSS基本选择器
2.4.1标签选择器
选择器直接使用HTML元素名称,用于选中页面中所有该类型的元素,并应用样式
p {
color: blue;
}
2.4.2类选择器
以.
开头,后面跟随类名,用于选中具有指定类属性的所有元素
.a {
background-color: yellow;
}
页面中任何拥有class="a"
的元素背景色都会变成黄色
2.4.3ID选择器
以#
开头,后面跟随ID名,用于精确选中具有指定ID属性的单个元素。ID应保证页面中唯一
#a {
font-weight: bold;
}
这会使得ID为a
的元素文本加粗
3.CSS的高级选择器
3.1层次选择器
3.1.1后代选择器
后代选择器也叫包含选择器,祖先元素直接或间接的包含后代元素
<style>
.a p{
color:green;
}
</style>
<div class="a">
<p>
000
</p>
<div>
<p>
111
</p>
</div>
</div>
<p>
222
</p>
此时000和111会变成绿色
3.1.2子代选择器
使用>
来选择直接子元素
<style>
ul>li{
list-style-type: none;
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
选择所有ul
元素的直接子元素li
,去除列表样式
3.1.3相邻兄弟选择器
使用+
,选择紧接在另一个元素之后的元素
<style>
h1 + p{
text-indent: 2em;
}
</style>
<h1>000</h1>
<p>111</p>
<p>222</p>
111会首行缩进2,但222不会
3.1.4通用兄弟选择器
使用~
,选择某个元素之后的所有同级元素
<style>
.a ~ li{
text-indent: 2em;
}
</style>
<ul>
<li>111</li>
<li class="a">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
333,444,555会首行缩进2
3.2结构伪类选择器
以child结尾的是在父级里从一个元素开始查找,不分类型
**:first-child
**选择作为父元素的第一个子元素的元素
**:last-child
**选择作为父元素的最后一个子元素的元素
**:nth-child(n)
**选择父元素中的第n个子元素
n 第n个 n的范围0到正无穷(全选)
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
以type结尾的是在父级里先看类型,再看位置
**:first-of-type
**第一个子元素
:last-of-type最后一个子元素
**:nth-of-type() **选择同类型子元素中的第n个元素
<style>
/*a下面的第一个元素变,也就是标题1变*/
.a :first-child{
border: 2px solid blue;
}
/*a下面的第1个子元素是p的时候变,此时无变化*/
.a p:first-child{
border: 2px solid blue;
}
.a h1:first-child{
border: 2px solid blue;
}
/*a下面的最后一个元素是p的时候变 ,此时段落4变*/
.a p:last-child{
border: 2px solid blue;
}
/*a下面的第2个元素是p的时候变,此时段落1变*/
.a p:nth-child(2){
border: 2px solid blue;
}
/*a下面的偶数元素变*/
.a :nth-child(2n){
border: 2px solid blue;
}
/* n是从0开始的数列 把n=0开始往n+3里面计算就可 */
/* n=0 n+3=3 */
/* n=1 n+3=4 */
/* n=2 n+3=5... 结果就是第3,4,5,6,7,8,9...变*/
/*a下面第二个元素以后是h1的变*/
.a h1:nth-child(n+2){
border: 2px solid red;
}
.a :first-child{
border: 2px solid red;
}
/*a下面同类型的第一个变,结果标题1和段落1变(a下面共两个类型)*/
.a :first-of-type{
border: 2px solid blue;
}
/*a下面的最后一个元素是p时变,此时段落5变*/
.a p:last-of-type{
border: 2px solid blue;
}
/*a下面的h1类型中的第二个变,此时标题2变*/
.a h1:nth-of-type(2){
border: 2px solid red;
}
</style>
<div class="a">
<h1>标题1</h1>
<p>段落1</p>
<h1>标题2</h1>
<p>段落2</p>
<p>段落3</p>
<h1>标题3</h1>
<p>段落4</p>
<h1>标题4</h1>
<p>段落5</p>
</div>
3.3属性选择器
1.某某[属性]
2.某某[属性=属性值]
3.某某[属性^=属性值]
4.某某[属性$=属性值]
5.某某[属性*=属性值]
6.某某[属性~=属性值]
7.某某[属性|=属性值]
<style>
/*某某[属性] 选择到a标签且有title属性的变 */
a[title]{
background: yellow;
}
/*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的,多一个空格都不行 */
a[lang="zh"]{
background: yellow;
}
/* id是last且有title属性且有class属性,属性值只能是links的变 */
#last[title][class="links"]{
background: yellow;
}
/*某某[属性^=属性值] a标签有class属性且属性值是li开头的 */
a[class^="li"]{
background-color: yellow;
}
/*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
a[class$="t"]{
background-color: yellow;
}
/*a标签有href属性且属性值结尾是.png的变*/
a[href$=".png"]{
background-color: green;
}
/*某某[属性*=属性值] 选择到a标签且有href属性且只要有字母b就可以 */
a[href*="b"]{
background-color: green;
}
/*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
a[class~="item"]{
background-color: green;
}
/*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
a[title|="link"]{
background-color: green;
}
</style>