CSS 基础

目录

CSS 基础

一、CSS 样式表

1.1 内联样式表

 1.2 内部样式表

1.3 外部样式表

1.4 样式表层叠优先级

二、CSS 选择器

2.1 元素选择器

2.2 ID 选择器

2.3 类选择器

 2.4 属性选择器

三、语法规则

3.1 注释语句

3.2 @charset

3.3 !important

四、CSS 取值与单位

4.1 数字

4.2 长度

4.3 角度

4.4 时间

4.5 文本

4.6 颜色

五、CSS 常用样式

5.1 CSS 背景

1. 背景颜色 background-color

2. 背景图像 background-image

3. 背景图像平铺方式 background-repeat

4. 固定 / 滚动背景图像 background-attachment

 5. 定位背景图像 background-position

6. 背景简写 background

5.2 CSS 框模型

1. 内边距 padding

1）设置各边内边距

 2）单边内边距

2. 边框 border

1）边框宽度 border-width

2）边框样式 border-style

3）边框颜色 border-color

​编辑 4）边框简写 border

3. 外边距

1）设置各边外边距

2）单边外边距

3）外边距合并

5.3 CSS 文本  

1. 文本缩进 text-indent

2. 文本对齐 text-align

3. 文本装饰 text-decoration

4. 文本转换 text-transform

5. 字符间距 letter-spacing

5.4 CSS 字体

1. 字体系列 font-family

2. 字体风格 font-style

3. 字体变化 font-variant

4. 字体粗细 font-weight

5. 字体大小 font-size

6. 字体简写 font

5.5 CSS 超链接

5.6 CSS 列表

1. 样式类型 list-style-type

2. 样式图片 list-style-image

3. 样式位置 list-style-position

4. 样式简写 list-style

5.7 CSS 表格

1. 折叠边框 border-collapse

2. 边框距离 border-spacing

3. 标题位置 caption-side

4. 空单元格 empty-cells

5. 表格布局 table-layout

六、CSS 定位

6.1 绝对定位

6.2 相对定位

6.3 层叠效果

6.4 浮动

1. 浮动效果 float

2. 清理浮动 clear

---

一、CSS 样式表

CSS 有三种使用方式，根据声明位置的不同分为内敛样式表、内部样式表、外部样式表。

1.1 内联样式表

内联样式表又称为行内样式表，通过使用 style 属性为各种 HTML 元素标签添加样式，其作用范围只在指定的 HTML 元素内部。

基本语法格式如下：

<元素名 style="属性名称: 属性值">

如果有多个属性需要同时添加，可用分号隔开，显示如下：

<元素名 style="属性名称 1: 属性值 1; 属性名称 2: 属性值 2;...; 属性名称 N: 属性值 N">

部分常用 CSS 属性和参考值：

eg：内联样式表的用法示例

    
    
    


    
CSS 内联样式表
    

    

        这是一段测试文字。

内联样式表仅适用于改变少量元素的样式，不易于批量使用和维护。

 1.2 内部样式表

内部样式表通常位于 和标签内部，通过使用

标签标记各类样式规则，其作用范围为当前整个文档。

语法格式如下：

这里的选择器可用于指定样式的元素标签。

其中最后一个属性值后面是否添加分号为可选内容。

eg：内部样式表的用法示例

    
    
    
    


    
CSS 内部样式表
    

        内部样式表可以批量改变元素样式
    
    

    
CSS 内部样式表
    

        内部样式表可以批量改变元素样式
    
    

    
CSS 内部样式表
    

        内部样式表可以批量改变元素样式
    

内部样式表克服了内联样式表重复定义的弊端，同一种样式声明可以批量被各种元素使用，有利于样式的后期维护和拓展。

1.3 外部样式表

外部样式表为独立的 CSS 文件，其后缀名为.css 或.CSS，在网页文档的首部 和 标签之间使用 标签对其进行引用即可作用于当前整个文档。

对于独立 CSS 文件的引用语法格式如下：

例如，引用本地 css 文件夹中的 test.css 文件：

外部 CSS 文件中的内容无需使用

标签进行标记，其格式和内部样式表

ID 选择器的简单应用

该段落没有定义 id 名称

该段落自定义了 id 名称为 test

ID 选择器的匹配方式，一般适用于为指定的某个 HTML 元素专门设置 CSS 样式效果。

2.3 类选择器

类选择器可以将不同的元素定义为公共的样式。类选择器在声明是需要在前面加一个“.”号，为了和指定的元素关联使用，需要自定义一个 class 名称。其语法规则如下：

.class 名称{属性名称 1: 属性值 1; 属性名称 2: 属性值 2;...; 属性名称 N: 属性值 N}

