CSS从入门到精通：语法与函数的奇妙之旅

CSS 基础入门

---

CSS，即层叠样式表（Cascading Style Sheets） ，是一种专门用来为结构化文档（如 HTML 文档或 XML 应用）添加样式的计算机语言。它就像是网页的化妆师，负责定义网页中元素的显示方式，包括字体、颜色、间距、布局等各个方面 ，让原本单调的网页变得丰富多彩、美观且易于阅读。

CSS 的主要作用在于控制网页的样式和布局，实现内容与表现的分离。在没有 CSS 之前，网页的样式设置直接写在 HTML 代码中，这使得代码臃肿且难以维护。例如，若想修改整个网站所有段落的字体，在没有 CSS 时，需要逐个修改每个 HTML 页面中的段落标签；而使用 CSS 后，只需在一个 CSS 文件中修改相关样式，所有引用该样式的段落都会自动更新，大大提高了开发和维护的效率。

CSS 具有诸多优势，它能够极大地丰富网页的样式定义，允许为任何元素创建边框，设置元素边框与其他元素间的距离，以及元素边框与元素内容间的距离，还能随意改变文本的大小写方式、修饰方式以及实现各种页面效果，如渐变、阴影等。另外，CSS 样式的定义位置十分灵活，可以将样式定义在 HTML 元素的 style 属性中（行内样式），也可以定义在 HTML 文档的 header 部分（内部样式），还能将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用（外部样式） ，方便开发者根据实际需求选择最合适的方式。

引入 CSS 的三种方式

在实际应用中，我们可以通过以下三种常见方式将 CSS 引入到 HTML 文档中，每种方式都有其独特的特点和适用场景。

（一）内联样式

内联样式是最为直接的一种方式，它直接在 HTML 元素的 style 属性中定义 CSS 样式。例如，我们想要将一个段落的文本颜色设置为红色，字体大小设置为 16 像素，可以这样写：

这种方式的优点是简单直接，优先级最高，能够快速对单个元素进行样式调整，适用于一些临时的、特殊的样式设置 。但它也存在明显的缺点，代码的可维护性差，当多个元素需要相同的样式时，会产生大量重复代码，使 HTML 代码变得冗长且难以管理，也不利于样式的复用和整体维护，因此不建议大量使用。

（二）内部样式表

内部样式表是在 HTML 文档的部分使用标签来定义 CSS 样式。比如，我们要为整个页面设置背景颜色为淡蓝色，所有标题的颜色为深蓝色，可以这样实现：

这种方式适用于单个 HTML 页面的样式设置，它将样式集中在一个地方，相较于内联样式，一定程度上提高了代码的可维护性，方便对页面内的样式进行统一管理 。不过，由于样式仅针对当前页面有效，当多个页面需要相同样式时，无法实现样式的复用，会增加代码量。所以，它更适合小型项目或单页应用。

（三）外部样式表

外部样式表是将 CSS 代码写在一个单独的.css 文件中，然后在 HTML 文档的部分通过标签引入该文件。假设我们有一个名为 styles.css 的 CSS 文件，其中定义了一些通用的样式：  

在 HTML 文件中引入该样式表的代码如下：  

这种方式最大的优势在于可维护性和可复用性高，一个 CSS 文件可以被多个 HTML 页面引用，当需要修改样式时，只需修改一个 CSS 文件，所有引用该文件的页面样式都会随之更新，非常适合大中型项目中对样式的集中管理和维护。此外，浏览器还可以缓存外部样式表文件，提高页面的加载效率 ，减少页面加载时间，优化用户体验。

CSS 选择器

CSS 选择器是 CSS 中极为重要的部分，它就像是一把精准的 “钥匙”，用于选取 HTML 文档中的元素，以便对这些元素应用特定的样式规则 。通过选择器，我们能够精确地控制网页中各个元素的显示效果，无论是一个段落的字体颜色，还是一个按钮的背景样式，都能通过合适的选择器轻松实现。接下来，我们将详细介绍几种常见的 CSS 选择器。

（一）元素选择器

元素选择器是最基础的选择器，它根据 HTML 元素的标签名称来选择元素。比如，想要将页面中所有的段落元素（<p>）的文本颜色设置为蓝色，就可以使用以下代码：

在这个例子中，p就是元素选择器，它选中了 HTML 文档中所有的<p>元素，并将它们的文本颜色设置为蓝色。这种选择器简单直接，适用于对某一类元素进行统一的样式设置 ，比如统一设置所有标题元素（<h1> - <h6>）的字体大小和颜色，或者统一设置所有列表项元素（<li>）的样式等。

