CSS笔记

知识补完,日常速成 : )

CSS笔记

1 概念

1.1 定义

CSS(Cascading Style Sheet),层叠样式表。

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

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

1.2 选择符

  • CSS选择符是CSS样式的名字

1.2.1 HTML选择符

1
2
3
4
5
/* html标记选择符 */
body
{
属性:属性值;
}
  • 以HTML标记命名,会覆盖标记的默认样式(无需调用)

1.2.2 ID选择符

1
2
3
4
5
/* id选择符 */
#选择符
{
属性:属性值;
}
  • # 开头
  • HTML标记使用属性 id="ID选择符" 调用
  • 唯一性选择符,不可重复定义

1.2.3 CLASS选择符

1
2
3
4
5
/* 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
a:link
{
color:red;
}
  • 例1,当<a>为超链接时,将其显示为红色。
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
3
4
*
{
属性:属性值;
}

1.2.6 规则

1.2.6.1 可包含
1
2
3
4
table td
{
width: 200px;
}
  • 此选择符仅对<table>标签内嵌的<td>有效
1.2.6.2 可分组
1
2
3
4
body, a, div
{
font-size: 14px;
}
  • 表示将<body> <a> <div> 分为一组,使用相同样式

1.3 注释

1
2
3
4
5
6
/* 单行注释 */

/*
多行注释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
  • pc1pc=12pt

1.4.3 颜色

1.4.3.1 关键字
  • aquablackbluefuchsiagrey ……
  • 总计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>>
  • 内联调用相当于是不需要独立的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
      1
      2
      3
      4
      5
      6
      7
      8
      9

      - 通用属性:

      - `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”, 宋体
    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

  • 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

    1
    2
    3
    4
    5

    - 自适应

    - ```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

1
2
3
4
5
6
7
8
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 案例

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 溢出显示

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

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
  • 不可视(但保留原空间