CSS 教程

村雨遥原创大约 7 分钟Web 前端教程Web前端CSS

CSS 教程

共勉

不要哀求，学会争取。若是如此，终有所获。

原文

一、前言

二、概念

1. 什么是 CSS

CSS（Cascading Style Sheets），中文译为 层叠样式表。它是一种样式表语言，用于美化 HTML 文档的呈现。一般位于 <head> 头部，<title> 标签下添加 <style> 标签，CSS 代码就放在 <style> 中。

2. CSS 引入方式

CSS 引入方式有三种，分别是：

内部样式表
外部样式表
行内样式

（1）内部样式表

将样式代码写在 style 标签中。

效果预览：https://code.juejin.cn/pen/7274512428615303226

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS 教程</title>
    <style>
        p {
            color: tomato;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>CSS 教程</p>
</body> 
</html>

（2）外部样式表

将样式代码写在单独的 CSS 文件中（后缀为 .css），接着在 HTML 中通过 <link> 标签引入即可。

效果预览：https://code.juejin.cn/pen/7274578705379229759

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS 教程</title>
    <link ref="stylesheet" href="demo.css">
</head>
<body>
    <p>CSS 教程</p>
</body> 
</html>

（3）行内样式

在 HTML 基础标签中添加 style 属性，style 属性的值为 CSS 代码。

效果预览：https://code.juejin.cn/pen/7274579350450602045

<div style="color: yellow; font-size: 16px">行内样式</div>

三、选择器

1. 基础选择器

使用标签名作为选择器，然后为其设置相同的样式。比如选择器如果为 a，则代表所有链接标签都将具有 a 选择器所设置的样式。

2. 类选择器

查找标签，差异化设置标签的显示效果。

使用类选择器的步骤如下。

定义类选择器，一般是 .类名
使用类选择器，在标签中添加 class="类名"

效果预览：https://code.juejin.cn/pen/7274579791225815095

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS 教程</title>
    <style>
        .cls1 {
            color: tomato;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p class="cls1">CSS 教程</p>
</body> 
</html>

注意，一个标签中可以使用多个类选择器，只需要将各个选择器用空格隔开就好。类选择器名自定义，注意不要用纯数字或者中文，尽量用英文。

3. id 选择器

类似于类选择器，用于查找标签，差异化设置标签的显示效果。一般是配合 JavaScript 使用，很少用来设置 CSS 样式。

使用 id 选择器的步骤如下：

定义 id 选择器，一般是 #id名
使用 id 选择器，在表其中添加 id="id名"

效果预览：https://code.juejin.cn/pen/7274586257244553273

<html>

<head>
  <style>
    #demo {
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <p id="demo">
    JavaPark
  </p>
</body>

</html>

注意，同一个 id 选择器，在一个页面中通常只能使用一次。

4. 通配符选择器

用于查找页面中所有的标签，然后给它们设置相同的样式。通配符选择器为 *，无需调用浏览器就会自动查找页面中的所有标签，设置统一样式。

效果预览：https://code.juejin.cn/pen/7274588738708537403

<html>

<head>
  <style>
    * {
      color: red;
    }
  </style>
</head>

<body>
  <p>村雨遥</p>
  <a href="https://github.com/cunyu1943/JavaPark">JavaPark</a>
</body>

</html>

5. 复合选择器

由两个或多个基础选择器通过不同的方式组合而成的选择器，能够更加准确高效地选择目标元素。

可以分为后代选择器、子代选择器、并集选择器。

（1）后代选择器

用于选中某元素的后代元素，书写语法如下，其中，父选择器和子选择器之间用空格分隔。

父选择器 子选择器 { CSS 属性 }

效果预览：https://code.juejin.cn/pen/7278316108086509583

div p {
  color: aqua;
}

（2）子代选择器

用于选中某元素的子代元素，书写语法如下，其中，父选择器和子选择器之间用 > 分隔。

父选择器 > 子选择器 { CSS 属性 }

效果预览：https://code.juejin.cn/pen/7278317640706162748

div > p {
  color: blueviolet;
  text-align: center;
}

（3）并集选择器

用于选中多组标签，设置相同的样式。书写语法如下，选择器之间用 , 分隔。

选择器1, 选择器2, …, 选择器N { CSS 属性 }

效果预览：https://code.juejin.cn/pen/7278319757644005376

div,
p,
span {
  color: cadetblue;
}

四、画盒子

利用合适的选择器画盒子，常用属性如下表。

效果预览：https://code.juejin.cn/pen/7274599388759916603

属性	说明
`width`	设置盒子宽度
`height`	设置盒子高度
`background-color`	设置背景色

<!DOCTYPE html>
<html>

<head>
  <title>CSS 教程</title>
  <style>
    .div1 {
      width: 100px;
      height: 100px;
      background-color: violet;
    }

    .div2 {
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div class="div1">盒子 1</div>
  <div class="div2">盒子 2</div>
</body>

</html>

五、文字控制属性

属性	描述
`font-size`	字体大小
`font-weight`	字体粗细
`font-style`	字体倾斜
`line-height`	行高
`font-family`	字体族
`font`	字体复合属性
`text-indent`	文本缩进方式
`text-align`	文本对齐方式
`text-decoration`	文本修饰线
`color`	字体颜色

1. 字体大小

用于指定文字尺寸大小，必须带有单位，否则不会生效，常用单位为 px。

效果预览：https://code.juejin.cn/pen/7275347343271002167

p {
  font-size: 30px;
}

2. 字体粗细

用于设置字体粗细，单位既可以使用数字，也可以使用关键字。不过在正式开发时，一般都推荐使用数字的形式。

效果预览：https://code.juejin.cn/pen/7275351160939577405

.cls1{
    font-weight: 800;
}
.cls2{
    font-weight: bold;
}

3. 字体倾斜

设置文字倾斜效果。

效果预览：https://code.juejin.cn/pen/7275713613934329914

.cls1{
  /* 正常 */
    font-style: normal;
}
.cls2{
  /* 倾斜 */
    font-style: italic;
}

4. 行高

设置多行文本的间距，属性值有两种写法，一种是数字 + px 的方式，而另一种则是直接数字的方式，表示为标签 font-size 属性值的倍数。

预览效果：https://code.juejin.cn/pen/7275715629028802616

.cls1{
    line-height: 12px;
}
.cls2{
    line-height: 2;
}

5. 字体族

设置文本字体，属性值为字体名。注意，属性值可以有多个字体名，只需要用逗号隔开即可，执行顺序是从左往右依次查找。

效果预览：https://code.juejin.cn/pen/7275720518836158523

p {
  font-family: Microsoft YaHei, sans-serif;  
}

6. 复合属性

用于设置网页文字的公共样式，使用语法如下：

font: 是否倾斜 是否加粗 字号/行高 字体;

使用时，属性一定要按照顺序写，而且字号和字体必须要有，否则 font 属性将无效。

效果预览：https://code.juejin.cn/pen/7275723268651548709

p {
    font: italic 500 18px/2 楷体;
}

7. 文本缩进

设置文本首行缩进效果，属性值可以是两种形式，一种是 数字 + px，而另一种则是 数字 + em 的形式，其中 1em = 当前标签的字号大小。

效果预览：https://code.juejin.cn/pen/7276092884367966269

.cls1 {
  text-indent: 20px;
}

.cls2 {
  text-indent: 2em;
}

8. 文本对齐

控制文本水平对齐方式，主要有左对齐、居中对齐、右对齐等形式，其中默认效果是左对齐。各属性值说明如下：

属性值	说明
`left`	左对齐
`center`	居中对齐
`right`	右对齐

效果预览：https://code.juejin.cn/pen/7276094993277091852

.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}

.right-align {
  text-align: right;
}

9. 修饰线

用于给文本添加修饰线，常用的有以下几个属性值：

属性值	说明
`none`	无效果
`underline`	下划线
`line-through`	删除线
`overline`	上划线

预览地址：https://code.juejin.cn/pen/7276097261292945408

.cls1 {
  text-decoration: underline;
}

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

.cls3 { 
  text-decoration: overline;
}

.cls4 { 
  text-decoration: none;
}

10. 颜色

设置文本颜色，属性值主要有 4 种表示方式：

表示方式	属性值	说明
颜色关键字	英文单词	`green`、`blue`、`red`
`rgb`	`rgb(r, g, b)`	`r`、`g`、`b` 表示红绿蓝三原色，取值范围是：`0 -255`
`rgba`	`rgba(r, g, b, a)`	相比于 `rgb` 表示法多了一个 `a`，用于表示透明度，取值范围是：`0 - 1`
十六进制	`#RRGGBB`	如 `#000000` 表示黑色，`#FFFFFF` 表示白色

效果预览：https://code.juejin.cn/pen/7276102359267639331

.cls1 {
  color: Cyan;
}

.cls2 {
  color: rgb(143,188,143);
}

.cls3 {
  color: rgba(245,222,179, 0.5);
}

.cls4 {
  color:	#FF6347;
}

⏳ 联系

想解锁更多知识？不妨关注我的微信公众号：村雨遥（id：JavaPark）。

扫一扫，探索另一个全新的世界。

CSS 教程

# CSS 教程

# 一、前言

# 二、概念

# 1. 什么是 CSS

# 2. CSS 引入方式

# 三、选择器

# 1. 基础选择器

# 2. 类选择器

# 3. id 选择器

# 4. 通配符选择器

# 5. 复合选择器

# 四、画盒子

# 五、文字控制属性

# 1. 字体大小

# 2. 字体粗细

# 3. 字体倾斜

# 4. 行高

# 5. 字体族

# 6. 复合属性

# 7. 文本缩进

# 8. 文本对齐

# 9. 修饰线

# 10. 颜色

# ⏳ 联系

CSS 教程

一、前言

二、概念

1. 什么是 CSS

2. CSS 引入方式

三、选择器

1. 基础选择器

2. 类选择器

3. id 选择器

4. 通配符选择器

5. 复合选择器

四、画盒子

五、文字控制属性

1. 字体大小

2. 字体粗细

3. 字体倾斜

4. 行高

5. 字体族

6. 复合属性

7. 文本缩进

8. 文本对齐

9. 修饰线

10. 颜色

⏳ 联系