（二）类选择器

类选择器通过元素的 class 属性来选择多个元素，它以英文句点（.）开头，后面紧跟类名。例如，假设有一个类名为highlight，我们希望将所有具有这个类名的元素的背景颜色设置为黄色，可以这样写：  

在 HTML 中，只要给元素添加class="highlight"属性，这些元素就会应用上述样式，比如：  

类名的命名需要遵循一定规则，它可以由字母、数字、下划线、连字符组成，但不能以数字开头 。良好的类名命名应该具有描述性，能够清晰地表达该类所代表的样式或功能，这样有助于提高代码的可读性和可维护性。类选择器的优势在于它的复用性高 ，可以将相同的样式应用到多个不同类型的元素上，大大提高了样式设置的效率。

（三）ID 选择器

ID 选择器通过元素的 id 属性来选择单个元素，它以井号（#）开头，后面紧跟 ID 名。例如，要为一个 id 为main-content的元素设置特定的样式，如设置其宽度为 800 像素，背景颜色为淡灰色，可以使用以下代码：  

在 HTML 中，对应的元素代码为：  

ID 在一个 HTML 文档中具有唯一性，这意味着每个 id 在页面中只能出现一次，这使得 ID 选择器能够精准地定位到特定的单个元素 。它常用于选择页面中独一无二的元素，如页面的导航栏、主要内容区域、页脚等，方便对这些重要的、独特的元素进行个性化的样式设置 。在 JavaScript 操作 DOM 时，也经常利用 ID 的唯一性来快速获取和操作特定元素。

（四）属性选择器

属性选择器允许根据元素的属性及其属性值来选择元素，它为我们提供了更灵活的选择方式，有多种形式。比如，想要选择所有带有title属性的<a>标签，并将它们的文本颜色设置为绿色，可以使用：  

如果要选择href属性值为https://www.example.com的<a>标签，代码如下：  

此外，还有其他一些形式，如[att^=value]表示选择属性att的值以value开头的元素；[att$=value]表示选择属性att的值以value结尾的元素；[att*=value]表示选择属性att的值包含子串value的元素 。例如，选择class属性值包含active的元素，并设置其背景颜色为浅蓝色：  

属性选择器在实际应用中非常广泛，比如在处理表单元素时，可以根据元素的type属性来设置不同的样式；在处理图片时，可以根据alt属性来为特定的图片添加样式等 ，能够满足各种复杂的样式需求。

CSS 基本属性

（一）文本属性

文本属性用于控制文本的外观，是 CSS 中非常基础且常用的部分，通过这些属性可以轻松改变文本的字体、颜色、对齐方式等，让网页文本呈现出多样化的效果，增强页面的可读性和美观性。

font-family用于指定文本的字体系列 ，取值可以是系统自带字体，如Arial、Times New Roman、微软雅黑、宋体等，也可以通过@font-face规则引入自定义字体 。当指定多个字体时，浏览器会按照顺序依次查找并使用可用字体，起到备用字体的作用，例如：  

上述代码将页面主体的字体设置为Arial，如果用户计算机上没有安装Arial字体，则会尝试使用系统默认的无衬线字体（sans-serif） 。

color属性用于设置文本的颜色，取值方式丰富多样，可以是颜色名称，如red（红色）、blue（蓝色）；也可以是十六进制值，如#FF0000表示红色，#0000FF表示蓝色；还可以使用 RGB 值，如rgb(255, 0, 0)同样表示红色 ，以及 HSL 值等 。比如，将段落文本颜色设置为绿色：  

text-align用于设置文本的水平对齐方式 ，取值有left（左对齐，默认值）、right（右对齐）、center（居中对齐）、justify（两端对齐）。在一些宣传海报页面中，标题文字通常会居中对齐以吸引注意力，正文内容可能采用两端对齐使文本看起来更加整齐规范 。例如，将段落文本居中对齐：

（二）段落属性

段落属性主要用于控制元素的空间和边界，它们在网页布局中起着关键作用，能够调整元素之间的距离、元素内部内容与边框的距离以及元素边框的样式，从而使页面布局更加合理、美观。

margin属性定义元素周围的外边距，用于控制元素与其他元素之间的距离，通过使用单独的属性margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距） ，可以对上、右、下、左的外边距进行单独设置；也可以使用简写的外边距属性margin同时改变所有的外边距 。例如：  

padding属性定义元素的内边距，即元素内容与元素边框之间的距离，同样有单独属性padding-top、padding-right、padding-bottom、padding-left和简写属性padding 。例如，为一个div元素设置内边距：

