文章目录

前言

最准确的网页设计思想是将网页分为三个层次：结构层、表现层、行为层。

**网页的结构层是由HTML或XHTML等标记语言创建的。 **标签，那些出现在尖括号内的单词，描述了网页内容的语义，但这些标签不包含任何有关如何显示内容的信息。 例如，p标签表达以下语义：这是一个文本段落。

网页的表示层是由 CSS 创建的。 CSS回答了如何显示相关内容的问题。

网页的行为层负责回答内容应如何对事件做出反应的问题。 这是一个由语言和 DOM 主导的领域。

**即使我们没有明确给出任何具体指示，网页的表示层和行为层始终存在。 此时，网络浏览器会将其默认样式和默认事件处理程序应用到网页的结构层。 **例如，浏览器在渲染“文本段”元素时会留下页边距。 当用户将鼠标指针悬停在元素上时，某些浏览器会弹出一个窗口，显示该元素的 title 属性的值。 提示框等

1.CSS概述

CSS（Style， Style ）是一种计算机语言，用于向结构化文档（例如 HTML 文档或 XML 应用程序）添加样式（字体、间距、颜色等）。 CSS 文件扩展名为 .css。 通过使用CSS我们可以大大提高Web开发的效率。

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

CSS可以对网页中元素位置的布局进行像素级的精确控制，支持几乎所有的字体大小和样式，并具有编辑网页对象和模型样式的能力。

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

2.CSS引入规则2.1、CSS语法

CSS 规则由两个主要部分组成：选择器[核心]和一个或多个声明[规则]：

选择器通常就是你需要改变样式的HTML元素（我们可以通过各种选择器灵性地选择页面的各种元素）。

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

() 是您要设置的样式属性（样式）。 每个属性都有一个值。 属性和值用冒号分隔。

CSS 声明始终以分号 (;) 结尾，并且声明始终包含在大括号 ({}) 中。

为了使 CSS 更具可读性，每行只能描述一个属性；

2.2. 三种CSS样式引入规则

插入样式表有以下三种方法：

2.2.1 内联样式（style）

内联样式（ style）引入规则： 样式写在标签的style属性中。 内联样式的语法规则：

<div style="color:red;font-size:20px">div标签div>

在此语法中，样式是标签的属性。 事实上，任何HTML标签都有style属性，该属性用于设置内联样式。 属性和值的书写规范与CSS样式规则相同。 内联样式只影响它所在的​​标签和嵌套在其中的子标签（部分样式）。

内联样式还通过标签属性控制样式。 内联样式失去了样式表的许多优点，因为它们混合了表示形式和内容。 请谨慎使用此方法。 仅当样式规则很少且仅在元素上使用一次，或者需要临时修改样式规则时才使用它。

2.2.2 内部样式表（）

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

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

内联样式的语法规则：

<style>
  table {
            margin: 0 auto;
            text-align: center;
            width: 700px;
            height: 200px;
        }
</style>
        

在这个语法中，

内联CSS样式只对它们所在的HTML页面有效，所以当只设计一个页面时，使用内联是一个不错的选择。但是如果你在一个网站上，不建议使用这种方法，因为它不能充分利用CSS代码重用。

2.2.3 外部样式表（）

链接是将所有样式放置在一个或多个扩展名为.css的外部样式表文件中，并通过标签将外部样式表文件链接到HTML文档。

当需要将样式应用到许多页面时，外部样式表是理想的选择。 使用外部样式表，您可以通过更改一个文件来更改整个站点的外观。 每个页面都使用标签链接到样式表。 标签位于（文档的）头部：

链式语法规则：

在这个语法中，标签需要放在head标签中，并且必须指定标签的三个属性。 如下：

注意：属性值和单位之间不要留空格（例如：“-left: 20px”）。 正确的写法是“-left: 20px”。

2.2.4 风格引入优先级

一般来说，优先级如下：

（内联样式）样式>（内部样式）样式表=（外部样式）样式表>浏览器默认样式

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

2.3 CSS注释

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

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

/*这是个注释*/
 p{
 text-align:center;
 /*这是另一个注释*/
 color:black;
 font-family:arial;
 }

★3 基本选择器 3.1 元素选择器

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

