CSS(简介、语法、创建、选择器、背景、文本、字体)

卤蛋七号
255 阅读12分钟

CSS 简介

CSS（层叠样式表，Cascading Style Sheets）  是一种用于 控制网页样式和布局 的标记语言。它与 HTML（结构）  和 JavaScript（行为）  并称为网页开发的三大核心技术。

CSS 作用

  1. 美化网页(颜色,字体,间距,背景)
  2. 控制布局(Flexbox,Grid,浮动定位等)
  3. 实现响应式设计(适配不同设备,如手机,平板,电脑)

CSS 语法

基本结构：

选择器 {
  属性: 值;
  属性: 值;
}

示例：

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
  • h1：选择器（选中 HTML 中的 <h1> 标签）
  • color: blue; ：属性 + 值（设置文字颜色为蓝色）

CSS 创建

1. 内联样式

直接在 HTML 标签中使用 style 属性：

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

适用场景：快速测试样式，但不推荐大量使用（难以维护）。

2. 内部样式表

在 HTML 的 <head> 中使用 <style> 标签：

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

适用场景：小型项目或单页应用。

3. 外部样式表

通过 <link> 引入独立的 .css 文件（最推荐的方式）：

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

styles.css文件内容：

p {
  color: red;
  font-size: 16px;
}

优点：

  • 代码复用（多个页面共享同一个样式文件）
  • 便于维护和修改

CSS 选择器

选择器类型示例作用
元素选择器p选中所有 <p> 标签
类选择器.red-text选中所有 class="red-text" 的元素
ID 选择器#header选中 id="header" 的元素（ID 唯一）
后代选择器div p选中 <div> 内部的所有 <p>
伪类选择器a:hover鼠标悬停时的 <a> 标签

示例:

/* 类选择器 */
.red-text {
  color: red;
}

/* ID 选择器 */
#main-title {
  font-size: 32px;
}

/* 伪类选择器 */
button:hover {
  background-color: black;
}

CSS Backgrounds(背景)

CSS 背景属性用于控制元素的背景样式，包括颜色、图片、渐变、定位等。

1. 背景颜色（background-color）

设置元素的背景颜色，支持颜色名称、十六进制、RGB/RGBA、HSL/HSLA 等格式。

语法:

selector {
  background-color: <color>;
}

示例

body {
    background-color: #f0f0f0;
}

.header {
    background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}

2. 背景图片（background-image）

设置元素的背景图片，可以是本地路径或 URL。

语法

selector {
  background-image: url("图片路径");
}

示例

.banner {
  background-image: url("images/banner.jpg");
}

.pattern {
  background-image: url("https://example.com/pattern.png");
}

3. 背景重复（background-repeat）

控制背景图片是否重复，默认是 repeat（平铺）。

常用值

值说明
repeat默认，水平和垂直重复
repeat-x仅水平重复
repeat-y仅垂直重复
no-repeat不重复
space均匀分布，不裁剪
round缩放图片以适应空间

示例