eg：类选择器的简单应用

    
    
    


    

    
类选择器的简单应用
    

    

        该段落字体将设置为蓝色。
    

    

        该段落字体将设置为红色。

 2.4 属性选择器

属性选择器允许基于元素所拥有的属性进行匹配。其语法规则如下：

元素名称[元素属性]{属性名称 1: 属性值 1; 属性名称 2: 属性值 2;...; 属性名称 N: 属性值 N}

如果不确定属性值的完整内容，可以使用 [attribute~=value] 的格式查找元素，表示在属性值中包含 value 关键词。例如：

a[href~="baidu"]{coloe:red;}
// 表示将所有 href 属性值中包含 baidu 字样的超链接设置为红色字体样式。

还可以使用 [attribute | =value] 的格式查找元素，表示以单词 value 开头的属性值。例如：

img[alt | ="fiower"]{border:1px solid red;}
// 表示将所有 alt 属性值以 flower 字样开头的图像元素设置 1 像素的红色实心边框效果。

 eg：属性选择器的简单应用

    
    
    
    


    
属性选择器的简单应用
    

    
为设置有 alt 属性的图像元素设置边框效果
    
    

三、语法规则

3.1 注释语句

在内部样式表和外部样式表文件中均可以使用/* 注释内容 */ 的形式为 CSS 进行注释，注释内容不会被显示出来。该注释支持单行注释和多行注释。

3.2 @charset

该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。例如：

@charset"utf-8";

该语句表示外部样式表文件使用了 UTF- 8 的编码格式，一般写在外部样式表文件的第一行，并且需要加上分号结束。

3.3 !important

!important 用于标记 CSS 样式的使用优先级，其语法规则如下：

选择器{样式规则!important;}

例如：

p{
    background-color:red !important;
    background-color:bule;
}
// 表示优先使用 background-color:red 语句

四、CSS 取值与单位

4.1 数字

数字取值有三种取值形式，如下表所示:

4.2 长度

长度取值，表示方法为数值接长度单位。可用于描述文本、图像或其他元素的尺寸。

长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的。绝对长度单位的取值是固定的。

长度单位，如下表所示：

4.3 角度

角度取值 可用于描述元素变形时旋转的角度。

角度单位，如下表所示：

4.4 时间

时间取值 可用于描述时间长度。

时间单位，如下表所示：

文本取值类型，如下表所示：

4.6 颜色

CSS 颜色可以用于设置 HTML 元素的背景颜色、边框颜色、字体颜色等。

1. RGB 颜色模式

RGB 色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示，其范围是[0,255]，共有 256 级，其中 0 为最暗，255 为最亮。

2. 常见颜色表示方式

CSS 中常用的颜色表示方式有：

• 使用 RGB 颜色的方法。rgb（0,0,0）表示黑色，rgb（255,255,255）表示白色。
• RGB 的十六进制表示法。#000000 表示黑色，#FFFFFF 表示白色。
• 直接使用英文单词名称。red 表示红色，blue 表示蓝色。

1）RGB 颜色

所有浏览器都支持 RGB 颜色表示法，使用 RGB 色彩模式表示颜色值的格式如下：

rgb[红色通道值，绿色通道值，蓝色通道值]

以上三个参数的取值范围可以是整数或者百分比的形式。

2）十六进制颜色

所有浏览器都支持 RGB 颜色的十六进制表示法，就是把原先的十进制的 RGB 取值转换成了十六进制，其格式如下：

#RRGGBB

以井号（#）开头，后跟六位数，每两位代表一种颜色通道值，分别是 RR（红色）、GG（绿色）、BB（蓝色）的十六进制取值。其中最小值的是 0，最大值是 FF。

十六进制码中的字母大小写均可。

当每种颜色通道上的两个字符相同时，每个通道的十六进制取值只占 y 

3）颜色名

一些常用的颜色可以使用相应的英文单词表示。

CSS 颜色规定的 17 种标准色，如下表所示：

eg：CSS 颜色的简单应用

    
    
    
    


    
CSS 颜色的简单应用
    

    

        该段落字体设置为红色
    
    

    

        该段落字体设置为蓝色
    
    

    

        该段落字体设置为橘色
    

五、CSS 常用样式

5.1 CSS 背景

CSS 背景与颜色属性，如下表所示：

1. 背景颜色 background-color

 CSS 中的背景颜色 background-color 属性用于为所有 HTML 元素指定背景颜色。例如：

p{background-color:gray}
/* 将段落元素的背景颜色设置为灰色 */

如需更改 整个网页的背景颜色 ，则对 元素应用 background-color 属性。例如;

body{background-color:cyan}
/* 将整个网页的背景颜色设置为青色 */

background-color 属性的默认值是透明的，没有特别规定 HTML 元素背景颜色，那么该元素就是透明的，以便使其覆盖的元素可见。

