Post

Web CSS

Posted
By Cc 14 min read

CSS 简介

什么是

CSS (Cascading Style Sheets) 是一种用于描述网页外观和格式的标记语言

  1. 样式控制:CSS 可以定义文本的字体、大小、颜色,图像的尺寸和位置等网页元素的样式
  2. 页面布局:CSS 可以控制网页元素的位置、大小、对齐方式等,从而实现复杂的页面布局
  3. 响应式设计:CSS 提供了媒体查询的功能,可以根据不同设备的屏幕尺寸和分辨率来自动调整页面样式,实现响应式设计
  4. 性能优化:使用 CSS 可以将样式信息与内容分离,减少 HTML 文件的大小,提高网页加载性能

CSS 与 CSS3 区别

  1. 版本更新:

    • CSS 是最初的版本,于 1996 年发布。
    • CSS3 是 CSS 规范的更新版本,于 2011 年发布。CSS3 在 CSS 的基础上引入了更多新特性。

  2. 新增功能:

    • CSS 相对来说功能较为简单和基础。
    • CSS3 添加了许多新的属性和功能,如圆角、阴影、渐变、动画、多列布局等。

  3. 浏览器支持:

    • CSS 相对来说有更好的浏览器兼容性。
    • CSS3 的新特性并非所有浏览器都完全支持,需要根据具体特性查看兼容性。

  4. 模块化设计:

    • CSS 的设计较为单一,没有模块化的概念。
    • CSS3 采用了模块化的设计方式,将规范分成了多个独立的模块。

  5. 性能和效率:

    • CSS 相对来说更加简洁和高效。
    • CSS3 提供了更丰富的样式控制手段,可以实现更复杂的视觉效果。

语法

  1. 选择器(Selector)

    • 选择器用于选择需要应用样式的 HTML 元素。
    • 常见的选择器类型包括元素选择器、类选择器、ID 选择器、属性选择器等。
    • 选择器可以单独使用,也可以组合使用,如 h1, h2, p {color: red;}

  2. 声明块(Declaration Block)

    • 声明块包含一个或多个样式声明(declaration)。
    • 每条样式声明由属性(property)和值(value)组成,用冒号(:)分隔。
    • 声明块用大括号{}包裹。

  3. 属性(Property)

    • 属性描述了元素的样式特征,如字体、颜色、大小、位置等。
    • CSS 提供了大量的属性供开发者使用。

  4. 值(Value)

    • 值是属性的具体设置,如颜色值、长度值、关键字等。
    • 值与属性之间用冒号(:)分隔。

CSS 选择器

1. 外部 CSS

外部 CSS 是将样式代码保存在单独的 CSS 文件中,然后在 HTML 文件中通过 <link> 标签引入。这种方式可以实现样式和内容的分离,利于代码的复用和维护。

1
2
3

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

2. 内部 CSS

内部 CSS 是将样式代码直接嵌入到 HTML 文件的 <style> 标签中。这种方式适用于需要快速编辑样式或只在当前页面使用的情况。

1
2
3
4
5
6
7
8

<style>
  h1 {
    color: blue;
  }
  p {
    font-size: 16px;
  }
</style>

3. 行内 CSS

行内 CSS 是将样式直接写在 HTML 元素的 style 属性中。这种方式优先级最高,但不利于代码的维护和复用。

1

<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>

4. 多个样式表

在实际开发中,我们通常会使用多个样式表,比如一个全局样式表、一个布局样式表、一个组件样式表等。这样可以更好地组织和管理样式代码。

1
2
3
4
5

<head>
  <link rel="stylesheet" href="global.css" />
  <link rel="stylesheet" href="layout.css" />
  <link rel="stylesheet" href="components.css" />
</head>

5. CSS 选择器

CSS 选择器用于选择需要应用样式的 HTML 元素。常见的选择器类型包括:

  • 元素选择器: h1, p, div
  • 类选择器: .my-class
  • ID 选择器: #my-id
  • 属性选择器: [type="text"], [href^="https://"]
  • 组合选择器: h1, h2, p, div p, div > p
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* 元素选择器 */
h1 {
  color: blue;
}

/* 类选择器 */
.my-class {
  font-size: 16px;
}

/* ID 选择器 */
#my-id {
  position: absolute;
}

/* 属性选择器 */
[type="text"] {
  border: 1px solid #ccc;
}

/* 组合选择器 */
h1,
h2,
p {
  margin-bottom: 10px;
}

函数

函数分类 描述
颜色函数 用于定义颜色和调整颜色
尺寸函数 用于计算长度值
变换函数 进行位移、缩放、旋转、倾斜等变换
渐变函数 生成线性渐变、径向渐变、锥形渐变
资源函数 用于引入外部资源
属性函数 用于获取元素属性值
变量函数 用于引用 CSS 自定义属性(变量)

颜色函数

颜色函数 描述
rgb()
rgba()		 使用红绿蓝三原色定义颜色,rgba() 还可以设置透明度
hsl()
hsla()		 使用色相、饱和度、亮度定义颜色,hsla() 还可以设置透明度
lighten()
darken()		 调整颜色的亮度
saturate()
desaturate()		 调整颜色的饱和度
opacify()
transparentize()		 调整颜色的透明度 
1
2
3
4
5

