盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

web前端开发CSS01(css概述、css语法、三种css样式、选择器、css三大机制)_web css

作者：盐析白兔 | 2024-05-03 08:12:44

踩

web css

1、CSS概述

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于 HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

CSS 指层叠样式表 (Cascading Style Sheets)；
样式定义如何显示 HTML 元素；
样式通常存储在样式表中；
把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
外部样式表可以极大提高工作效率；
外部样式表通常存储在 CSS 文件中；
多个样式定义可层叠为一个；

2、CSS引入规则

2.1 CSS语法

CSS规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]:

在这里插入图片描述

**选择器通常是您需要改变样式的 HTML 元素(**我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性]和一个值[样式值]组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

为了让CSS可读性更强，你可以每行只描述一个属性；

2.2 三种CSS样式引入规则

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

2.2.1 内联样式

行内样式(内联样式)引入规则：样式写在标签的style属性中

行内样式的语法规则:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>
1

该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

2.2.2 内部样式表

内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表；

内嵌样式的语法规则：

<head>
     <style type="text/css">
         选择器 {
             属性1: 属性值1;
             属性2: 属性值2;
             属性3: 属性值3;
             ....
         }
     </style>
</head>
1
2
3
4
5
6
7
8
9
10

该语法中，<style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在head便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。

同时最好设置type的属性值为“text/css“，这样浏览器才知道 <style>标记包含的是CSS代码，因为<style>标记还可以包含其他代码，如JavaScript代码

内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势。

2.2.3 外部样式表

外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中。

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部；

链入式的语法规则:

<head>
     <like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>
1
2
3

该语法中，<link/>标记需要放在<head>头部标记中，并且必须指定<link/>标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

2.2.4 样式引入优先级

(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式

内部样式和外部样式都是通过选择器来选择元素的，所以他们的优先级和文件顺序、选择器优先级有关；

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.2.5 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以/*开始，以*/结束。

/* 这是注释 */
1

3、基本选择器

3.1 元素选择器

元素选择器根据元素名称来选择HTML元素。

实例：

<style>
p{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>
1
2
3
4
5
6
7

3.2 id选择器

id 选择器根据元素的 id 属性来选择特定的 HTML 元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。

实例：

<style>
#btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>
1
2
3
4
5
6
7

3.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例：

<style>
.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>
1
2
3
4
5
6
7

也可以指定只有特定的HTML元素会受类的影响。

实例：

<style>
p.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>
1
2
3
4
5
6
7

HTML元素也可以引用多个类。

实例：

<p class="btn small">引用两个类</p>
1

3.4 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

<style>
    *{
        margin:0;
        padding:0;
    }
</style>
1
2
3
4
5
6

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

实例：元素选择器p、类选择器btn和id选择器btn拥有相同的样式

<style>
p{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}

.btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}

 #btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
    
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以复用同一段代码，以减少代码重复率：

请用逗号隔开

<style>
p,.btn,#btn{
   text-align: center;
   border: 1px solid black;
   width: 400px;
}
</style>
1
2
3
4
5
6
7

4、组合选择符

CSS 组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号 > 分隔）
普通兄弟选择器（以加号 ~ 分隔）
相邻兄弟选择器（以波浪号 + 分隔）

4.1 后代选择器

后代选择器用于选取某元素的后代元素。

实例：

<style>
div p{
            color: chartreuse;
     }
</style>

<body>
    <div>
        <p>我是一级子元素和后代元素</p>
        <section>
            <p>我是后代元素</p>
        </section>
    </div>
</body>    
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果：

在这里插入图片描述

4.2 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

实例：

<style>
    div>p{
            color: pink;
        }
</style>
1
2
3
4
5

效果：

在这里插入图片描述

4.3 后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

实例：

<style>
    p~span{
            background-color: skyblue;
        }
</style>
<body>
    <div>
        <p>我是元素</p>
        <span>我是p元素的相邻兄弟及普通兄弟</span><br>
        <span>我是普通兄弟</span><br>
        <span>我是普通兄弟</span>
    </div>
    <section>
        <span>我才不是他们的兄弟</span>
    </section>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：

在这里插入图片描述

4.4 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

实例：

<style>
    p+span{
            background-color: hotpink;
        }
</style>
1
2
3
4
5

效果：

在这里插入图片描述

5、属性选择器

我们可以设置带有特定属性或属性值的HTML元素的样式。

5.1 [attribute]选择器

实例：

<style>
    a[target]{
            background-color: pink;
        }
</style>
<body>
    <a href="#" target="_parent">哈哈</a><br>
    <a href="#" target="_blank">嘿嘿</a><br>
    <a href="#" target="_self">哇哇</a>
</body>
1
2
3
4
5
6
7
8
9
10

效果：

在这里插入图片描述

5.2 [attribute=“value”]选择器

实例：

<style>
    a[target="_blank"]{
            background-color: skyblue;
        }
</style>
1
2
3
4
5

效果：

在这里插入图片描述

6、CSS三大机制

**CSS的三大机制是：特殊性[冲突]、继承、层叠。**样式最终的呈现由层叠机制决定，但层叠与特殊性、继承又有关系。换句话说,一个元素某一样式要应用那个值，用户代理需要考虑继承，考虑声明的特殊性，考虑声明本身的来源，而这个过程就叫做层叠。

6.1 特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性附加给相应的每一个声明上。

如何计算/比较选择器的特殊性：

选择器类型：

ID #id
class　　.class
标签 p
通用　　*
属性　　[type=“text”]
伪类　　：hover
伪元素　　::first-line
子选择器、相邻选择器

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值

注意：!important,权值为10000

⭐重要性！important:

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

<style>
P {
color ; red !important;
background: yellow;
}
</style>
1
2
3
4
5
6

6.2 继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。

6.3 层叠

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/528662

web前端开发CSS01(css概述、css语法、三种css样式、选择器、css三大机制)_web css

文章目录

1、CSS概述

2、CSS引入规则

2.1 CSS语法

2.2 三种CSS样式引入规则

2.2.1 内联样式

2.2.2 内部样式表

2.2.3 外部样式表

2.2.4 样式引入优先级

2.2.5 CSS注释

3、基本选择器

3.1 元素选择器

3.2 id选择器

3.3 类选择器

3.4 通用选择器

3.5 分组选择器

4、组合选择符

4.1 后代选择器

4.2 子元素选择器

4.3 后续兄弟选择器

4.4 相邻兄弟选择器

5、属性选择器

5.1 [attribute]选择器

5.2 [attribute=“value”]选择器

6、CSS三大机制

6.1 特殊性

⭐重要性！important:

6.2 继承

6.3 层叠