例子：

p {
 text-align: center;
 color: red;
 }

3.2 id选择器

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

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

要选择具有特定 ID 的元素，请在元素的 ID 后写入井号 (#)。

例子：

#striking {
 text-align: center;
 color: red;
 }

注意：id名称不能以数字开头。

3.3 类选择器

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

要选择具有特定类的元素，请在类名称后写入句点 (.) 字符。

例子：

.center {
 text-align: center;
 color: red;
 }

HTML 元素还可以引用多个类。 例子：

这个段落引用两个类。

3.4 通用选择器

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

例子：

* {
 margin:0;
 padding: 0;
 }

清除元素的默认内边距和外边距

3.5 组选择器

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

看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
 text-align: center;
 color: red;
 }
 h2 {
 text-align: center;
 color: red;
 }
 p {
 text-align: center;
 color: red;
 }

最好对选择器进行分组以最小化代码大小。

要将选择器分组，请用逗号分隔每个选择器。

例子：

h1, h2, p {
 text-align: center;
 color: red;
 }

4 个组合选择器

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

CSS3中有四种组合方式：

4.1 后代选择器

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

例子：

div p {
 color: yellow;
 }

4.2 子元素选择器

与后代选择器相反，子选择器只能选择元素的直接/第一级子元素。

例子：

div > p {
 color: red;
 }

4.3 相邻兄弟选择器

相邻同级选择器选择紧随另一个元素并且具有相同父元素的元素。

例子：

div + p {
color: green;
 }

5.4 后续兄弟选择器

后续同级选择器选择指定元素之后的所有相邻同级元素。

例子：

div ~ p {
 color: orange;
 }

5 属性选择器 5.1 []选择器

[] 选择器用于选择具有指定属性的元素。

例子：

a [target] {
 color: yellow;
 }

5.2 [=“值”]选择器

[="value"] 选择器选择具有指定属性和值的元素。

例子：

a [target="_blank"] { 
color: red;
 }

5.3 设置表单样式

如果您需要设置没有类或 id 的表单样式，则属性选择器会很有用：

input[name="nickname"] {
 width: 150px;
 margin-bottom: 10px;
 color: yellow;
 }
 input[type="button"] {
 width: 120px;
 margin-left: 48px;
 display: block;
 }

6 CSS的三大机制（要点） 6.1 CSS样式来源

CSS 中有三种样式来源：创建者、读者和用户代理。 不同的来源会影响样式的级联方式。 很多第一次学习CSS的朋友可能对这三个来源有些困惑。

首先，创作者（'s+style）风格应该是我们最熟悉的。 如果您是前端开发人员，那么您编写的样式称为创建者样式。

然后是用户代理风格（agent's+style）。 用户代理就是我们通常所说的浏览器（IE等）。 这些浏览器将提供一些默认样式。 例如，在IE浏览器中，一段纯html代码构成的网页中，我们会发现超链接会有蓝色的前景色，这实际上就是用户代理风格。 通过借用一些插件，我们可以很方便的查看这些默认的样式（比如Web+中的

最后，也是最容易被我们忽视的一点，读者风格（'s+style）。 所谓读者，自然就是浏览网页的用户。 有时，其中一些用户可能对网页的配色方案或字体大小不满意。 在这种情况下，他们通过浏览器提供的界面向网站添加阅读器样式。

介绍完来源，我们来谈谈如何按权重和来源排序，基于《CSS权威指南》（第三版P79）中总结的权重排序：

作者样式 > 读者样式 > 用户代理的默认样式 标有重要声明 (!) 的读者样式 > 所有样式

有些朋友一开始可能不明白第二项的含义。 其实这是CSS提供的一个很好的选择机制。 也就是说，通常情况下，创作风格的权重是最大的。 这对于开发者来说也是一个不错的选择。 人们最想看到什么，但用户拥有最终选择权，并且可以覆盖他们想要覆盖的任何样式！

6.2CSS的三大机制

CSS的三大机制是：特异性[冲突]、继承、级联。 风格的最终呈现是由级联机制决定的，但级联又与特异性和继承性相关。 换句话说，为了将该值应用于元素的某种样式，用户代理需要考虑继承、声明的特殊性以及声明本身的来源，这个过程称为级联。

