27-CSS

最新推荐文章于 2023-06-14 09:24:09 发布

哥，你好猛

最新推荐文章于 2023-06-14 09:24:09 发布

阅读量540

点赞数

分类专栏：前端三件套+jQuery 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/wy1511861159/article/details/120054509

版权

前端三件套+jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS的使用，包括内嵌样式、内联样式表、外部样式表及其优先级，重点讲解了选择器的种类，如ID选择器、类选择器、元素选择器、组合选择器、层级选择器等，并探讨了样式的继承特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

一、什么是CSS

CSS（Cascading Style Sheet）层叠样式表

作用：HTML是实现对网页结构定义，通过CSS样式表可以实现控制HTML元素如何显示，实现对HTML元素的装饰效果。（让HTML更美观）

什么叫层叠：如果有多个样式，则多个会层叠显示，如果出现同名的样式，则会采用就近原则将离元素远的样式覆盖。

###二、怎么使用CSS

2.1、内嵌样式

在标签通过属性style的方式实现

特点：只会对当前元素起作用，同时样式和元素是强耦合，不便于代码的复用，也不便于后期的维护。在实际开发中用得很少。

<!--内联样式表
			1.直接在HTML的元素上通过style属性使用
			问题：
			1、与元素强耦合，不便于代码的复用，同时也不便于代码的维护
			
		-->
		<p style="color:red;">我是一行文字</p>

2.2、内联样式表

在head标签中，通过style标签进行样式的定义，我们可以在当前页面中直接引用即可。

<title></title>
<!--内联
在head标签中通过style标签来定义样式
优点：一定程度的提高了代码复用和代码的可维护性
缺点：只能在本页面使用，其他页面无法实现复用
-->
<style type="text/css">/*声明是css样式表*/
    p{
        color:blue;
        font-family: "微软雅黑";
    }
</style>

2.3、外部样式表

我们可以在外面定义一个css文件（以.css结尾的文件），在HTML中通过link标签进行引入。

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/01-test.css"/><!--引入外部样式表-->
</head>

2.4、几种样式表的优先级

在对同一个元素使用多种样式的时候，元素的样式默认采用就近原则–谁离元素近，就渲染谁的样式。

思考：

1、三种方式怎么用

整个站点的通用的样式设置在外部样式表，如果是本页面通过的一些样式就设置在内联样式中（style标签中），如果想对某个元素设定特有的样式，则采用内嵌（style属性指定）

2.5、定义样式表的基本语法

选择器{

样式名1：样式内容1；

样式名2：样式内容2；

}

三、选择器（重点）

什么选择器：当我们需要对某一个或者某几个元素添加样式时，我们首先需要找到某个或者某几个特定元素。那我们怎么找到特定的元素呢，在CSS中就需要通过选择器来操作。

3.1、ID选择器

定义的语法

#选择器名{

样式名：样式内容；

}

使用语法：

在元素上通过id属性进行引用如：

作用：根据指定的ID名找到对应的元素

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*定义了一个名为p1的id样式*/
        #p1{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p id="p1">我是第一行文字</p>
    <p>我是第二行文字</p>
</body>

注意：ID选择器在控制样式的时候用的比较少，在JS操作页面的时候用的比较多。（一个页面上每一个元素的ID值往往是不同的）

3.2、类选择器（使用多）

定义语法：

.类名{

样式名：样式内容；

}

使用语法：

在元素中通过元素的class属性进行引入如：

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*定义一个类选择器*/
		
			.p1{
				color: red;
			}
			.p2{
				font-size: 30px;
			}
			
			
		</style>
	</head>
	<body>
		<!--使用类选择器进行样式控制-->
		<p class="p1">我是一行文字</p>
		<p class="p2">我是第二行文字</p>
		<!--我们可以使用层叠样式-->
		<p class="p1 p2">我是第三行文字</p>
	</body>

注意：1.元素会根据类名进行搜索样式，匹配类名一致的样式。

2.我们可以在一个元素上使用多个类（id）的样式，会进行样式的层叠，如果有重复的样式则采用就近原则。

3.样式控制一般通过类进行。

3.3、元素选择器

定义规则：

元素名{

样式名：样式内容；

}