上述代码会使div元素内部的内容距离边框在上下左右四个方向均为 15 像素，内边距区域的背景颜色与元素本身的背景颜色一致。

border属性用于设置元素的边框，它是一个复合属性，可以同时设置边框的宽度、样式和颜色 。例如：  

其中，边框样式有多种取值，如solid（实线）、dotted（虚线）、dashed（破折线）、double（双实线）等 ，开发者可以根据实际需求选择合适的样式来美化元素边框。

（三）布局属性

布局属性是 CSS 中用于控制网页布局的重要属性，它们决定了网页中各个元素的位置、大小以及排列方式，对于创建结构清晰、美观且适应不同屏幕尺寸的网页起着至关重要的作用 。

width和height属性分别用于设置元素的宽度和高度 ，取值可以是固定的长度值，如像素（px），也可以是相对于父元素的百分比（%），还可以使用一些特殊值如auto（自动，让浏览器根据内容自动计算宽度或高度） 。例如，将一个div元素的宽度设置为 500 像素，高度设置为 300 像素：  

如果希望div元素的宽度占其父元素宽度的 80%，则可以这样设置：  

float属性用于实现元素的浮动效果，使元素脱离正常文档流并沿父元素边缘移动，取值有left（向左浮动）、right（向右浮动）、none（不浮动，默认值） 。在常见的网页布局中，经常利用浮动来实现多栏布局，比如一个简单的两栏布局，将左侧栏向左浮动，右侧栏向右浮动：  

不过，浮动元素可能会导致父元素高度塌陷等问题，需要通过一些方法来解决，如使用clear属性清除浮动，或者使用clearfix技巧 。

position属性用于指定元素的定位方式，取值包括static（静态定位，默认值，元素按照正常文档流排列）、relative（相对定位，相对于元素自身在正常文档流中的位置进行定位）、absolute（绝对定位，相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位）、fixed（固定定位，相对于浏览器窗口进行定位，元素位置不会随页面滚动而改变） 。例如，将一个导航栏固定在页面顶部：  

在实际应用中，position属性常常与top、right、bottom、left等属性结合使用，以精确控制元素的位置 。

CSS 常见函数表达大全

（一）attr () 函数

attr()函数用于选择元素的属性值，在实际应用中，它常常与content属性搭配使用 ，为网页添加一些额外的信息或装饰。比如，在 HTML 中有如下链接元素：  

通过attr()函数，我们可以在链接后面显示出链接的href属性值，代码如下：

