CSS基础用法学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

CSS（层叠样式表）是一种用于网页布局和设计的语言，它可以改变网页的字体、颜色、间距、边框、背景等样式，从而使网页更具美感和易读性。

在学习CSS时，我们需要掌握一些基本概念，如选择器、样式表、样式规则、继承、优先级等。同时，我们还需了解一些常用的CSS属性和它们的取值，如文本属性、盒子模型属性、背景属性等。

学习CSS也要进行实践，最好是结合HTML和JavaScript来进行综合练习，这样才能更好地理解和运用CSS。为了方便实践，可以使用一些工具，如开发者工具、编辑器、预处理器等。

总之，掌握CSS是Web开发中非常重要的一环，只有在掌握了CSS之后，才能创造出优美而高效的网页设计和布局。

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。

CSS 是 Web 领域的一个突破，它为 HTML 提供了一种描述元素样式的方式，使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点： 1)丰富的样式定义

2)易于使用和修改 CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中，也可以定义在 HTML 文档 标签内的

3)多页面应用 前面说了可以将 CSS 样式单独存放在一个 .css 格式的文件中，这个文件不属于任何页面，我们可以在不同的页面引用这个 .css 格式的文件，这样就可以统一不同页面的风格。

4)层叠 层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式，后面定义的样式会覆盖前面定义的样式。 5)页面压缩 一个网页其中通常包含大量的 HTML 元素，为了实现某些效果我们往往还需要为这些元素定义样式文件，如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而将 CSS 样式定义在单独的样式文件中，把 CSS 样式与 HTML 文档分开的话就可以大大减小 HTML 文档的体积，这样浏览器加载 HTML 文档所用的时间也会减少。

CSS 样式由一系列规则组成，这些规则由 Web 浏览器解析，然后应用于 HTML 文档相应的元素上。CSS 样式规则由三个部分组成，分别是选择器、属性和值：

标签定义样式；属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 W3C 官网查看；值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。

在 CSS 的语法规则中，属性和值之间需要使用冒号:进行分隔，每个属性和值的组合可以看作一个声明，每个声明的末尾都需要使用分号;作为结尾，属于同一选择器的声明需要使用花括号{ }包裹起来。

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

p选择器能够匹配文档中所有的

标签。

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值，如下所示：

#nav选择器能够匹配文档中具有id="nav"属性的标签。

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示：

.black选择器能够匹配文档中所有具有class="black"属性的标签。

由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的

标签中，对于其它的具有class="black"属性的标签则没有影响。

另外，一个 HTML 标签中 class 属性可能不止一个，例如：

假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

当一个

标签嵌套在一个标签内部的时候，就可以将这个

标签看作是标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：

ul li a选择器仅会匹配无序列表标签的所有后代标签。

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开，如下所示：

p > strong选择器会将下面代码中第一个

标签的子标签内的文字设置为红色，但对第二个

标签中的标签则没有影响。

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示：

h1 + p选择器会匹配同一父级元素下紧邻标签并在其后的

标签。ul.task + p选择器则会匹配同一父级元素下紧邻标签并在其后的

标签，但要具有class="task"属性。

通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素，如下所示：

h1 ∼ p选择器会匹配同一父级元素下标签之后的所有

标签。

分组选择器可以将同样的样式规则应用到多个选择器中，每个选择器之间使用逗号,进行分隔，这么做可以避免定义重复的样式规则，最大程度地减少 CSS 样式表中的代码。例如，在 CSS 样式表中，不同的选择器中可能包含同样的样式规则，如下所示：

我们可以看到选择器h1、h2、h3中包含相同的样式font-weight: normal;，这时就可以先使用分组选择器为h1、h2、h3定义它们之间同样的样式规则，然后再分别定义它们之间不同的样式规则，如下所示：

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息，如下所示：

input[type=“text”]选择器会匹配所有具有type="text"属性的标签。

属性选择器中方括号[ ]内的属性信息还支持以下几种写法：

在 HTML 头部（标签内）的标签中定义 CSS 样式，使用内嵌样式表定义的 CSS 样式只能在当前网页内使用，示例代码如下：

由于内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。

内联样式就是将样式信息直接定义在 HTML 标签的 style 属性中，由于内联样式定义在标签内部，所以它只对所在的标签有效。示例代码如下：

内联样式虽然可以很方便的为 HTML 标签赋予 CSS 样式，但它的缺点也非常明显，不推荐过多使用。

外部样式表是最常见也是最推荐的引用 CSS 的方式，您只需要将 CSS 样式定义在一个 .css 格式的文件中，然后使用 HTML 的标签将这个 .css 格式的样式文件应用到 HTML 文档中。

下面通过具体的示例来演示外部样式表的使用。首先，需要定义一个 .css 格式的样式文件（例如 style.css），如下所示：

然后我们在 HTML 文档中引入这个 style.css 文件，如下所示：

您同样可以使用@import来引用外部样式表，这一点与使用标签比较相似。使用@import引用外部样式表的语法格式如下：

其中 URL 为外部样式表的存放路径。

假如还使用上面定义的 style.css 样式表，通过@import将其引用到 HTML 文档的代码如下：

使用@import引用 CSS 时有以下几点需要注意：

6种方法：

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，如下所示：

background-color

background-image

background-repeat

background-position

background-attachment

background-size

CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

font-style

font-weight

font-size

通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等，CSS 中常用的文本属性如下所示：

text-align：设置文本的水平对齐方式；

text-decoration：设置文本的装饰；

text-transform：设置文本中英文的大小写转换方式；

text-indent：设置文本的缩进方式；