eg：CSS 属性 background-color 的简单应用

    
    
    
    


    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用
    
CSS 属性 background-color 的应用

2. 背景图像 background-image

 CSS 中的 background-image 属性用于为元素设置背景图像。例如：

p{background-image:url(flower.jpg)}
/* 表示 flower.jpg 图片与 HTML 文档在同一个目录中 */

如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。例如：

p{background-image:url(image/flower.jpg)}
/* 表示 flower.jpg 图片在本地的 image 文件夹中，并且 image 文件夹与 HTML 文档存放于同一个目录中 */

如需更改整个网页的背景图像，则对 元素应用 background-image 属性。例如：

body{background-image:url(image/flower.jpg)}

eg:CSS 属性 background-image 的简单应用

    
    
    
    


    
CSS 属性 background-image 的应用
    

    
这是一个段落

3. 背景图像平铺方式 background-repeat

CSS 中的 background-repeat 属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺。

CSS 属性 background-repeat 取值，表如下所示：

eg：CSS 属性 background-repeat 的简单应用

    
    
    
    


    
CSS 属性 background-repeat 的应用

4. 固定 / 滚动背景图像 background-attachment

CSS 中的 background-attachment 属性用于设置背景图像是固定在屏幕上还是随着页面滚动。

CSS 属性 background-attachment 取值，如下表所示：

eg：CSS 属性 background-attachment 的简单应用

    
    
    
    


    
CSS 属性 background-attachment 的应用
    

    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。
    

        这是段落元素, 用于测试背景图片是否跟随页面滚动。

 5. 定位背景图像 background-position

默认情况下，背景图像会放置在元素的左上角。CSS 中的 background-position 属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。其基本格式如下：

background-position: 水平方向 垂直方向

水平和垂直方向的属性值均可以使用关键字、长度值或者百分比的形式表示。

 1）关键词定位

在 background-position 属性值中可以使用的关键词，如下表所示：

使用关键词组合的方式定位图像，需要从表示水平方向和垂直方向的关键词中个选一个组合使用。例如：background-position:left top 表示背景图像在元素左上角位置。

关键词指示的方向非常明显，并且关键词的组合可以不分先后顺序。

关键词 center 既可以表示水平居中也可以表示垂直居中，组合使用时取决于另一个关键词是水平还是垂直方向，center 则用于补充对立方向。

关键词定位的方式也可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为 center。

2）长度值定位

长度值定位方法是以元素内边距区域左上角的点作为原点，然后解释背景图像左上角的点对原点的偏移量。例如：background-position:100px;50px 指的是背景图像左上角的点距离元素左上角向右 100 像素同时向下 50 像素的位置。

3）百分比定位

百分比数值定位方式更为复杂，是将 HTML 元素与其背景图像在指定的点上重合对齐，而指定的点是用百分比的方式进行解释的。

例如：background-position:0% 0% 指的是背景图像左上角的点放置在 HTML 元素左上角原点上。background-position:66% 33% 指的是 HTML 元素与背景图像水平方向 2 / 3 的位置和垂直方向 1 / 3 的位置的点对齐。

一般来说，使用百分比定位方式都是用两个参数值组合定位的，第一个参数表示水平方向的位置；第二个参数值表示垂直方向的位置。如果简写为一个参数值，则只表示水平方向的位置，省略的垂直方向位置默认为 50%。

eg：CSS 属性 background-position 的综合应用

    
    
    
    


    
CSS 属性 background-position 的应用
    

    

        
left
        
top
        
right top

        
0%
        
50%
        
100%

        
0px 100px
        
50px 100px
        
100px 100px
    

几种特殊的百分比数值可以与关键词定位法等价使用，如下表所示：

6. 背景简写 background

CSS 中的 background 属性可以用于概括其他五种背景属性，将相关属性值汇总写在一行。当需要为同一元素声明多项背景属性时，可以使用 background 属性进行简写。声明顺序如下：

[background-color][background-image][background-repeat][background-attachment][background-position]

 属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。

P{
    background-color：silver;
    background-image：url(sky.jpeg);
    background-repeat:no-repeat;
}
/* 等价于 */
p{background：silver url(sky.jpeg) no-repeat
}

5.2 CSS 框模型

CSS 框模型又称为盒状模型，用于描述 HTML 元素形成的矩形盒子。每个 HTML 元素斗鱼元素内容、内边距、外边距。CSS 框模型的结构，如下图所示：

 默认情况下，元素的内边距、边框和外边距均为 0。

 在 CSS 中元素的宽度和高度属性指的是元素内容的区域。增加外边距或边框的宽度不会影响元素的宽度和高度属性值，但是元素占用的总空间会增大。

1. 内边距 padding

1）设置各边内边距

在 CSS 中，可以使用 padding 属性设置 HTML 元素的内边距。内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。