这样，在页面上显示的链接就会变成 “访问示例网站 (https://www.example.com)” ，方便用户了解链接的目标地址。再比如，我们可以利用attr()函数为图片添加图片描述信息。假设 HTML 中有这样的图片元素：  

通过 CSS 设置：  

在页面上，图片下方就会显示出 “图片描述：美丽的风景” ，为用户提供更多关于图片的信息，增强了页面的可读性和可访问性。

（二）calc () 函数

calc()函数是 CSS 中用于动态计算长度值的强大工具，它可以让我们在设置元素的长度属性时进行数学运算 ，为网页布局提供了更高的灵活性。calc()函数支持+（加）、-（减）、*（乘）、/（除）这几种运算符 ，在使用时，运算符前后都需要保留一个空格，这是一个很容易被忽略的细节 。它可以用于任何长度值的计算，无论是像素（px）、百分比（%）还是其他长度单位，并且遵循标准的数学运算优先级规则，先乘除后加减 。

假设我们有一个div元素，希望它的宽度始终是其父元素宽度的 80% 减去 50 像素 ，就可以使用calc()函数来实现：

在响应式布局中，calc()函数也非常实用 。比如，当页面宽度小于 600 像素时，希望导航栏的高度变为原来的高度加上 10 像素 ，可以这样写：

这里的original-height可以是之前定义好的导航栏原始高度的变量或者具体数值 ，通过calc()函数实现了根据不同屏幕尺寸动态调整元素的尺寸，使页面在各种设备上都能保持良好的布局和显示效果 。

（三）linear - gradient () 函数

linear-gradient()函数用于创建一个线性渐变的 “图像” ，它能够让我们在网页中实现平滑的颜色过渡效果，为页面增添丰富的视觉层次感 。其语法为background: linear-gradient(direction, color-stop1, color-stop2, ...) 。其中，direction用于指定渐变的方向或者角度 ，如果不设置，默认是从上到下渐变；color-stop1、color-stop2等用于指定渐变的起止颜色 ，可以设置多个颜色，实现多色渐变效果 。

例如，要创建一个从左到右，颜色从红色过渡到蓝色的线性渐变背景 ，代码如下：

如果想要创建一个具有多种颜色过渡，角度为 45 度的渐变效果 ，可以这样写：  

在实际应用中，linear-gradient()函数常用于创建独特的背景效果 ，比如在一个产品展示页面中，为产品卡片添加一个从浅灰色到深灰色的线性渐变背景 ，使其看起来更有立体感和质感；也可以用于创建按钮的渐变色效果 ，当鼠标悬停在按钮上时，通过渐变效果突出按钮的交互状态 ，吸引用户的注意力 。

（四）radial - gradient () 函数

radial-gradient()函数用于创建径向渐变图像 ，与线性渐变不同，它的渐变是从一个中心点开始，颜色向外扩散 ，给人一种聚焦的视觉效果 。语法为background: radial-gradient(shape size at position, color-stop1, color-stop2, ...) 。shape用于定义渐变的形状 ，可以是circle（圆形）或ellipse（椭圆形） ，默认为椭圆形；size指定渐变的大小 ，可以是具体的尺寸（如50px） ，也可以是关键词（如closest-side、farthest-side等） ；position定义渐变中心点的位置 ；color-stop1、color-stop2等指定渐变的颜色停止点 。

例如，创建一个从中心到边缘的圆形渐变，颜色从黄色过渡到红色 ，代码如下：  

若要创建一个指定大小和位置的椭圆形渐变 ，可以这样设置：  

这表示创建一个水平半径为 50% ，垂直半径为 30% ，中心点位于水平 70% 、垂直 30% 位置的椭圆形渐变，颜色从绿色过渡到蓝色 。径向渐变常用于模拟光源效果 ，比如在一个图标设计中，使用径向渐变来创建一个类似光晕的效果 ，使图标更加突出和生动；在一些网页背景设计中，也可以利用径向渐变营造出独特的视觉氛围 。

（五）repeating - linear - gradient () 函数

repeating-linear-gradient()函数用于创建重复的线性渐变图像 ，它基于linear-gradient()函数，在指定的方向上重复渐变模式 ，直到填满整个元素的背景区域 。语法为background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...) 。angle定义渐变的角度方向 ，从 0deg 到 360deg，默认为 180deg；side-or-corner指定线性渐变的起始位置 ，由两个关键字组成，第一个指定水平位置（left或right） ，第二个指定垂直位置（top或bottom） ，顺序随意；color-stop1、color-stop2等指定渐变的起止颜色 ，可以包含颜色值和停止位置（使用百分比指定） 。

比如，要创建一个从上到下，颜色从红色到黄色，每 20 像素重复一次的渐变效果 ，代码如下：

在实际应用中，repeating-linear-gradient()函数常用于创建背景图案 ，如条纹、格子等 。例如，创建一个斜线条纹背景：  

这会使页面背景呈现出从左上到右下，黑色和白色相间，条纹宽度为 10px 和 20px 交替的斜线条纹效果 ，为页面增添独特的视觉风格 。在设计一些具有复古风格或简约风格的网页时，这种重复线性渐变的背景图案能够很好地营造出相应的氛围 。

总结与实践建议

通过上述内容，我们对 CSS 的入门知识和常见函数有了较为全面的了解 。CSS 基础部分涵盖了引入方式、选择器以及基本属性等内容，这些是构建网页样式的基石，就如同搭建房屋时的基础框架和建筑材料，只有扎实掌握，才能构建出稳固的网页结构 。而常见的 CSS 函数，如attr()、calc()、linear - gradient()等，为我们的网页设计增添了更多的动态性和创造性，它们像是装修房屋时的各种装饰材料和独特设计元素，让网页更加生动和吸引人 。

对于初学者来说，实践是巩固所学知识的关键 。建议大家通过一些简单的实践项目来加深对 CSS 的理解和运用能力 。比如，可以尝试制作一个简单的网页布局 ，在这个过程中，运用不同的选择器来选取元素并设置样式，使用文本属性和段落属性来美化文本和调整元素间距，利用布局属性来设计页面的整体结构，还可以运用各种 CSS 函数来实现一些独特的效果 。通过实际操作，能够更深刻地体会到 CSS 的强大功能以及各个属性和函数的具体应用场景 。同时，在实践中遇到问题时，不要轻易放弃，要积极查阅资料、参考优秀的代码示例，不断积累经验，逐步提升自己的 CSS 技能水平 ，从而能够创建出更加美观、功能丰富的网页 。