line-height：设置行高；

letter-spacing：设置字符间距；

word-spacing：设置单词与单词之间的间距（对中文无效）；

text-shadow：设置文本阴影； 语法格式如下：

text-shadow: h-shadow v-shadow blur color;

vertical-align：设置文本的垂直对齐方式；

white-space：设置文本中空白的处理方式；

direction：设置文本方向。

链接有四种不同的状态，分别是 link、visited、active 和 hover，可以通过以下伪类选择器来为链接的四种状态设置不同的样式：

可以通过下面几个属性分别定义边框的样式、宽度和颜色：

border-style: border-top-style border-right-style border-bottom-style border-left-style;

除了可以使用 border-style 属性设置元素的边框样式外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式：

border-width: border-top-width border-right-width border-bottom-width border-left-width;

还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度：

border-color: border-top-color border-right-color border-bottom-color border-left-color;

-还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色：

border 属性是上面介绍的 border-width、border-style、border-color 三种属性的简写，使用 border 属性可以同时定义上述三个属性，语法格式如下：

border: border-width border-style border-color;

其中 border-width 用来设置边框的宽度；border-style 用来设置边框的样式；border-color 用来设置边框的颜色。

还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色：

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin），CSS 为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

网页中的每个元素都可以看作是如下图所示一个盒子模型：

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

下面通过一段代码演示盒子模型中的内容区：

内边距是内容区和边框之间的空间，您可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。在为盒子模型设置背景属性时，背景属性可以覆盖到内边距区域。

示例代码如下：

边框是环绕内容区和内边距的边界，您可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。 注意：在 IE 浏览器中背景属性不会覆盖到边框区域，但是在其它主流浏览器中，背景属性则可以覆盖到边框区域，当将边框设置为虚线时就可以透过虚线看到后面的背景。

示例代码如下：

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。

对于两个相邻的（水平或垂直方向 ）且都设置有外边距的盒子，它们之间的距离并不是两者外边距相加的和，而是它们之中较大的那个值。另外，您也可以将外边距的值设置为负值，当外边距的值为负时整个盒子将向反方向移动，当到达一定程度时盒子之间会产生重叠效果。

示例代码如下：

###元素的宽度和高度 当您使用 CSS 中的 width 和 height 属性设置元素的宽度和高度时，实际上设置的只是元素内容区域的宽度和高度，元素的实际宽度和高度还取决于一些其它因素：

static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。示例代码如下：

相对定位就是元素相对于自己默认的位置来进行位置上的调整，您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

运行结果如下图所示：

绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

使用绝对定位的元素会脱离原来的位置，不再占用网页上的空间。与相对定位相同，使用绝对定位的元素同样会与页面中的其它元素发声重叠，另外使用绝对定位的元素可以有外边距，并且外边距不会与其它元素的外边距发生重叠。

固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

粘性定位与前面介绍的四种定位方式不太一下，它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。 需要注意以下几点：

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于 Word 中图文混排。 还需要注意以下几点：

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性的可选值如下：

多列布局的属性，如下表所示：

column-count 属性用来设置将元素分为几列，属性的可选值如下：

column-fill 属性用来设置如何填充每个列，属性的语法格式如下：

column-gap 属性用来设置列与列之间的间隙，属性的可选值如下：

column-rule 属性是一个简写属性，它与 border 属性非常相似，用来设置列与列之间边框的宽度、样式和颜色。 column-rule 属性的语法格式如下：

column-rule: column-rule-width column-rule-style column-rule-color;

其中 column-rule-width 表示边框的宽度；column-rule-style 表示边框的样式，下表中列举了一些样式的可选值；column-rule-color 表示边框的颜色。

column-span 属性用来设置元素应该跨越多少列，属性的可选值如下：

column-width 属性用来设置每个列的宽度，属性的可选值如下：

columns 属性是一个简写属性，用来同时设置列的宽度和列的数量，语法格式如下：

columns: column-width column-count;

其中 column-width 表示每个列的宽度，column-count 则表示列的数量。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示： CSS 中提供了以下属性来实现 Flex 布局：

flex-direction flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

flex-wrap flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

flex-flow flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

flex-flow: flex-direction flex-wrap;

justify-content justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

align-items align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

align-content align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

其中 number 就是项目在容器中的位置，默认值为 0。

示例代码如下：

3) flex flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下： flex: flex-grow flex-shrink flex-basis;

参数说明如下：

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

实现响应式布局，常用的方式有以下几种：

首先，我们需要设置 meta 标签来告诉浏览器，让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放，如下所示：

在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：

CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

关于媒体查询有以下三种实现方式：

1、直接在 CSS 文件中使用，示例代码如下：

2、使用 @import 导入，示例代码如下：

3、在 link 标签中使用，示例代码如下：

示例展示：

当浏览器窗口小于 1200 像素大于 980 像素时，页面的样式如下图所示：

当浏览器窗口大于 640 像素小于 980 像素时，页面的样式如下图所示：

当浏览器窗口小于 640 像素时，页面的样式如下图所示：

CSS（层叠样式表）是一种用于网页美化和布局的语言，它可以通过控制HTML元素的显示样式，包括字体、颜色、大小、间距、背景等，从而实现网页的美化和布局。在这里，我会从以下几个方面，来给大家进行CSS学习的总结：

以上是CSS学习的大致内容，当然还有别的一些细节和技巧需要在实践中掌握。在学习CSS时，可以结合实践进行，使用浏览器开发者工具对网页布局和样式进行调试，同时多参考一些优秀的网页布局和设计范例。