CSS 速通指南

CSS

初识 CSS

CSS（Cascading Style Sheets — 层叠样式表）是一种样式表语言，用于美化 HTML 文档

/*  CSS 语法
	选择器: {
		属性名: 属性值;
	}
*/
span {
    color: blue;
}

注意：属性名与属性值成对出现

引入 CSS

内部样式

CSS 代码放在 style 标签中，style 标签一般位于 title 标签下

外部样式

CSS 代码写在单独的 CSS文件（ xxx.css 文件 ）中 ，在 HTML 文档中 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式

CSS 代码写在标签中的，样式为 style 属性的属性值

<div style="color: blue;">盒子</div>

CSS 选择器

作用：通过选择器，选择对应的标签，设置对应的样式

说明：CSS 选择器详解可看另一篇文档

文字控制属性

字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

p {
    font-size: 30px;
}

字体样式

作用：是否倾斜

属性名: font-style

属性值

• 不倾斜：normal
• 倾斜：italic

字体粗细

作用：用于控制文本字体的粗细程度

属性名：font-weight

属性值	说明
normal	字体以正常粗细显示，通常等同于数字值 400
bold	字体以加粗形式显示，通常等同于数字值 700
lighter	字体相对于父元素更细
bolder	字体相对于父元素更粗
数字值	可以使用 100 ~ 900 之间的整数值

行高

作用：设置多行文本的间距

属性名：line-height

属性值

• 数字 + px
• 数字 (当前标签 font-size 属性值的倍数)
  

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度的属性值

注意：该技巧适用于单行文字垂直居中效果

div {
    height: 100px;
    background-color: blue;
    line-height: 100px;
}

字体族

属性名：font-family

属性值：字体名

扩展：

• font-family 属性值可以写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
• font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

font 简写属性

说明：font 是一个复合属性

简写属性：一个属性对应多个值的写法，各个属性值之间用空格隔开

/* 语法
	font: 是否倾斜 是否加粗 字号/行高 字体;
*/
div {
    font: italic 700 30px/2 宋体;
}

注意：

• 必须按照顺序书写
• 字号和字体值必须书写

文本缩进

属性名：text-indent

属性值：

数字 + px

数字 + em（推荐：1em = 当前标签的字号大小）

p {
    text-indent: 2em;
}

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值	效果
center	居中对齐
left	左对齐（默认）
right	右对齐

文本修饰线

属性名：text-decoration

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

color 文字颜色

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red 、blue	学习
rgb 表示法	rgb(r, g, b)	r 、g 、b 表示红绿蓝三原色，取值: 0-255	了解
rgba 表示法	rgba(r, g, b, a)	a 表示透明度，取值: 0-1	开发(实现透明色)
十六进制表示法	#RRGGBB	#000 、#fc0	开发(从设计复制)

背景属性

背景图

属性名：background-image

属性值：url （背景图 url）

提示：背景图默认有平铺效果

平铺方式

属性名：background-repeat

属性值	效果
no-repeat	不平铺
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

提示：在盒子中，不平铺的效果是，图片显示盒子在左上角

背景图位置

属性名：background-position

属性值：水平方向位置 垂直方向位置

说明：属性值可以是关键字，也可以是坐标

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

坐标

水平：正数向右；负数向左

垂直：正数向下；负数向上

提示

• 关键字取值方式写法，可以颠倒取值顺序
• 可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size

属性值：关键字

说明：常用的属性值有 关键字 、百分比 、数字+单位

关键字	说明
cover	背景图片全覆盖容器，可能会裁剪图片的一部分
contain	背景图片完全显示在容器内，可能会在容器内留下空白

提示：图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同

背景图固定

作用: 背景不会随着元素的内容滚动

属性名：background-attachment

属性值：fixed

背景简写属性

属性名：background

/* 语法
	属性值：背景色 背景图 背景平铺方式 背景图位置/背景图缩放 背景图固定
*/
div {
    background: blue url('img.png') no-repeat center/cover fixed
}