.bg-no-repeat {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

4. 背景定位（background-position）

调整背景图片的位置，默认是 0% 0%（左上角）。

语法

selector {
  background-position: x-axis y-axis;
}
  • x-axis：left | center | right | 百分比 | 像素值
  • y-axis：top | center | bottom | 百分比 | 像素值

示例

.logo {
  background-image: url("logo.png");
  background-position: center center; /* 居中 */
}

.icon {
  background-image: url("icon.png");
  background-position: right 10px bottom 20px; /* 右下角偏移 */
}

5. 背景大小（background-size）

控制背景图片的尺寸。

常用值

值说明
auto默认，原始尺寸
cover覆盖整个元素（可能裁剪）
contain完整显示（可能留白）
50%按百分比缩放
300px 200px指定宽高

示例

.hero {
  background-image: url("hero.jpg");
  background-size: cover; /* 完全覆盖背景 */
}

.thumbnail {
  background-image: url("thumb.png");
  background-size: 100px 100px; /* 固定大小 */
}

6. 背景固定（background-attachment）

控制背景图片是否随页面滚动。

常用值

值说明
scroll默认，背景随元素滚动
fixed背景固定（视口固定）
local背景随内容滚动

示例

.parallax {
  background-image: url("bg.jpg");
  background-attachment: fixed; /* 视差滚动效果 */
}

7. 背景渐变（background-image: linear-gradient()）

使用 CSS 渐变作为背景。

线性渐变（Linear Gradient）

.gradient-bg {
  background-image: linear-gradient(to right, red, yellow);
}
  • to right（从左到右）
  • to bottom（从上到下）
  • 45deg（45度角）

径向渐变（Radial Gradient）

.radial-bg {
  background-image: radial-gradient(circle, red, yellow, green);
}

8. 背景复合属性（background）

可以简写多个背景属性：

selector {
  background: <color> <image> <position> / <size> <repeat> <attachment>;
}

示例

selector {
  background: <color> <image> <position> / <size> <repeat> <attachment>;
}

等价于：

.box {
  background-color: #f0f0f0;
  background-image: url("bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

9. 多重背景（Multiple Backgrounds）

可以叠加多个背景：

.multi-bg {
  background:
    url("layer1.png") top left no-repeat,
    url("layer2.png") bottom right no-repeat,
    linear-gradient(to bottom, blue, pink);
}

总结

属性作用示例
background-color背景颜色background-color: #f00;
background-image背景图片background-image: url("bg.jpg");
background-repeat是否重复background-repeat: no-repeat;
background-position图片位置background-position: center;
background-size图片大小background-size: cover;
background-attachment是否固定background-attachment: fixed;
background（简写）复合写法background: #000 url("bg.jpg") center/cover;

Text(文本)

CSS 提供了丰富的属性来控制文本的显示方式，包括字体、颜色、对齐、间距、装饰等。

1. 文本颜色（color）

设置文本的颜色，支持颜色名称、十六进制、RGB/RGBA、HSL/HSLA 等格式。

语法

selector {
  color: <color>;
}

示例

h1 {
  color: #333; /* 深灰色 */
}

.highlight {
  color: rgba(255, 0, 0, 0.8); /* 半透明红色 */
}

2. 字体（font-family）

设置文本的字体，可以指定多个字体作为备选。

语法

selector {
  font-family: "字体1", "字体2", generic-family;
}

  • generic-family（通用字体族）：

    • serif（衬线体，如 Times New Roman）
    • sans-serif（无衬线体，如 Arial）
    • monospace（等宽字体，如 Courier New）
    • cursive（手写体）
    • fantasy（艺术字体）

示例

body {
  font-family: "Arial", "Helvetica", sans-serif;
}

.code {
  font-family: "Courier New", monospace;
}

3. 字体大小（font-size）

设置文本的大小，支持 px、em、rem、%、vw 等单位。

语法

selector {
  font-size: <size>;
}

示例

h1 {
  font-size: 2em; /* 相对父元素的 2 倍 */
}

p {
  font-size: 16px; /* 固定像素值 */
}

.small-text {
  font-size: 80%; /* 相对父元素的 80% */
}

4. 字体粗细（font-weight）

控制文本的粗细，支持数字或关键字。

常用值

值说明
normal默认（400）
bold加粗（700）
bolder更粗
lighter更细
100-900数字（100 最细，900 最粗）

示例

.title {
  font-weight: bold;
}

.thin-text {
  font-weight: 300;
}

5. 字体样式

控制文本的斜体效果。

常用值

值说明
normal默认（非斜体）
italic斜体
oblique倾斜（类似斜体）

示例

.emphasis {
  font-style: italic;
}

6. 文本对齐（text-align）

控制文本的水平对齐方式。

常用值

值说明
left左对齐（默认）
right右对齐
center居中
justify两端对齐

示例

a {
  text-decoration: none; /* 去除链接下划线 */
}

.strikethrough {
  text-decoration: line-through;
}

.underlined {
  text-decoration: underline wavy red; /* 红色波浪下划线 */
}

7. 文本装饰（text-decoration）

控制文本的下划线、删除线等装饰。

常用值

值说明
none无装饰（常用于去除链接下划线）
underline下划线
overline上划线
line-through删除线
underline dotted虚线/波浪线下划线

示例

a {
  text-decoration: none; /* 去除链接下划线 */
}

.strikethrough {
  text-decoration: line-through;
}

.underlined {
  text-decoration: underline wavy red; /* 红色波浪下划线 */
}

8. 文本转换（text-transform）

控制文本的大小写转换。

常用值

值说明
none默认（不转换）
uppercase全大写
lowercase全小写
capitalize每个单词首字母大写

示例

.uppercase {
  text-transform: uppercase;
}

.capitalized {
  text-transform: capitalize;
}

9. 行高（line-height）

控制行间距，影响可读性。

语法

selector {
  line-height: <value>;
}
  • 可以是 无单位数字（如 1.5，表示字体大小的 1.5 倍）
  • 也可以是 像素（px） 、百分比（%）

示例

p {
  line-height: 1.6; /* 推荐使用无单位值 */
}

.tight-spacing {
  line-height: 1.2;
}

10. 字间距（letter-spacing）

控制字符之间的间距。

示例

.wide-letters {
  letter-spacing: 2px;
}

.tight-letters {
  letter-spacing: -1px;
}

11. 词间距（word-spacing）

控制单词之间的间距。

示例

.wide-words {
  word-spacing: 10px;
}

12. 文本阴影 文本阴影（text-shadow）

为文本添加阴影效果。

语法

selector {
  text-shadow: <x-offset> <y-offset> <blur> <color>;
}

示例

.shadow-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.neon-effect {
  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
}

13. 文本溢出处理（text-overflow）

控制文本溢出容器时的显示方式。

常用值

值说明
clip直接裁剪
ellipsis显示省略号（...）

示例

.truncate {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;    /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
}

14. 设置文本方向(direction)。

指定文本方向/书写方向。

常用值

值说明
ltr默认。文本方向从左到右。
rtl文本方向从右到左。
inherit规定应该从父元素继承 direction 属性的值。

示例

div{
    direction:rtl;
    unicode-bidi: bidi-override; 
}

15. 缩进元素中文本的首行(text-indent)。

定文本块中首行文本的缩进。

常用值

值说明
length定义固定的缩进。默认值：0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。

示例

p {
    text-indent:50px;
}

16. 垂直对齐方式(vertical-align)。

设置一个元素的垂直对齐方式。

常用值

值说明
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length将元素升高或降低指定的高度，可以是负数。
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

17. 空白的处理方式(white-space)。

设置元素中空白的处理方式

常用值

值说明
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

示例

p {
    white-space:nowrap;
}

总结

属性作用示例
color文本颜色color: #333;
font-family字体font-family: "Arial", sans-serif;
font-size字体大小font-size: 16px;
font-weight字体粗细font-weight: bold;
font-style斜体font-style: italic;
text-align对齐方式text-align: center;
text-decoration文本装饰text-decoration: underline;
text-transform大小写转换text-transform: uppercase;
line-height行高line-height: 1.5;
letter-spacing字间距letter-spacing: 1px;
word-spacing词间距word-spacing: 2px;
text-shadow文本阴影text-shadow: 2px 2px 4px #000;
text-overflow溢出处理text-overflow: ellipsis;
direction设置文本方向direction:rtl;unicode-bidi: bidi-override;
text-indent定文本块中首行文本的缩进text-indent:50px;
vertical-align设置一个元素的垂直对齐方式vertical-align:text-top;
white-space设置元素中空白的处理方式 white-space:nowrap;

掌握这些文本样式属性，可以轻松实现各种美观的排版效果！ ✨

CSS Fonts(字体)详解

CSS 提供了多种属性来控制网页中的字体样式，包括字体类型、大小、粗细、风格等。以下是常用的字体相关属性及用法：

1. 字体族（font-family）

定义文本的字体，可以指定多个字体作为备选（如果第一个字体不可用，浏览器会尝试下一个）。

语法

selector {
  font-family: "字体1", "字体2", generic-family;
}

  • generic-family（通用字体族）：

    • serif（衬线体，如 Times New Roman）
    • sans-serif（无衬线体，如 Arial）
    • monospace（等宽字体，如 Courier New）
    • cursive（手写体）
    • fantasy（艺术字体）

示例

body {
  font-family: "Arial", "Helvetica", sans-serif;
}

.code {
  font-family: "Courier New", monospace;
}

2. 字体大小（font-size）

设置文本的大小，支持 px、em、rem、%、vw 等单位。

语法

selector {
  font-size: <size>;
}

常用单位

单位说明示例
px固定像素font-size: 16px;
em相对父元素字体大小font-size: 1.5em;（1.5 倍父元素字体）
rem相对根元素（<html>）字体大小font-size: 1.2rem;
%百分比font-size: 120%;
vw视口宽度百分比font-size: 2vw;（2% 视口宽度）

示例

h1 {
  font-size: 2em; /* 相对父元素的 2 倍 */
}

p {
  font-size: 16px; /* 固定像素值 */
}

.responsive-text {
  font-size: 2vw; /* 根据视口宽度调整 */
}

3. 字体粗细（font-weight）

控制文本的粗细，支持数字或关键字。

常用值

值说明
normal默认（400）
bold加粗（700）
bolder更粗
lighter更细
100-900数字（100 最细，900 最粗）

示例

.title {
  font-weight: bold;
}

.thin-text {
  font-weight: 300;
}

4. 字体样式（font-style）

控制文本的斜体效果。

常用值

值说明
normal默认（非斜体）
italic斜体
oblique倾斜（类似斜体）

示例

.emphasis {
  font-style: italic;
}

5. 字体变体（font-variant）

控制小型大写字母（Small Caps）效果。

常用值

值说明
normal默认
small-caps小型大写字母

示例

.small-caps {
  font-variant: small-caps;
}

微信截图_20250421214735.png

6. 行高（line-height）

控制行间距，影响可读性。

语法

selector {
  line-height: <value>;
}
  • 推荐使用无单位数字（如 1.5，表示字体大小的 1.5 倍）
  • 也可以是 像素（px） 、百分比（%）

示例

p {
  line-height: 1.6; /* 1.6 倍字体高度 */
}

.tight-spacing {
  line-height: 1.2;
}

7. 字体复合属性（font）

可以简写多个字体属性：

selector {
  font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>;
}

示例：

.title {
  font: italic small-caps bold 24px/1.5 "Arial", sans-serif;
}

等价于：

.title {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
  font-family: "Arial", sans-serif;
}

8. 使用自定义字体（@font-face）

加载本地或网络字体（如 Google Fonts）。

语法

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}

body {
  font-family: "MyFont", sans-serif;
}

示例（使用 Google Fonts）

<!-- 在 HTML 中引入 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

9. 字体优化（font-display）

控制自定义字体的加载和显示方式。

常用值

值说明
auto浏览器默认行为
block短暂隐藏文本，直到字体加载完成
swap先用备用字体，加载后替换
fallback短时间隐藏，超时后使用备用字体
optional根据网络情况决定是否加载

示例

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap;
}

总结

属性作用示例
font-family字体类型font-family: "Arial", sans-serif;
font-size字体大小font-size: 16px;
font-weight字体粗细font-weight: bold;
font-style斜体font-style: italic;
font-variant小型大写字母font-variant: small-caps;
line-height行高line-height: 1.5;
font（简写）复合属性font: italic bold 16px/1.5 "Arial";
@font-face自定义字体@font-face { font-family: "MyFont"; src: url(...); }

掌握这些字体属性，可以轻松实现专业、美观的网页排版！ 🎨

avatar
文章
阅读
粉丝