CSS基本语法结构

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>