CSS笔记

发表于 2017-03-29 更新于 2020-12-22

本文字数： 7.1k 阅读时长 ≈ 6 分钟

知识补完，日常速成 : )

CSS笔记

1 概念

1.1 定义

CSS（Cascading Style Sheet），层叠样式表。

一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2 选择符

CSS选择符是CSS样式的名字

1.2.1 HTML选择符

/* html标记选择符 */
body
{
  属性:属性值;
}

以HTML标记命名，会覆盖标记的默认样式（无需调用）

1.2.2 ID选择符

/* id选择符 */
#选择符
{
  属性:属性值;
}

# 开头
HTML标记使用属性 id="ID选择符" 调用
唯一性选择符，不可重复定义

1.2.3 CLASS选择符

/* class选择符 */
.选择符
{
  属性:属性值;
}

. 开头
HTML标记使用属性 class="class选择符" 调用
多重选择符，可重复定义【常用】

1.2.4 伪类

1.2.4.1 基本

selector:pseudo-class
{
  属性:属性值;
}

预定义性质，预定义的class，但不存在真正的class的属性
link 可链接对象
visited 已访问过的链接
active 正被点击的链接
hover 光标置于其上

1.2.4.2 案例

a:link
{
  color:red;
}

例1，当<a>为超链接时，将其显示为红色。

a.spec:link
{
  color: yellow;
}

<a class=spec href="demo.html" onclick="return false">链接</a>

例2，可以通过这种方式，通过特定的伪类定义特定样式，而不必覆盖页面内全部的链接样式。

1.2.5 通配选择符

*
{
  属性:属性值;
}

1.2.6 规则

1.2.6.1 可包含

table td
{
  width: 200px;
}

此选择符仅对<table>标签内嵌的<td>有效

1.2.6.2 可分组

body, a, div
{
  font-size: 14px;
}

表示将<body> <a> <div> 分为一组，使用相同样式

1.3 注释

/* 单行注释 */

/* 
多行注释1
多行注释2
*/

1.4 单位

1.4.1 通例

+数值 -数值
- 注意：后接单位字符或百分号时，不得含空格。

1.4.2 长度

1.4.2.1 相对单位

px 像素【常用】
em 元素字体高度
ex 字母x的高度
% 相对元素大小

1.4.2.2 绝对单位

in 英寸， 1in=2.54cm
cm
mm
pt 点point 1pt=(1/72)in
pc 帕 1pc=12pt

1.4.3 颜色

1.4.3.1 关键字

aqua， black， blue， fuchsia， grey ……
总计16种，Windows VGA定义

1.4.3.2 RGB

#rrggbb
#rgb
rgb(x,y,z)
rgb(x%,y%,z%)
总计4种表达形式

2 HTML调用CSS

2.1 示例

CSS部分：

#span1
{
  color:blue;
}
#div1
{
  font-weight:600;
}
.div2
{
  font-size:x-large;
}

HTML部分：

<span id="span1">span内容</span>
<div id="div1">
  div内容1
  div内容2
</div>
<div class=".div2">
  div内容1
  div内容2
</div>

2.2 内联调用

1
2
3

<div style="color:red; font-size:12px">
  内容
</div>>

内联调用相当于是不需要独立的CSS部分

2.3 内部CSS（同文件）

<span> 和 <div>使用属性

id 调用 #样式名
class 调用 .样式名

2.4 外部CSS（跨文件）

1	<link type="text/css" rel="stylesheet" href="css/style.css" />

在调用CSS样式之前连接<link>CSS文件

连接后，使用方式同 1.3 内部CSS 用法。

3 字体 font

3.1 复合属性

1	font: font-style font-variant font-weight font-size line-height font-family

3.2 属性

3.2.1 color

使用颜色单位即可

3.2.2 font-size

专用属性：

```css
xx-small, x-small, small, normal, large, x-large, xx-large


- 通用属性：

  - `px`  `em` 等

#### 3.2.3  font-weight

- ```css
  lighter, light, normal, bolder, bolder

100~900 (每100)
- 其中，normal 即 400，bold即700

3.2.4 font-family

