CSS简介-优快云博客

CSS，全称 Cascading Style Sheets，即层叠样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言；主要功能是将文档的内容（HTML 负责）和表现形式分离，这样可以让网页的结构和样式管理更加清晰和灵活，比如可以用 CSS 来设置文字的颜色、大小、字体，元素的位置、大小、边框、背景等样式。

特点

丰富的样式定义：提供了丰富的文档样式外观，以及设置文本和背景属性的能力，允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离等。
易于使用和修改：样式定义可以放在 HTML 元素的 style 属性、HTML 文档的 header 部分或专门的 CSS 文件中，统一存放便于管理，可以将相同样式的元素归类，修改样式时只需在样式列表中找到相应声明进行修改。
多页面应用：CSS 样式表可单独存放在一个 CSS 文件中，多个页面可引用同一个 CSS 样式表，实现多个页面风格的统一。
层叠：对一个元素多次设置同一个样式，会使用最后一次设置的属性值，后面定义的样式可重写前面的样式设置。
页面压缩：将样式声明单独放到 CSS 样式表中，可减小页面体积，减少页面加载时间，CSS 样式表的复用也更大程度地缩减了页面体积。

语法规则

CSS 样式由一系列规则组成，规则由选择器、属性和值三个部分组成，属性和值共同组成声明块。

selector {
    property: value;
    property2: value2;
}
# selector 选择器
# property 属性
# value 值

例如将所有段落文本颜色设置为红色：

p {
    color: red;
}

选择器：由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。

属性：希望给 HTML 元素设置的样式名称，由一系列关键词组成，如 color（颜色）、border（边框）、font（字体）等。
值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，如 color 属性的值可以是 red 或 #F1F1F1 等，属性和值之间用冒号分隔，每个声明的末尾用分号作为结尾，属于同一选择器的声明需要使用花括号包裹起来。

选择器

元素选择器

通过 HTML 元素名称来选择元素，如p、h1、div等，例如给所有<h1>标签内的文本设置字体大小为 24 像素：

h1 {
    font-size: 24px;
}

类选择器

通过元素的class属性来选择元素，类名前加.，例如让页面中所有 my-class 类的元素都显示黄色的背景：

.my-class {
    background-color: yellow;
}

对应的HTML为：

<div class="my-class">这是一个有特定样式的div</div>

ID选择器

通过元素的id属性来选择元素，ID 名前加#，注意，ID 在文档中必须是唯一的，例如为 HTML 中 id 为 my - id 的元素设置一条宽度为 1 像素、黑色的实线边框：

#my-id {
    border: 1px solid black;
}

对应的HTML为

<div id="my-id">这是一个有特定样式的div</div>

属性选择器

根据元素的属性或属性值来选择元素，例如页面上所有类型为文本框的输入框宽度都会被设置成 200 像素：

input[type="text"] {
    width: 200px;
}

伪类选择器

用于选择处于特定状态的元素，如hover、active、visited等：

:hover 伪类用于选择当鼠标指针悬停在元素上时的状态，当用户将鼠标移动到指定元素上时，应用 :hover 选择器中定义的样式；当鼠标移开后，样式恢复到原来的状态，常用于给可交互元素（如按钮、链接等）添加交互反馈效果，增强用户体验。
:active 伪类用于选择元素被激活时的状态，对于链接和按钮等元素，当用户按下鼠标按钮（还未释放）的瞬间，元素处于激活状态，此时会应用 :active 选择器中定义的样式，一旦鼠标按钮释放，元素的状态就会恢复。
:visited 伪类用于选择用户已经访问过的链接，浏览器会记录用户访问过的链接，并对这些链接应用 :visited 选择器中定义的样式，有助于用户区分已经访问过和未访问过的链接；出于隐私考虑，浏览器对 :visited 选择器的样式设置有一定限制，只能设置 color、background-color、border-color 等少数几个属性，并且不能改变元素的布局。

让网页上的链接在鼠标悬停时文本颜色变成绿色，这里的a是定义的类：

a:hover {
    color: green;
}

盒模型

在 CSS 中，每个元素都被看作一个矩形的盒子，这个盒子由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成：

内容区：元素实际包含的内容，如文本、图片等
内边距：内容区与边框之间的距离
边框：围绕内容区和内边距的线条
外边距：元素与其他元素之间的距离

宽度 = 内容区宽度 + 左右内边距 + 左右边框
高度 = 内容区高度 + 上下内边距 + 上下边框

布局

CSS 提供了多种布局方式来控制元素在页面中的排列：

浮动布局

使用float属性让元素向左或向右浮动，从而实现多列布局。

先定义了一个float-left类，float属性的值为left，表明应用这个类的元素会向左浮动，该元素会脱离正常的文档流，向左移动并尽可能靠上，直到碰到父元素的左边框或者其他浮动元素。

.float-left {
    float: left;
}

定位布局

使用position属性来精确控制元素的位置，有static（默认值）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位）几种值。

先定义了一个relative类：

position: relative：设置定位方式为相对定位，即相对元素在文档流中正常位置进行定位
top: 20px：将元素相对于其正常位置在垂直方向（从上往下）偏移 20 像素
left: 20px：将元素相对于其正常位置在水平方向（从左往右）偏移 20 像素

.relative {
    position: relative;
    top: 20px;
    left: 20px;
}

Flexbox 布局

弹性盒子布局，是一种一维布局模型，用于为盒状模型提供最大的灵活性。

先定义了一个flex-container类：