6.2.1 特殊性

所谓特异性，其实就是CSS样式中声明权重的计算规则。 特异性由规则的选择器确定，然后用户代理将计算出的特异性附加到每个相应的语句。

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

选择器类型：

ID #Tag p 通用属性.class * [type="text"] 伪类：hover伪元素::首行子选择器、相邻选择器

重量计算规则：

第一类：代表内联样式，如：style=""，权重为1000。

第二级：代表ID选择器，如：#，权重为0100。

第三级：代表类、伪类和属性选择器，如.，权重为0010。

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

通配符、子选择器、相邻选择器等。例如*、>、+，权重为0000。

 <style>
 		p元素选择器 权重是 001
        p {    
            font-size: 10px ;
            color: red !important;
        }
		.p元素选择器 权重是 010
        .p {
            font-size: 15px;
            color: blue;
        }
		元素选择器 + 属性选择器 权重012
        div p[class='p'] {
            color: aqua;
        }
	·	id选择器 权重100
        #id {
            font-size: 20px;
            color: green;
        }
    </style>

<body>
    

        
p标签
    

当。。。的时候 ！ 不添加属性时，浏览器解析权重最高的id选择器如下图

添加!时，添加!的属性是最高的如下图

重要性！ :

有时，某些陈述可能非常重要，以至于比生活中的所有其他陈述更重要。 这时候就可以插入了！ 在语句的结束分号之前进行标记。

6.2.2 继承

CSS还有继承机制，即样式不仅会应用于指定样式，还会应用于其后代元素。

继承机制的注意点： 并不是所有的属性都可以被继承。 通常，大多数盒模型属性（包括边距、填充、背景和边框）无法继承。

6.2.3 堆叠

风格的渲染只有一种作用，仅靠特异性来确定权重并不能完全解决冲突。 想象一下，如果两个声明作用于同一个元素，并且具有相同的特异性，即它们具有相同的权重，那么浏览器应该使用哪个声明呢？ 这和CSS的级联机制有关。 文档中的一个元素可以同时被多个 CSS 选择器选择。 每个选择器都有一些 CSS 规则。 这就是级联；

7 文字 7.1 文字颜色

颜色是通过红、绿、蓝光的组合来显示的。 早期的计算机最多只支持 256 种颜色，但现在大多数计算机可以显示数百万种颜色。

英文颜色名称 目前所有浏览器都支持以下颜色名称。 HTML 和 CSS 颜色规范中定义了 141 种颜色名称（17 种标准颜色，另加 124 种颜色）。 提示：17 种标准颜色：黑色、蓝色、水绿色、紫红色、灰色、绿色、石灰色、栗色、海军蓝、橄榄色、橙色、紫色、红色、白色、银色、青色、黄色。

优点：方便、快捷、特定颜色更准确。

缺点：表示的颜色数量有限，不支持透明度的表示。

十六进制颜色值以十六进制表示红、绿、蓝（RGB）。 每种颜色的最低值为 0（十六进制 00），最高值为 255（十六进制 FF）。 十六进制值写为 # 号后跟三个或六个十六进制字符。 三位表示为：#RGB，转换为6位表示为：#。

优点：颜色种类多，使用方便。

缺点：不支持透明色。

RGB法：三基色配色法。 颜色由十六进制符号定义，由红、绿、蓝值（RGB）组成。 每种颜色的最小值为 0（十六进制：#00）。 最大值为 255（十六进制：#FF）。 红、绿、蓝三种颜色的组合范围为0到255，总共1600万种不同的颜色（256 x 256 x 256）。

优点：颜色种类多，使用比较方便。

缺点：不支持透明色。

每个参数（红色、绿色和蓝色）定义颜色的强度，可以是 0 到 255 之间的整数，也可以是百分比值（从 0% 到 100%）

color 属性用于设置文本的颜色。 颜色由以下值指定：

​ 颜色名称-如红色

​ 十六进制值 - 例如#white

​ RGB 值 - 例如 rgb(255, 255, 255) 白色

代码如下所示：

  		p{
            color: red;
        }
        p{
            color: #ffffff;
        }
        p{
            color:rgb(255, 255, 255)
        }