作用：根据指定的元素进行选择（匹配元素名）

<style type="text/css">
    p{
        color: red;
    }
</style>
</head>
<body>
    <p>我是P标签</p>
    <span>我是span标签</span>
    <p>我是第二个p元素</p>
    <p>我是第三个p元素</p>
</body>

3.4、组合选择器：

定义语法

选择器1，选择器2，…{

样式名：样式内容

}

作用：对选择1，选择器2…都设定了相同的样式内容

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p,span,#p2,.p3{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>我是P标签</p>
		<span>我是span标签</span>
		<p>我是第二个p元素</p>
		<p>我是第三个p元素</p>
		
		<h1 class="p3">我的一个标题</h1>
	</body>

3.5、层级选择器

后代选择器

父选择器子选择器{

}

作用：在指定的选择器下去找指定的后代（儿子，孙子…）

		<style type="text/css">
			/*span{  元素选择器：会对匹配的元素做样式的控制
				color: red;
			}*/
			p span{
				color: red;
			}
		</style>
	</head>
	<body>
		<p><span>我是第一个span</span></p>
		<span> 我是第二个span</span>
		<p><span>我是第三个span</span></p>
		<p><a><span>我是第四个span</span></a></p>
	</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qvcyYMMc-1630547549597)(https://raw.githubusercontent.com/li573925122/image/master/img/20210811120238.png)]

子选择器

定义语法：

父选择器>子选择器{

样式名：样式内容

}

作用：根据指定父选择器去找父选择器中直接儿子（父亲下第一个层级）

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*span{  元素选择器：会对匹配的元素做样式的控制
        color: red;
        }*/
        p>span{
            color: red;
        }
    </style>
</head>
<body>
    <p><span>我是第一个span</span></p>
    <span> 我是第二个span</span>
    <p><span>我是第三个span</span></p>
    <p><a><span>我是第四个span</span></a></p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VPkQmKkF-1630547549602)(https://raw.githubusercontent.com/li573925122/image/master/img/20210811121111.png)]

3.6、相邻兄弟选择器

定义语法：

选择器1+选择器2{

样式名：样式内容

}

作用：寻找与选择器1是同一层级的紧挨着的下一个兄弟选择器2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGHGN80K-1630547549603)(https://raw.githubusercontent.com/li573925122/image/master/img/20210811142630.png)]

3.7、通用选择器

定义语法：

*{

样式名：样式内容；

}

作用：*（通配符），会匹配页面所有的元素

3.8、伪类选择器

作用：可以设定一些元素的特殊状态

如：设定在鼠标悬停时候的状态

设定链接被访问后的状态

常用的伪类选择器：

名称	语法	效果
访问之前	选择器:link	链接没有被访问的样式
访问之后	选择器：visited	链接被访问后的样式
鼠标悬停	选择器：hover	鼠标悬停时的样式
鼠标下压	选择器：active	鼠标下压是的样式

注意：这个4伪类同时出现的时候，注意他们是有顺序的。

a:link{
color: red;
}

/*一旦连接被访问后被选中*/
a:visited{
color: yellow;
}

/*鼠标悬停*/
a:hover{
color: blue;
}
/*已选中的样式*/
a:active{
color: aquamarine;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlPjRiY6-1630547549607)(https://raw.githubusercontent.com/li573925122/image/master/img/20210811150358.png)]

3.8.2、伪类选择器（CSS3）

定义语法：

选择器1 选择器2：nth-child(参数)

作用：在选择器1中去根据条件找子元素，找到对应的子元素后与选择器2进行匹配，如果匹配成功则找到

1、参数传固定的值

作用：会找第n个子元素

<style type="text/css">
			.u1 li:nth-child(2){
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ul class="u1">
			<h4>日本出名的老师</h4>
			<li>苍老师</li>  //这里被选中
			<li>波多老师</li>
			<li>李老师</li>
		</ul>
		<ul class="u2">
			<h4>日本出名的运动员</h4>
			<li>水谷隼</li>
			<li>福原爱</li>
			<li>流川枫</li>
		</ul>

2.可以传表达式

奇数：add

偶数：even

作用：寻找下标为奇偶的子元素

		<style type="text/css">
			ul li:nth-child(odd){
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ul class="u1">
			<h4>日本出名的老师</h4><!--虽然是奇数，但是不满足选择器2-->
			<li>苍老师</li>
			<li>波多老师</li> <!--选中-->
			<li>李老师</li>
		</ul>
		<ul class="u2">
			<h4>日本出名的运动员</h4><!--虽然是奇数，但是不满足选择器2-->
			<li>水谷隼</li>
			<li>福原爱</li><!--选中-->
			<li>流川枫</li>
		</ul>
	</body>

3.传数学表达式

an+b

n会从1开始累加，b是偏移量

<style type="text/css">
    ul li:nth-child(2n+1){
        color: yellow;
    }
</style>
</head>
<body>
    <ul class="u1">
        <h4>日本出名的老师</h4>
        <li>苍老师</li>
        <li>波多老师</li> <!--被选中-->
        <li>李老师</li>
    </ul>
    <ul class="u2">
        <h4>日本出名的运动员</h4>
        <li>水谷隼</li>
        <li>福原爱</li><!--被选中-->
        <li>流川枫</li>
    </ul>
</body>

练习：

tr{
height: 20px;
}

table tr:nth-child(1) td{
width: 200px;
}

table tr:nth-child(odd){
background-color: red;
}

table tr:nth-child(even){
background-color: yellow;
}

3.8.3、伪类选择器

选择器1 选择器2：last-child

作用：在选择器1中找最后一个儿子，同时该儿子需要满足选择器2

选择器1：last-child

如果只写一个选择器，则会在boby找最后一个儿子，匹配选择器1

选择器1 选择器2：first-child

作用：在选择器1中找第一个儿子，同时该儿子应该满足选择器2

3.9、属性选择器

作用：为带有特定的属性的HTML元素设置样式（会选择指定属性的元素）

1、选择器[属性名]

<meta charset="UTF-8">
<title></title>
<style type="text/css">
    a[title]{
        color:red;
    }
</style>
</head>
<body>
    <a href="#" title="fristimg">我是第一个a</a><!--被选中，原因是：该标签有一个title属性-->
    <a href="#" >我是第二个a</a>
</body>

选择器[属性=“值”]

<style type="text/css">
    a[title="fristimg"]{
        color:red;
    }
</style>
</head>
<body>
    <!--第一个a被选中，原因：根据属性名及其属性的值进行匹配-->
    <a href="#" title="fristimg">我是第一个a</a>
    <a href="#" title="secondimg" >我是第二个a</a>
</body>

选择器[属性1][属性2…

作用：会匹配同时拥有属性1和属性2的元素

<style type="text/css">
    a[id][title]{
        color:red;
    }
</style>
</head>
<body>
    <!--第一个a被选中，原因是第一个a既有id属性 又有title属性-->
    <a href="#" id="" title="fristimg" >我是第一个a</a>
    <a href="#" title="fristimg">我是第二个a</a>
</body>

第四节：样式的继承

继承是指我们设置上级（父级）的CSS样式，上级（父级）及其子级（下级）都具有此样式。

注意：一般只有文本具有继承特性，比如：文字的大小，颜色，字体

<style type="text/css">
    p{
        font-family: "微软雅黑";
        font-size: larger;
        color: red;
    }
</style>
</head>
<body>
    <p>
        我是父元素
        <span>我是子元素<span>我是孙子元素</span></span>
    </p>
    <!--这个span没有样式，因为他不是p的后代元素-->
    <span>我是独立span</span>
</body>

<a href="#" id="" title="fristimg" >我是第一个a</a>
<a href="#" title="fristimg">我是第二个a</a>

```

第四节：样式的继承

继承是指我们设置上级（父级）的CSS样式，上级（父级）及其子级（下级）都具有此样式。

注意：一般只有文本具有继承特性，比如：文字的大小，颜色，字体

<style type="text/css">
    p{
        font-family: "微软雅黑";
        font-size: larger;
        color: red;
    }
</style>
</head>
<body>
    <p>
        我是父元素
        <span>我是子元素<span>我是孙子元素</span></span>
    </p>
    <!--这个span没有样式，因为他不是p的后代元素-->
    <span>我是独立span</span>
</body>