CSS简介_链入式-CSDN博客

本文链接：https://blog.csdn.net/qq_51088023/article/details/120962049

网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript）

CSS的简单介绍

CSS又叫层叠样式表，网页实际上是一个多层的立体结构，通过 CSS可以分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层（例如一块多层蛋糕，从上往下看）。

使用HTML标记属性对网页进行修饰的方式存在很大的局限和不足，而使用CSS可以使网页更加美观、大方，并且升级轻松维护方便，实现结构与表现的分离。

CSS的样式规则

使用CSS的具体格式如下：

选择器{属性1：属性值；属性2：属性值；属性3：属性值}

选择器+声明块：

选择器：通过选择器可以选中页面中的指定元素。

声明块：通过声明块来指定要为元素设置的样式。声明块由一个一个声明组成。声明是一个名值对结构，一个样式名对应一个样式值。

选择器用于指定CSS样式作用的HTML对象，大括号内是对该对象设置的具体格式。属性是对指定的对象设置的样式属性，如字体大小、文本颜色等。属性和属性值之间用英文的“:”连接，多个样式则使用英文的“;”进行区分。例如：

h1{font-size:20px; color:red}

PS:

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。

引入CSS样式表

1.行内式

行内式也称内联样式，在标签内部通过style属性来设置元素的样式。其基本语法格式如下：

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

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

行内式也是通过标签的属性来控制样式的，这样并没有做到结构与表现的分离，所以一般很少使用。只有在样式规则较少且只在该标签上使用一次，或者需要临时修改某个样式规则时使用。

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：

<head>
    <style type="text/css">
        选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3}
    </style>
</head>

该语法中，<style>标记一般位于<head>标记中<title>标记之后，也可以把它放在HTML文档的任何地方（在<style>标记中的代码不属于HTML区域的内容，而是CSS的内容）。但是由于浏览器是从上到下解析代码的，把CSS代码放在头部便于提前下载和解析，以免网页内容下载后没有样式修饰。同时必须设置type的属性值为"text/css"，这样浏览器才知道<style>标记内包含的是CSS代码。

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

3.链入式（最佳实践）

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

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

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

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

链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标记链接多个CSS样式表。将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

链入式是使用频率最高，也是最实用的CSS样式表。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，使得网页的前期制作和后期维护都十分方便。

PS：

CSS中的注释：/*.........*/

HTML中的注释：