```css
font-family: “Courier New”, 宋体


  - 优先级：从左到右

#### 3.2.5  line-height

- `px`， 行距

#### 3.2.6  word-spacing

单词间距，词距

- `normal` 等
- `px` 等

#### 3.2.7  letter-spacing

字母间距，字距

- `normal` 等
- `px` 等

#### 3.2.8  text-transform

字母大小写

- `capitalize`  首字母大写
- `uppercase`  转大写
- `lowercase`  转小写
- `none`  无转换

#### 3.2.9  text-decoration

文本装饰

- `underline`  下划线
- `overline`  上划线
- `line-through`  删除线
- `blink`  闪烁字
- `none`  无，默认

#### 3.2.10  whitespace

空格处理方式

- `nomal`  合并空格
- `pre`  预解析，即不合并空格，使用等宽字体显示
- `nowrap`  不自动折行

#### 3.2.11  vertical-align

垂直方向对齐模式

- `baseline`  与父元素基线对齐
- `sup`  上标
- `sub`  下标
- `top`  顶对齐
- `text-top`  与父元素的字体顶对齐
- `middle`  对齐元素基线并加上父元素的 x-height
- `bottom`  底对齐
- `text-bottom`  与父元素的字体底对齐

#### 3.2.12  text-align

文字的水平对齐模式

- `left`  左对齐
- `right`  右对齐
- `center`  居中
- `justify`  左右对齐

#### 3.2.13  text-indent

文字缩进（首行缩进）

- `px`单位
- `%`

------



## 4  背景 background

### 4.1  复合属性

```css
background: background-color background-image background-repeat background-attachement

4.2 属性

4.2.1 background-color

transparent 透明，默认
颜色

4.2.2 background-image

none
url("imageurl")

4.2.3 background-attachment

scroll 图像可滚动（div区域小于图像尺寸时，将出现滚动条）
fixed 图像固定

4.2.4 background-position

1	background-position: 水平位置垂直位置

水平位置、垂直位置值为长度或 对齐关系
长度
- px 或 %
对齐关系
- left
- right
- top
- bottom

4.2.5 background-repeat

图像铺排方式，如果图像小于背景区域，是否重复图像以便填充。

repeat 默认，纵向及横向重复平铺
no-repeat 不重复平铺
repeat-x 仅在横向（x轴方向）重复平铺
repeat-y 仅在纵向（y轴方向）重复平铺

5 外边距 margin

5.1 基本

margin，外边距，指的是区块之间的边距。

```css
margin: auto


  - 自适应

- ```css
  margin: 长度

如 px

5.2 综合属性

注意：非复合属性，综合属性是多种书写形式对应多种解析方式，相当于重载

```css
margin: 四边
1
2
3

- ```css
margin: 上下左右
```css
margin: 上左右下
1
2
3

- ```css
margin: 上右下左
- 顺时针序，空格隔开
- 单位常用 px

5.3 四向属性

margin-top
margin-bottom
margin-left
margin-right

6 内边距 padding

6.1 基本

padding，内边距，是区块内容与区块边界的边距

6.2 综合属性

和外边距margin相同

6.2.3 四向属性

padding-top
padding-bottom
padding-left
padding-right

7 边框 border

7.1 复合属性

1	border: border-width border-style border-color

7.2 属性

border属性均支持复合属性，可以一次性定义各向样式

7.2.1 border-width

宽度单位
- medium thin thick
长度
- px 常用

7.2.2 border-style

none 不显示边界
dotted 点
dashed 虚线
solid 实线
double 双线
groove 内容凹陷
ridge 内容凸起
insert 边框凹陷
outset 边框凸起

7.2.3 border-color

颜色

7.3 四向属性

border-top
border-bottom
border-left
border-right

8 位置

8.1 position

1	position: static

默认

1	position: absolute

绝对定位，以父对象为参照定位
可层叠，可流出（自动出现滚动条）

1	position: relative

相对定位，以相邻对象为参照定位
不可层叠，流出时无滚动条

注意：absolute和relative必须要定义上下左右至少一个参照距离

8.2 z-index

页面的z轴，z-index值更大的，位于更上层（表层）；值小的，位于下层。

9 列表 list-style

列表包含有序表<ol>和无序表<ul>