color: rgb(255, 0, 0); /* 纯红色 */
background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
color: hsl(120, 100%, 50%); /* 纯绿色 */
color: lighten(#333, 20%); /* 浅一些的灰色 */
background-color: saturate(#ccc, 50%); /* 更饱和的灰色 */

尺寸函数

尺寸函数 描述
calc() 用于计算长度值,可以混合使用不同的长度单位进行运算

calc() 函数允许我们在 CSS 中使用表达式来动态计算长度值,这为创建更灵活的布局提供了可能。

1
2
3

width: calc(100% - 20px); /* 宽度为容器宽度减去 20px */
height: calc(50vh - 2em); /* 高度为视口高度的 50% 减去 2em */
margin: calc(10% + 5px) auto; /* 上下边距为 10% 加 5px，左右边距居中 */

使用 calc() 函数,我们可以根据页面上下文动态计算元素的尺寸,而不需要提前确定固定的值。这对于响应式设计和自适应布局非常有帮助。

变换函数

变换函数 描述
translate()
translateX()
translateY()		 进行位移变换
scale()
scaleX()
scaleY()		 进行缩放变换
rotate() 进行旋转变换
skew()
skewX()
skewY()		 进行倾斜变换

这些变换函数可以用于对元素进行各种形变操作,包括位移、缩放、旋转和倾斜。

例如:

1
2
3
4
5
6
7
8
9
10
11

/* 向右平移 50px，向下平移 30px */
transform: translate(50px, 30px);

/* 沿 X 轴缩放 1.5 倍 */
transform: scaleX(1.5);

/* 顺时针旋转 45 度 */
transform: rotate(45deg);

/* 沿 X 轴倾斜 30 度 */
transform: skewX(30deg);

这些变换函数可以单独使用,也可以组合使用来实现更复杂的变换效果。变换函数通常会和 transform-origin 属性一起使用,以控制变换的基准点。

渐变函数

渐变函数 描述
linear-gradient() 创建线性渐变
radial-gradient() 创建径向渐变
conic-gradient() 创建锥形渐变

  1. linear-gradient():

    • 定义从一个点到另一个点的渐变
    • 可以指定渐变方向、起始点、终点、颜色节点等
    • 示例: background-image: linear-gradient(to right, red, yellow, green);

  2. radial-gradient():

    • 定义从一个中心点向四周辐射的渐变
    • 可以指定渐变形状、大小、起始点、颜色节点等
    • 示例: background-image: radial-gradient(circle, blue, white);

  3. conic-gradient():

    • 定义从一个中心点围绕 360 度绘制的锥形渐变
    • 可以指定渐变起始角度、颜色节点等
    • 示例: background-image: conic-gradient(from 90deg, red, yellow, green);

这些渐变函数可以用来创建丰富多彩的背景,增加网页的视觉吸引力。渐变也可以用作遮罩、边框等的样式。

资源函数

资源函数 描述
url() 用于引入外部资源,如图片、字体等
image() 用于引入可缩放的图像资源
cross-fade() 用于创建两个图像资源的交叉淡化效果
element() 用于引用页面上的其他 HTML 元素
paint() 用于引用自定义的 CSS 绘图函数

  1. url(): 这是最常用的资源引入函数,可以引入图片、字体、SVG 等各种资源文件。

    • 示例: background-image: url('image.jpg')

  2. image(): 这个函数可以引入可以根据不同环境自动调整大小的图像资源。

    • 示例: background-image: image(url('image.svg'), url('image.png'))

  3. cross-fade(): 这个函数可以创建两个图像资源之间的交叉渐变效果。

    • 示例: background-image: cross-fade(url('image1.jpg'), url('image2.jpg'), 50%)

  4. element(): 这个函数可以引用页面上的其他 HTML 元素,例如用于创建动态背景。

    • 示例: background-image: element(#my-element)

  5. paint(): 这个函数可以引用自定义的 CSS 绘图函数,用于创建复杂的图形效果。

    • 示例: background-image: paint(my-gradient, #333, #666)

属性函数

属性函数 描述
var() 用于引用自定义属性(CSS 变量)
env() 用于引用环境变量
attr() 用于引用 HTML 元素的属性值

  1. var(): 这个函数用于引用自定义 CSS 属性(也称为 CSS 变量)。

    1
2
3
4
5
6
7

    :root {
  --main-color: #333;
}

div {
  color: var(--main-color);
}

  2. env(): 这个函数用于引用操作系统或浏览器提供的环境变量。

    1
2
3

    body {
  padding-bottom: env(safe-area-inset-bottom);
}

  3. attr(): 这个函数用于引用 HTML 元素的属性值。

    1
2
3

    a::after {
  content: "(" attr(href) ")";
}

变量函数

  1. var(): 这个函数用于引用自定义 CSS 属性(也称为 CSS 变量)。

    1
2
3
4
5
6
7

    :root {
  --main-color: #333;
}

div {
  color: var(--main-color);
}

  2. env(): 这个函数用于引用操作系统或浏览器提供的环境变量。

    1
2
3

    body {
  padding-bottom: env(safe-area-inset-bottom);
}

var() 函数:

  • 允许我们定义可重复使用的值,提高 CSS 的可维护性和可扩展性
  • 变量可以定义在任何 CSS 选择器中,包括 :root 伪类
  • 变量的值可以是任何有效的 CSS 值,如颜色、长度、字体等
  • 变量可以嵌套使用,也可以在媒体查询中使用

env() 函数:

  • 允许我们访问操作系统或浏览器提供的环境变量
  • 常见的环境变量包括 safe-area-inset-*、color-scheme 等
  • 使用环境变量可以帮助我们更好地适应不同的设备和环境
Language, Web
Web CSS
This post is licensed under CC BY 4.0 by the author.