display: flex：将选中元素的布局模式设置为弹性布局（Flexbox），开启弹性布局后，该元素的子元素会成为弹性项（flex items），并且可以使用一系列弹性布局相关的属性来控制它们的排列方式。
justify-content: space-between;：这个属性是在弹性布局中用来定义主轴（默认是水平方向）上弹性项的对齐方式，space-between 表示弹性项会均匀分布在主轴上，两端的弹性项会与容器的边缘对齐，并且弹性项之间的间距是相等的。

.flex-container {
    display: flex;
    justify-content: space-between;
}

响应式设计

响应式设计允许网页在不同的设备和屏幕尺寸上都能有良好的显示效果，可以使用媒体查询（Media Queries）来根据设备的屏幕宽度等条件应用不同的 CSS 样式。

@media (max-width: 768px)：这是一个媒体查询，作用是当浏览器的视口宽度（viewport width）最大为 768 像素时，样式规则才生效，即在小屏幕设备上触发这些样式。
body：这是 HTML 的主体元素选择器，这里选中了页面的整个主体部分。
font-size: 14px;：这是设置字体大小的样式属性，在这里表示当满足上面媒体查询条件（视口宽度最大为 768 像素）时，页面主体内的文字字体大小会被设置为 14 像素。

这段代码的功能是在屏幕宽度不超过 768 像素的设备上，将页面主体的字体大小设置为 14 像素：

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

动画和过渡

CSS 可以创建动画和过渡效果，增强用户体验。

过渡（Transition）：用于在两个状态之间平滑过渡，通过指定过渡的属性、过渡时间等实现：

button {：这是一个 CSS 选择器，选中了 HTML 页面中的所有<button>元素，即接下来的样式规则会应用到所有按钮上。
background-color: blue：为选中的<button>元素设置初始的背景颜色为蓝色，即页面上的按钮一开始背景是蓝色的。
transition: background-color 0.3s：设置了一个过渡效果，表示当按钮的background - color（背景颜色）属性发生变化时，过渡时间为 0.3 秒，即背景颜色变化会有一个平滑的渐变过程，不是瞬间改变。
button:hover：一个伪类选择器，表明当鼠标悬停在<button>元素上时，会选中该按钮。
background-color: red：当鼠标悬停在按钮上时，将按钮的背景颜色设置为红色，结合前面的过渡效果，当鼠标移到按钮上，按钮背景颜色会在 0.3 秒内从蓝色平滑过渡到红色。

button {
    background-color: blue;
    transition: background-color 0.3s;
}
button:hover {
    background-color: red;
}

动画（Animation）：使用@keyframes规则定义动画，然后通过animation属性应用动画。

@keyframes my-animation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);
    }
}
.box {
    animation: my-animation 2s infinite;
}

@keyframes my-animation：定义一个名为 my-animation 的关键帧动画，关键帧动画允许定义动画在不同时间点的状态。
from { transform: translateX(0); }：from 表示动画的起始状态，这里设置元素的 transform 属性，使其水平方向（translateX）的位移为 0，即元素在初始位置。
to { transform: translateX(200px); }：to 表示动画的结束状态，这里设置元素的 transform 属性，使其水平方向（translateX）的位移为 200 像素，也就是元素从初始位置向右移动 200 像素。
.box { animation: my-animation 2s infinite; }：这里选择了一个类名为 box 的元素，然后为该元素应用动画，animation 属性的值依次为：动画名称 my-animation，动画持续时间 2s（2 秒），infinite 表示动画无限循环播放；类名为 box 的元素会以 2 秒的时长无限循环播放名为 my-animation 的动画，表现为该元素从初始位置开始，在 2 秒内水平向右移动 200 像素，然后回到初始位置，再重复这个过程。

引入方式

在 HTML 文档中引入 CSS 有三种常见方式。

内联样式

直接在 HTML 元素的style属性中设置样式：

<p style="color: red;">这是一个红色文本的段落</p>

内部样式表

在 HTML 文档的<head>标签中使用<style>标签定义 CSS 样式：

<!DOCTYPE html>：声明文档类型为 HTML5，让浏览器知道该文档遵循的标准。
<html lang="en">：创建 HTML 根元素，lang="en" 表示文档语言为英语（这里即便内容是中文，也不影响这个声明，主要是一种国际化规范表示）。
<head>：头部元素，用于包含文档的元数据，比如字符编码、页面标题、样式等。
<meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，确保能正确显示各种字符。
<title>内部样式表示例</title>：设置网页的标题，在浏览器标签页中会显示此标题。
<style>：定义内部样式表，这里面的样式规则会应用到当前文档。
p { color: blue; }：选择器 p 选中所有的段落元素，声明 color: blue 让这些段落元素里的文本颜色显示为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色文本的段落</p>
</body>
</html>

外部样式表

将 CSS 代码保存为一个独立的.css文件，在 HTML 文档的<head>标签中使用<link>标签引入。

<link rel="stylesheet" href="styles.css">：将名为styles.css的外部样式表链接到 HTML 文档，使页面可以应用该样式表中的样式。
- rel="stylesheet" 表明链接的资源是一个样式表，也就是告诉浏览器这个链接的文件用于为 HTML 页面提供样式。
- href="styles.css" 这里的 href 属性指定了样式表文件的路径，styles.css 是具体的样式表文件名，浏览器会根据这个路径去查找并加载对应的样式表文件，然后将其中定义的样式应用到 HTML 页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是应用了外部样式表的段落</p>
</body>
</html>

styles.css文件内容如下：