9.1 复合属性

1	list-style: list-style-image list-style-position list-style-type

9.2 属性

9.2.1 list-style-image

none
- 默认
url("...")
- 若url失效，则none

9.2.2 list-style-position

outside
- 默认
inside
- 表项标记占用文本空间，原表项标记空间空白

9.2.3 list-style-type

disc
- 默认，实心圆
circle
- 空心圆
square
- 实心方块
decimal
- 数字.
lower-roman
- 小写罗马数字
upper-roman
- 大写罗马数字
lower-alpha
- 小写英文字母
upper-alpha
- 大写英文字母
none
- 无表项标记

10 表格

10.1 border-collapse

seperate
- 表格相邻边分开
collapse
- 表格相邻边合并

10.2 table-layout

auto
- 自动，默认，根据内容调整表格尺寸
fixed
- 固定表格尺寸

11 滚动条 scrollbar

scrollbar-3dlight-color: color  /*滚动条亮边框颜色*/
scrollbar-highlight-color: color  /*滚动条3D界面的亮边颜色*/
scrollbar-face-color: color  /*滚动条3D表面的颜色*/
scrollbar-arrow-color: color  /*滚动条方向箭头的颜色*/
scrollbar-3dlight-color: color  /*滚动条3D界面的暗边框颜色*/
scrollbar-shadow-color: color  /*滚动条暗边框颜色*/
scrollbar-base-color: color  /*滚动条基准颜色*/
scrollbar-track-color: color  /*滚动条的拖动区域颜色*/

12 层漂移 float

12.1 漂移 float

1	float: none \| left \| right

层级区块向左/右漂移对齐

12.2 清除漂移 clear

1	clear: none \| left \| right \| both

none 允许浮动漂移对象
left/right 清除向左/右的浮动漂移对象
both 清除向左向右的浮动漂移对象

13 裁剪可视区域 clip

13.1 基本

1	clip: auto

默认，不裁剪可视区域

1	clip: rect(上右下左)

通过设置与上、右、下、左的距离，确定有效的可视范围，范围以外的区域变为透明，原内容不显示

13.2 案例

.textTop
{
  font: 26px Arial;
  color: red;
  clip: rect(0 auto 18px 0)
}
.textBottom
{
  font: 26px Arial;
  color: blue;
  clip: rect(18px auto auto auto);
}

可以实现上半部红色，下半部蓝色的字体

14 溢出显示

设定当内容大小超过区块大小时，如何显示。

1	overflow: visible

默认值，将区块大小调整为内容大小，以适应内容显示

1	overflow: auto

自动，在溢出时裁剪或显示滚动条

1	overflow: hidden

隐藏溢出内容，满足区块大小限定

1	overflow: scroll

总是显示滚动条

15 光标效果 cursor

属性可选值内容很多，仅记录常用值

1	cursor: auto

默认，根据内容适应光标形状

1	cursor: default

客户端默认光标，如Windows的箭头

1 2	cursor: hand cursor: pointer

手型，通常表示可点击

1 2	cursor: text cursor: vertical-text

I 型文本编辑光标

1	cursor: help

帮助光标，通常时问号

1 2	cursor: progress cursor: wait

progress为箭头+沙漏
wait仅沙漏

1 2	cursor: crosshair cursor: move

crosshair，定位十字标（无箭头）
move，可移动标记十字标（四向箭头）

1 2	cursor: no-drop cursor: not-allowed

no-drop 禁止拖放
no-allowed 禁止点击

16 可见性

16.1 display

1	display: block

块对象默认，为内嵌对象前后换行

1	display: none

隐藏内嵌对象（不保留其空白空间），只显示非标记的内容

1	display: inline

将对象作为内联对象显示，内联化内嵌子对象（即无视内嵌对象换行格式，作为连续内容显示（自动折行））

1	display: inline-block

将对象作为内联对象显示，但不内联化内嵌子对象。旁边的对象会和当前对象显示在一行内。

1	display: list-item

把当前对象作为列表项目显示，显示表项标记

16.2 visibility

1	visibility: inherit

继承父容器可视性

1	visibility: visible

可视

1	visibility: hidden

不可视（但保留原空间）