27-CSS

最新推荐文章于 2024-04-23 16:55:33 发布

哥，你好猛

最新推荐文章于 2024-04-23 16:55:33 发布

阅读量476

点赞数

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

本文链接：https://blog.csdn.net/wy1511861159/article/details/120054509

版权

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

摘要由CSDN通过智能技术生成

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