知识补完,日常速成 : )
CSS笔记
1 概念
1.1 定义
CSS(Cascading Style Sheet),层叠样式表。
一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
1.2 选择符
1.2.1 HTML选择符
- 以HTML标记命名,会覆盖标记的默认样式(无需调用)
1.2.2 ID选择符
#
开头
- HTML标记使用属性
id="ID选择符"
调用
- 唯一性选择符,不可重复定义
1.2.3 CLASS选择符
.
开头
- HTML标记使用属性
class="class选择符"
调用
- 多重选择符,可重复定义【常用】
1.2.4 伪类
1.2.4.1 基本
1 2 3 4
| selector:pseudo-class { 属性:属性值; }
|
- 预定义性质,预定义的class,但不存在真正的class的属性
link
可链接对象
visited
已访问过的链接
active
正被点击的链接
hover
光标置于其上
1.2.4.2 案例
1 2 3 4 5 6
| 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 可包含
1 2 3 4
| table td { width: 200px; }
|
1.2.6.2 可分组
1 2 3 4
| body, a, div { font-size: 14px; }
|
- 表示将
<body>
<a>
<div>
分为一组,使用相同样式
1.3 注释
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部分:
1 2 3 4 5 6 7 8 9 10 11 12
| #span1 { color:blue; } #div1 { font-weight:600; } .div2 { font-size:x-large; }
|
HTML部分:
1 2 3 4 5 6 7 8 9
| <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>>
|
2.3 内部CSS(同文件)
<span>
和 <div>
使用属性
2.4 外部CSS(跨文件)
1
| <link type="text/css" rel="stylesheet" href="css/style.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-large1 2 3 4 5 6 7 8 9
| - 通用属性:
- `px` `em` 等
#### 3.2.3 font-weight
- ```css lighter, light, normal, bolder, bolder
|
100
~900
(每100)
3.2.4 font-family
- ```css
font-family: “Courier New”, 宋体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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| - 优先级:从左到右
#### 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
4.2.2 background-image
4.2.3 background-attachment
scroll
图像可滚动(div区域小于图像尺寸时,将出现滚动条)
fixed
图像固定
4.2.4 background-position
1
| background-position: 水平位置 垂直位置
|
- 水平位置、垂直位置 值为 长度 或 对齐关系
- 长度
- 对齐关系
4.2.5 background-repeat
图像铺排方式,如果图像小于背景区域,是否重复图像以便填充。
repeat
默认,纵向及横向重复平铺
no-repeat
不重复平铺
repeat-x
仅在横向(x轴方向)重复平铺
repeat-y
仅在纵向(y轴方向)重复平铺
5 外边距 margin
5.1 基本
margin,外边距,指的是区块之间的边距。
```css
margin: auto
1 2 3 4 5
| - 自适应
- ```css margin: 长度
|
5.2 综合属性
注意:非复合属性,综合属性是多种书写形式对应多种解析方式,相当于重载
```css
margin: 四边
1 2 3
| - ```css margin: 上下 左右
|
```css
margin: 上 左右 下
1 2 3
| - ```css margin: 上 右 下 左
|
5.3 四向属性
margin-top
margin-bottom
margin-left
margin-right
6 内边距 padding
6.1 基本
padding,内边距,是区块内容与区块边界的边距
6.2 综合属性
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
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
- 绝对定位,以父对象为参照定位
- 可层叠,可流出(自动出现滚动条)
- 相对定位,以相邻对象为参照定位
- 不可层叠,流出时无滚动条
注意: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
9.2.2 list-style-position
9.2.3 list-style-type
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
10 表格
10.1 border-collapse
10.2 table-layout
1 2 3 4 5 6 7 8
| scrollbar-3dlight-color: color scrollbar-highlight-color: color scrollbar-face-color: color scrollbar-arrow-color: color scrollbar-3dlight-color: color 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 基本
- 通过设置与上、右、下、左的距离,确定有效的可视范围,范围以外的区域变为透明,原内容不显示
13.2 案例
1 2 3 4 5 6 7 8 9 10 11 12
| .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 溢出显示
设定当内容大小超过区块大小时,如何显示。
15 光标效果 cursor
属性可选值内容很多,仅记录常用值
1 2
| cursor: hand cursor: pointer
|
1 2
| cursor: text cursor: vertical-text
|
1 2
| cursor: progress cursor: 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
- 隐藏内嵌对象(不保留其空白空间),只显示非标记的内容
- 将对象作为内联对象显示,内联化内嵌子对象(即无视内嵌对象换行格式,作为连续内容显示(自动折行))
- 将对象作为内联对象显示,但不内联化内嵌子对象。旁边的对象会和当前对象显示在一行内。
16.2 visibility