padding 属性值可以使长度值或者百分比值，但是不可以是负数。

例如：为所有的段落元素

设置各边均为 20 像素的内边距：

P{padding:20px}

使用百分比值表示是该元素的上一级父元素宽度的百分比。例如：

    
这是一个段落

/* 使用内联样式表，表示段落元素 
 设置了内边距为父元素宽度的 20%。该段落元素 
 的父元素为块级元素 
, 因此段落元素
 各边的内边距均为是 
 元素宽度的 20%，即 20 像素。*/

padding 属性也可以是元素的各边分别设置内边距。例如：

p{padding:10px 20px 0 20%}
/* 此时规定的属性值按照上右下左的顺时针顺序为各边的内边距进行样式定义。表示上边内边距为 10 像素；右边内边距为 20 像素；下边内边距为 0；左边内边距为其父元素宽度的 20%*/

 2）单边内边距

如果只需要为 HTML 元素的某一边设置内边距，可以使用 padding 属性的四种单边内边距属性，如下表所示：

eg：CSS 属性 padding 的应用

• 使用 padding 属性加 单个属性值的形式为各边同时设置相同的内边距。
• 使用 padding 属性加 两个属性值的形式分别为上下边和左右边设置不同的内边距。
• 使用 padding 属性 设置单边的内边距。

    
    
    
    


    
CSS 属性 padding 的应用
    

    

        该段落没有使用内边距, 默认值为 0
    
    

        该段落元素的各边内边距均为 20 像素
    
    

        该段落元素的上下边内边距均为 10 像素、左右边内边距均为 50 像素
    
    

        该段落元素的左边内边距为 50 像素
    

 注意：如果为元素填充背景颜色或背景图像，则其显示范围是边框以内的区域，包括元素实际内容和内边距。

2. 边框 border

使用 CSS 边框的相关属性可以为 HTML 元素创建不同的宽度、样式和颜色的边框。和 CSS 边框有关的属性，如下表所示：

1）边框宽度 border-width

CSS 中的 border-width 属性用于定义 THML 元素边框的宽度。该属性取值如下表所示：

注：border-width 属性必须和边框样式 border-style 属性一起使用方可看出效果。

eg：CSS 属性 border-width 的简单应用

    
    
    
    


    
CSS 属性 border-width 的简单应用
    

    

        边框宽度为 1 像素
    
    

        边框宽度为 thin
    
    

        边框宽度为 medium
    
    

        边框宽度为 thick
    
    

        边框宽度为 10 像素
    

2）边框样式 border-style

CSS 中的 border-style 属性用于定义 HTML 元素边框的样式。该属性的取值如下表所示：

border-style 属性也可以单独为元素的各边设置边框样式。规定的属性值按照 上右下左 的顺时针为各边的边框进行样式定义。例如：

p{border-style:solid dashed dotted double}
/* 上边框为实现，右边框为虚线，下边框为点状线，左边框为双线 */

如果简写为三个属性值的样式，则左右边框共用中间的属性值。例如：

p{border-style:solid dashed double}
/* 表示上边框为实线，左右边框为虚线，下边框为双线 */

 如果简写为两个属性值的样式，则上下边框共用第一个属性值，左右边框共用第二个属性值。例如：

p{border-style:solid dashed}
/* 表示上下边框均为实线，左右边框均为虚线 */

eg：CSS 属性 border-style 的简单应用

    
    
    
    


    
CSS 属性 border-style 的应用
    

    
无边框效果
    
点状边框效果
    
虚线边框效果
    
实线边框效果
    
双线边框效果
    
3D 凹槽边框效果
    
3D 脊状边框效果
    
3D 内嵌边框效果
    
3D 外凸边框效果

3）边框颜色 border-color

CSS 中的 border-color 属性用于定义 HTML 元素边框的颜色。

eg：CSS 属性 border-color 的简单应用

    
    
    
    


    
CSS 属性 border-color 的应用
    

    

        红色边框效果
    
    

        绿色边框效果
    
    

        蓝色边框效果
    

4）边框简写 border

CSS 中的 border 属性可以用于概括其他三种边框属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用 border 属性进行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如：

p{
    border-width:1px;
    border-style:solid;
    border-color:red;
}
/* 等价于 */
p{border:1px solid red}

3. 外边距

1）设置各边外边距

在 CSS 中，可以使用 margin 属性设置 HTML 元素的外边距。元素的外边距也可以被理解为元素内容周围的填充物。

margin 属性值可以是长度值或百分比，包括可以使用负数。例如：

h1{margin:10px}
/* 所有标题元素 
 设置各边均为 10 像素的外边距 */

使用百分比值表示当前元素上级父元素的宽度百分比。例如：

    
这是一个段落

/* 使用内联样式表为段落 
 设置外边距为父元素宽度的 10%*/