注意：空格隔开各个属性值，不区分顺序

显示模式

显示模式：标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素

常见的块级元素如下表格

块级元素	说明	块级元素	说明
<h1>~<h6>	标题元素	<form>	表单元素
<p>	段落元素	<table>	表格元素
<div>	通用容器元素	<video>	视频元素
<ul> or <ol>	无序列表和有序列表	<audio>	音频元素
<li>	列表项元素	<iframe>	内嵌框架元素
<header>	头部元素	<nav>	导航元素
<footer>	页脚元素	<main>	主内容元素

特点

• 独占一行
• 宽度默认是父级的100%
• 添加宽高属性生效

行内元素

常见的行内元素如下表格

行内元素	说明	行内元素	说明
<a>	锚点元素	<b>	加粗元素
<span>	通用行内容器	<i>	斜体元素
<img>	图像元素	<u>	下划线元素
<del>	删除线元素	<mark>	标记元素

特点

• 一行可以显示多个
• 设置宽高属性不生效
• 宽高尺寸由内容撑开

行内块元素

常见的行内块元素如下表格

行内块元素	说明	行内块元素	说明
<img>	图像元素	<option>	选项元素
<input>	输入元素	<lable>	标签元素
<button>	按钮元素	<iframe>	内嵌框架元素
<textarea>	文本区域元素	<video>	视频元素
<select>	选择元素	<audio>	音频元素

特点

• 一行可以显示多个
• 设置宽高属性生效
• 宽高尺寸也可以由内容撑开

转换显示模式

属性名：display

属性值	效果
none	隐藏元素
block	块级
inline-block	行内块
inline	行内
flex	弹性布局
grid	网格布局

修饰属性

作用：属性用来指定 行内、行内块 的垂直对齐方式

属性名：vertical-align

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

过渡效果

属性名：transition

属性值：过渡的属性 花费时间（单位：s）

提示：过渡的属性可以是具体的 CSS 属性，也可以为 all

<style>
    .button {
        width: 150px;
        height: 50px;
        background-color: blue;
        color: white;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        transition: background-color 0.5s ease, width 1s ease-in-out;
    }
    
    .button:hover {
        background-color: skyblue;
        width: 200px;
    }
</style>

<div class="button">悬停我</div>

说明：transition 是一个简写属性，可在官网详细查看其用法

透明度

作用：设置整个元素的透明度

属性名：opacity

属性值：0~1

数值	效果
0	完全透明
1	不透明
0~1之间的小数	半透明

光标类型

作用：鼠标悬停在元素上时指针显示的样式

属性名：cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

CSS 特性

CSS 三大特性：层叠性 、继承性 、优先级

层叠性

特点

• 相同的属性会覆盖：后面的 CSS 属性会覆盖前面的 CSS 属性
• 不同的属性会叠加：不同的 CSS 属性都生效

<style>
    div {
        color: blue;
        font-weight: 700;
    }
    
    div {
        color: skyblue;
        font-size: 30px;
    }
</style>

<div>盒子</div>

注意：选择器类型相同则遵守层叠性，否则按选择器优先级判断

继承性

继承性：子级默认继承父级的文字控制属性

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

注意：如果标签有默认文字样式会继承失败，如链接标签 、标题标签

优先级

可查看文档 —— CSS 选择器-优快云博客

Emmet 写法

Emmet 写法：代码的简写方式，输入缩写会自动生成对应的代码

• HTML

说明	Emmet 写法
类选择器	标签名.类名
id选择器	标签名#id名
同级标签	标签1+标签2
父子级标签	父标签>子标签
多个相同标签	标签名*个数
有内容的标签	标签名{内容}

• CSS

说明	Emmet 写法
宽度	w:数值
高度	h:数值
背景色	bgc
多属性	w:数值+h:数值+bgc