7.2 文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐、右对齐或居中对齐。

例子：

     <style>
 h1 {
            text-align: center;
        }
        p {
            text-align: left;
        }
        div {
            text-align: right;
        }
       </style>
       <body>
       
居中的标题
    
左对齐的p标签
    
右对齐的div

       

效果图如下

当文本 ext-align 属性设置为标题三，右对齐时，每行都会被拉伸，以便每行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中一样）：

例子：

p {
 text-align: justify;
 }

效果图如下：

7.3 垂直对齐

-align 属性设置元素的垂直对齐方式。

-对齐公共属性值

：默认值，元素放置在父元素的基线上。 top：将元素的顶部与行中最高元素的顶部对齐； ：将此元素放置在父元素的中间。 ：将元素的顶部与行中最低元素的顶部对齐。

属性值图

7.4 文字修饰

text- 属性用于设置或删除文本修饰。

文本-​​：无； 通常用于删除链接中的下划线：

清除链接默认下划线，代码如下

a {
 text-decoration: none;
 }

效果图如下：

其他文本值用于装饰文本：

h1 {
 text-decoration: overline;
 }
 h2 {
 text-decoration: line-through;
 }
 h3 {
 text-decoration: underline;
 }

效果图如下：

7.5 文本缩进

text- 属性指定第一行文本的缩进。

例子：

p {
 text-indent: 2em;
 }

效果如下（2em表示第一行缩进2个文字大小）：

7.6 字符间距

- 属性用于指定文本中字符之间的间距。

您可以定义两种字体之间的间距。 如果是英文，中间必须加一个空格。

7.7 文字阴影

text- 属性为文本添加阴影。

最简单的用法是仅指定水平阴影（2px）和垂直阴影（2px）

代码如下所示：

h1 {
            text-shadow: 2px 2px;
        }

渲染：

接下来，为阴影添加颜色（蓝色）：

h1 {
            text-shadow: 2px 2px blue;
        }

渲染：

然后，为阴影添加模糊效果（5px）：

h1 {
            text-shadow: 2px 2px 5px blue;
        }

渲染：

8 字体 8.1 字体选择很重要

选择正确的字体会对网站的用户体验产生巨大影响。

正确的字体可以为您的商业品牌打造强大的形象。

使用易于阅读的字体很重要。 为字体选择正确的颜色和文本大小也很重要。

8.2 字体属性

在CSS中，我们使用font-属性来指定文本的字体。

font- 属性应包含多个字体名称作为后备字体，以确保浏览器/操作系统之间的最大兼容性。 字体名称应以逗号分隔。 （字体可以是英文或中文）

.p1 {
 font-family: "Times New Roman", Times, serif;
 }
 .p2 {
 font-family: “楷体”，“黑体”，“微软雅黑”;
 }

8.3 字体样式

font-style属性主要用于指定斜体文本。

该属性可以设置为两个值：

- 文字正常显示

- 文本以斜体显示

8.5 字体大小

font-size 属性设置文本的大小。 在网页设计中，能够管理文本大小非常重要。 但是，您不应使用字体大小来使段落看起来像标题，或使标题看起来像段落。请始终使用正确的 HTML 标记，例如

用于标题且仅用于段落。 font-size值可以是绝对或相对大小。

绝对尺寸：

相对尺寸：

8.5.1 设置字体大小（以像素为单位）

使用像素设置文本大小可以让您完全控制文本大小：

h1 {
 font-size: 40px;
 }
 h2 {
 font-size: 30px;
 }
 p {
 font-size: 14px;
 }

影响：

8.5.2 设置字体大小（em）

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 大小单位。

1em 等于当前字体大小。 浏览器中的默认文本大小为 16px。 因此，1em 的默认大小为 16px。

您可以使用此公式计算从像素到 em 的大小：/16=em。

8.5.4 响应式字体大小

文本大小可以使用 vw 单位设置，这意味着“视口宽度”。

这样，文本大小将跟随浏览器窗口的大小。 当调整浏览器窗口大小时，字体大小也会缩放。

() 是浏览器窗口的大小。 1vw = 视口宽度的 1%。 如果视口宽 50 厘米，则 1vw 为 0.5 厘米。