/* 该段落元素 
 的父元素为 
, 因此段落元素
 各边的外边距均为是 
 元素宽度的 10%，即 30 像素 */

margin 属性也可以为元素的各边分别设置外边距。规定的属性值按照上右下左的顺时针顺序为各边的外边距进行样式定义。例如：

p{margin:0 10% 20px 30px}
/* 表示上边外边距为 0 像素，右边外边距为其父元素的 10%，下边外边距为 20 像素，左边外边距为 30 像素 */

简写为三个属性值的样式，则左右边外边距共用中间的属性值。例如：

p{margin:10px 0 30px}
/* 表示上边外边距为 10 像素，左右边外边距为 0，下边外边距为 30 像素 */

 简写为两个属性值的样式，则上下边外边距共用第一个属性值，左右边外边距共用第二个属性值。例如：

p{margin:20px 30px}
/* 表示上下边外边距为 20 像素，左右边外边距为 30 像素 */

2）单边外边距

如果只需要为 HTML 元素的某一个边设置外边距，可以使用 margin 属性的单边外边距属性，如下表所示：

例如：

p{margin-left:10px}
/* 设置段落元素 
 的左边外边距为 10 像素 */

eg：CSS 属性 margin 的应用

• 使用 margin 属性加单个属性值的形式为各边同时设置相同的外边距。
• 使用 margin 属性加两个属性值的形式分别为上下边和左右边设置不同的外边距。
• 使用 margin 属性设置单边的外边距。

    
    
    
    


    
CSS 属性 margin 的应用
    

    

        

            该段落没有使用外边距, 默认值为 0
        
    
    

        

            该段落元素的各边外边距均为 20 像素
        
    
    

        

            该段落元素的上下边外边距均为 10 像素, 左右边外边距均为 50 像素
        
    
    

        

            该段落元素左边外边距为 100 像素
        
    

3）外边距合并

外边距合并又称外边距叠加，指的是如果两个元素的垂直外边距相连接会发生重叠合并，其高度是合并前这两个外边距中的较大值。

外边距合并主要指的就是上下外边距的合并，存在三种可能：

• 当元素 B 出现在元素 A 下面时，元素 A 的下边距与元素 B 的上边距发生重叠合并。
• 当元素 B 包含在元素 A 内部时，如果元素 B 的上 / 下内边距均为 0，也会发生上 / 下外边距合并现象。
• 当空元素没有边框和内边距时，上下外边距也会发生合并。

注意：只有普通块级元素的垂直外边距才会发生合并。

5.3 CSS 文本  

对网页文本内容进行修饰。

CSS 文本属性，如下表所示：

1. 文本缩进 text-indent

CSS 中的 text-indent 属性用于为段落文本设置首行缩进效果。

例如，为段落元素

设置 20 像素的首行缩进：

p{text-indent:20px}

eg:CSS 属性 text-indent 的简单应用

    
    
    
    


    
CSS 属性 text-indent 的应用
    

    

        这是一个用于测试首行缩进效果的元素段落, 当前缩进了两个字符的距离
    

2. 文本对齐 text-align

CSS 中的 text-align 属性用于为文本设置对齐效果。

CSS 属性 text-align 取值，如下表所示：

其中 justify 的取值在多数浏览器上显示会存在问题，因为 CSS 本身没有规定如何将文字向两端拉伸，拉伸的依据是各类浏览器本身的规则。为了各类浏览器的兼容效果，应慎用其属性值。

eg:CSS 属性text-align 的简单应用

    
    
    
    


    
CSS 属性 text-align 的应用
    

    

        

            文字居中对齐
        
        

            文字左对齐
        
        

            文字右对齐
        
    

3. 文本装饰 text-decoration

CSS 中的 text-decoration 属性用于为文本添加装饰效果。

CSS 属性 text-decoration 取值，如下表所示：

eg：CSS 属性text-decoration 的简单应用

    
    
    
    


    
CSS 属性 text-decoration 的应用
    

    

        为文字添加下画线
    
    

        为文字添加删除线
    
    

        为文字添加上画线
    

一般来说，默认情况下就是text-decoration 属性值为 none 的状态，无需特别声明。但是 none 属性值适用于去掉超链接文本内容的下画线。

4. 文本转换 text-transform

CSS 中的 text-transform 属性用于设置文本的大小写。

CSS 属性 text-transform 取值，如下表所示：

eg：CSS 属性 text-transform 的简单应用

    
    
    
    


    
CSS 属性 text-transform 的应用
    

    

        hello HTML
    
    

        HEOOL HTML
    
    

        hello HTML
    

5. 字符间距 letter-spacing

CSS 中的 letter-spacing 属性用于设置文本中字符的间距，其属性值为长度值。

例如，将标题元素

设置为字间距为 10 像素的宽度：

h1{letter-spacing:10px}

eg:CSS 属性 letter-spacing 的简单应用

    
    
    
    


    
CSS 属性 letter-spacing 的应用
    

    

        文字间距为 1em
    
    

        文字间距为 2em
    
    

        文字间距为 -5px
    

 letter-spacing 的属性值允许是负数，但是需要适度，否则字符就会全部堆积在一起无法识别。

5.4 CSS 字体

对字体进行样式设置。

CSS 字体属性，如下表所示：

1. 字体系列 font-family

在 CSS 中，将字体分为两类：一类是特定字体系列；另一类是通用字体系列。特定字体系列指的是拥有具体名称的某一类字体；通用字体系列指的是具有相同外观特征的字体系列。

除了常见的各种特定字体外，CSS 规定了五种通用字体系列：

• Serif 字体
• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

注：如果字体名称由多个单词组成中间有空格，属性值必须加上引号；如果字体名称为单个单词，引号可省略不写。

eg：CSS 属性 font-family 的简单应用

    
    
    
    


    
CSS 属性 font-family 的应用
    

    

        AR DELANEY
    
    

        French Script MT
    
    

        微软雅黑 Light
    

2. 字体风格 font-style

CSS 中的 font-style 属性可以用于设置字体风格是否为斜体字。

CSS 属性 font-style 取值表，如下所示：

eg：CSS 属性 font-style 的简单应用

    
    
    
    


    
CSS 属性 font-style 的应用
    

    

        正常字体
    
    

        斜体字
    
    

        倾斜字体
    

3. 字体变化 font-variant

CSS 中的 font-variant 属性可以用于设置字体变化。

CSS 属性 font-variant 取值，如下表所示：

如果当前页面的指定字体不支持 small-caps 这种形式，则显示为正常大小字号的大写字母。

eg：CSS 属性 font-variant 的简单应用

    
    
    
    


    
CSS 属性 font-variant 的应用
    

    

        Normal
    
    

        Small Caps
    
    

        small caps
    

4. 字体粗细 font-weight

CSS 中的 font-weight 属性用于控制字体的粗细程度。

CSS 属性 font-weight 取值，如下表所示：

eg：CSS 属性 font-weight 的简单应用

    
    
    
    


    
CSS 属性 font-weight 的应用
    

    

        段落测试(正常字体)
    
    

        段落测试(粗体字)
    
    

        段落测试(100)
    
    

        段落测试(400)
    
    

        段落测试(900)
    

注：浏览器在 100~400 的显示效果相似，500~900 的显示效果相似。

5. 字体大小 font-size

CSS 中 font-size 属性用于设置字体大小。font-size 的属性值为长度，可以使用绝对单位或相对单位。绝对单位使用的是固定尺寸，不允许用户在浏览器中更改文本大小，采用了物理度量单位；相对单位是相对于周围的参照元素进行设置大小，允许用户在浏览器中更改字体大小。

常用字体大小设置是使用 px、em、百分比（%）来显示字体尺寸。

• px——像素，1px 指的是屏幕上显示的一个小点，是绝对单位。
• em——当前元素的默认字体尺寸，是相对单位。浏览器默认字体大小是 16px，因此 1em=16px。
• %——相对于父元素的比例，是相对单位。

eg：CSS 属性 font-size 的简单应用

    
    
    
    


    
CSS 属性 font-size 的应用
    

    

        测试段落, 字体大小为 16 像素
    
    

        测试段落, 字体大小为 1em
    
    

        测试段落, 字体大小为 32 像素
    
    

        测试段落, 字体大小为 2em
    

6. 字体简写 font

CSS 中的 font 属性可以用于概括其他五种字体属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项字体属性时，可以使用 font 属性进行简写。声明顺序如下：

[font-style][font-variant][font-weight][font-size][font-family]

属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如：

p{
    font-style:italic;
    font-weight:bold;
    font-size:20px;
}
/* 等价于 */
p{font:italic bold 20px}

5.5 CSS 超链接

HTML 中的超链接元素 和其他元素类似，有一些通用 CSS 属性可以设置，比如字体颜色，字体大小、背景颜色等。除此之外，超链接元素 还可以根据其所处的不同状态分别设置 CSS 样式。

超链接的四种状态，如下表所示：

为超链接设置不同状态的 CSS 样式时必须遵循两条规则：

• a:hover 的声明必须在 a:link 和 a:visited 之后；
• a:active 的声明必须在 a:hover 之后。

否则声明有可能失效。

eg：超链接不同状态的简单 CSS 应用

    
    
    
    


    
CSS 属性超链接应用
    

百度

本例设置 text-decoration 属性值为 none，取消了原本超链接原有的下划线样式，并在鼠标悬浮和点击状态中设置了元素背景颜色的加深，从而实现动态效果。

为使超链接元素形成仿按钮风格，为其定义 display 属性为 block，使之成为块级元素，从而可以为其设置尺寸。

5.6 CSS 列表

CSS 列表属性，如下表所示：

1. 样式类型 list-style-type

CSS 中的 list-style-type 属性可以用于设置列表的标志样式。

CSS 属性 list-style-type 常见取值，如下表所示：

注意：部分列表样式在 IE 浏览器中不被支持，建议使用 Chrome 或者其他浏览器进行预览。

2. 样式图片 list-style-image

CSS 中的 list-style-image 属性可以用于设置列表的标志图标，标志图标可以是来源于本地或者网络的图像文件。

如果已使用 list-style-image 属性声明了列表的标志图标，则不能同时使用 list-style-type 属性声明列表的标志类型，否则后者将无显示效果。

eg：CSS 属性 list-style-image 的简单应用

使用自定义图片制作列表的标志图标。

    
    
    
    


    
CSS 属性 list-style-image 的应用
    

    

        
选项一
        
选项二
        
选项三
    

3. 样式位置 list-style-position

CSS 中的 list-style-position 属于用于定义列表标志的位置。

CSS 中的 list-style-position 属性值，如下表所示：

eg：CSS 属性 list-style-position 的简单应用

 使用列表元素

对比 list-style-position 属性值为 outside 和 inside 的显示区别。

    
    
    
    


    
CSS 属性 list-style-position 的应用
    

    

        

            本示例的 list-style-position 属性值为 outside
        
        

            本示例的 list-style-position 属性值为 outside
        
        

            本示例的 list-style-position 属性值为 outside
        
    
    

        

            本示例的 list-style-position 属性值为 inside
        
        

            本示例的 list-style-position 属性值为 inside
        
        

            本示例的 list-style-position 属性值为 inside
        
    



4. 样式简写 list-style

CSS 中的 list-style 属性可以用于概括其他三种字体属性，将相关属性值汇写在同一行。当需要为同一个列表元素声明多项列表属性时可以使用 list-style 属性进行简写。声明顺序如下：

[list-style-type] [list-style-position] [list-style-image]

属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。

ul{
    list-style-type:circle;
    list-style-position:outside
}
/* 等价于 */
ul{list-style:circle outside}

5.7 CSS 表格

对网页上的表格进行修饰。

CSS 表格相关属性如下表所示：



除以上五种属性设置外，在 CSS 中一些通用属性设置同样也可以用于表格元素。例如，字体颜色（color）、背景（background）、文本对齐（text-align）、边框（border）、内边距（padding）、宽度（width）、高度（height）等。

1. 折叠边框 border-collapse

在默认情况下，表格的边框如果设置为实践，则会显示为双层线条的样式效果。

CSS 中的 border-collapse 属性用于设置是否将表格的双层边框折叠为单一线条边框。

CSS 属性 border-collapse 属性值，如下表所示：



eg：CSS 属性 border-collapse 的简单应用

    
    
    
    


    
CSS 属性 border-collapse 的应用
    

    

        

            双线边框效果
        
        

            
年份
            
第一季度
            
第二季度
            
第三季度
        
        
2014
100
200
300
        
2015
150
250
350
        
2016
200
300
400
    
    

    

        

            折叠边框效果
        
        

            
年份
            
第一季度
            
第二季度
            
第三季度
        
        
2014
100
200
300
        
2015
150
250
350
        
2016
200
300
400
    



2. 边框距离 border-spacing

CSS 中的 border-collapse 属性用于定义表格中双线边框的分割距离。

CSS 属性 border-spacing 属性值，如下表所示：



注意：order-spacing 属性只在表格能显示边框并且边框的 border-collapse 属性值为默认值 spacing 时生效，否则该属性将被忽略。

注：由于表格的默认效果就是分割边框（border-collapse 属性值为 separate），因此无需特别声明。只需要为表格元素添加属性 border=“1”，以便形成宽度为 1 像素的实线边框。

3. 标题位置 caption-side

CSS 中的 caption-side 属性用于定义表格中标题的位置。

CSS 属性 caption-side 属性值：



eg：CSS 属性 caption-side 的简单应用

4. 空单元格 empty-cells

CSS 中的 empty-cells 属于用于定义表格中空单元格边框和背景的显示方式。

CSS 属性 empty-cells 属性值：



eg：CSS 属性 empty-cells 的简单应用

注：由于表格的默认效果就是分割边框（border-collapse 属性值为 separate），因此无需特别声明。只需要为表格元素添加属性“border=1”，以便形成宽度为 1 像素的实线边框。

5. 表格布局 table-layout

CSS 中的 table-layout 属于用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。

CSS 属性 table-layout 属性值：



六、CSS 定位

CSS 定位可以将 HTML 元素放在页面上指定位置的任意地方。CSS 定位的原理是把页面左上角的点定义为坐标为（0,0）的原点，然后以像素为单位将整个网页构建一个坐标系统。其中 x 轴越往右数字越大，y 轴越往下数字越大。

6.1 绝对定位

绝对定位指的是通过规定 HTML 元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占空间。

使用绝对定位需要将 HTML 元素的 position 属性值设置为 absolute（绝对的），并使用四种关于方位的属性关键词 left、right、top、bottom 中的部分内容设置元素的位置。一般来说，从水平和垂直方向各选一个关键词即可。

例如，需要将段落元素

放置在距离页面顶端 150 像素、左边 100 像素的位置：

p{
    position:absolute;
    top:150px;
    left:100px;
}

eg:CSS 绝对定位的应用

    
    
    
    


    
CSS 绝对定位的应用
    

    
该段落是相对于页面定位的, 距离页面的顶端 100 像素, 距离左边 0 像素
    

        我是相对于页面定位的 div 元素, 距离顶端 80 像素, 距离左边 180 像素
        

            该段落是相对于父元素 div 定位的, 距离 div 元素的顶端 100 像素, 距离 div 元素的左边 0 像素
        
    

 

6.2 相对定位

相对定位于绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点的位置。并且即使该元素偏移到了新的位置，也仍然从原点的起始点处占据空间。

使用相对定位需要将 HTML 元素的 position 属性值设置为 relative（相对的），并同样使用四种关于方位的属性关键词 left、right、top、bottom 中的部分内容设置元素的位置。一般来说，从水平和垂直方向各选一个关键词即可。

例如，需要将段落元素

放置在距离元素初始位置顶端 150 像素、左边 100 像素的位置：

p{
    position:relative;
    top:150px;
    left:100px;
}

eg:CSS 相对定位的应用

    
    
    
    


    
CSS 相对定位的应用
    

    

        

            正常状态的段落
        
        

            相对自己正常的位置向左偏移了 50 像素
        
        

            相对自己正常的位置向右偏移了 130 像素
        
    



6.3 层叠效果

在 CSS 中，还可以定义多个元素在一起叠放的层次。使用属性 z -index 可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。

eg：CSS 层叠效果的应用

    
    
    
    


    
CSS 层叠效果的应用
    

    

    

    

    

    



6.4 浮动

1. 浮动效果 float

在 CSS 中 float 属性可以用于令元素向左或向右浮动。 以往常用于文字环绕图像效果，实际上任何元素都可以应用浮动效果。

CSS 属性 float 属性值如下表所示：



在对元素声明浮动效果之后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动，直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。

一行之内的宽度如果放不下浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行移动。

浮动可用于实现文字环绕图片的效果。

eg：CSS 浮动的简单应用

    
    
    
    


    
CSS 浮动的应用
    

    

        
    
    

        18 世纪, 法国造纸商孟格菲兄弟在欧洲发明了热气球。他们受碎纸屑在火炉中不断升起的启发, 用纸袋把热气聚集起来做实验, 使纸袋能够随着气流不断上升。1783 年 6 月 4 日, 孟格菲兄弟在里昂安诺内广场做公开表演, 一个圆周为 110 英尺的模拟气球升起, 飘然飞行了 1.5 英里。同年 9 月 19 日, 在巴黎凡尔赛宫前, 孟格菲兄弟为国王、王后、宫廷大臣及 13 万巴黎市民进行了热气球的升空表演。同年 11 月 21 日下午, 孟格菲兄弟又在巴黎穆埃特堡进行了世界上第一次热气球载人空中飞行, 飞行了 25 分钟, 飞越半个巴黎之后降落在意大利广场附近。这次飞行比莱特兄弟的飞机飞行早了整整 120 年。在充气气球方面, 法国的罗伯特兄弟是最先乘充满氢气的气球飞上天空的。

浮动也可以用于将多个元素排成一行，实现单行分列的效果。

 eg：CSS 浮动的简单应用

    
    
    
    


    
CSS 浮动的应用
    

    

    

    

    

    



 使用了 float 属性后，

元素会自动向左进行浮动，直到元素的左边外边缘碰到了页面顶端或前一个浮动框的边框时才会停止。

注意：如果浏览器页面缩放尺寸，则有可能造成宽度过窄容纳不下全部的元素，这会导致其他

元素自动向下移动直到拥有足够的空间才能继续显示。

2. 清理浮动 clear

CSS 中的clear 属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。

CSS 属性的 clear 属性值如下表所示：





例如：常用 clear:both 来清除之前的浮动效果：

p{clear:both;}

此时该元素不会随着之前的元素进行错误的浮动。

正文完
发表至： 开发笔记
2024-10-23