CSS 介绍及用法，常用属性

一、CSS介绍

A. 简介

CSS全称：全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页外观和格式的计算机语言。CSS可以使网页的布局更加丰富和多样化，并且可以将样式信息与网页内容分离，使得网页的开发和维护更加便捷。它与HTML一起构成了网页的骨架和外观。通过使用CSS，开发者可以控制网页的布局、颜色、字体以及其他视觉效果，使网页更美观和用户友好。

B. 基本概念

1、选择器（Selector）

用于选择HTML元素，应用样式规则。
常见选择器包括标签选择器、类选择器、ID选择器、伪类选择器等。

2、声明（Declaration）：

包含属性（Property）和属性值（Value），用于定义样式。
例如，color: red; 是一个声明，其中 color 是属性，red 是属性值。

3、规则集（Rule Set）：

包括选择器和一组声明。
例如：

        p {

            color: red;

            font-size: 16px;

        }

CSS的基本语法

selector {

property: value;

property: value;

}

例如，以下CSS规则将所有段落的文字颜色设为红色，字体大小设为16像素：

p {

color: red;

font-size: 16px;

}

C. 引入CSS的方式

1、内联样式（Inline Style）：

直接在HTML元素的style属性中定义样式。
例如：

<p style="color: red; font-size: 16px;">This is a paragraph.</p>

2、内部样式表（Internal Style Sheet）：

在HTML文档的<head>部分使用<style>标签定义样式。
例如：

       <head>

            <style>

                p {

                    color: red;

                    font-size: 16px;

                }

            </style>

        </head>

3、外部样式表（External Style Sheet）：

将样式规则保存在一个独立的‘.css’文件中，并在HTML文档中通过<link>标签引用。
例如，styles.css 文件内容：

       p {

            color: red;

            font-size: 16px;

        }

在HTML文档中引用：

       <head>

            <link rel="stylesheet" href="styles.css">

        </head>

二、CSS选择器

1、标签选择器：选择所有指定标签的元素。

p {

color: blue;

}

2、类选择器：选择所有具有指定类的元素。类选择器以‘.’开头。

.my-class {

color: green;

}

3、 ID选择器：选择具有指定ID的元素。ID选择器以‘#’开头。

#my-id {

color: orange;

}

4、属性选择器：选择具有指定属性的元素。

[type="text"] {

border: 1px solid black;

}

5、伪类选择器：选择元素的特定状态。

a:hover {

color: red;

}

三、CSS属性

1、宽度

语法：width：value

特点：为元素指定宽度。

value：值为数字，单位像素（px）、百分比（%）、视口单位（vw、vh）等。

例如：

width: 200px;

2、高度

语法：height：value

特点：为元素指定高度

value：值为数字，单位像素（px）、百分比（%）、视口单位（vw、vh）等。

例如：

height: 200px;

3、对齐方式

语法：text-align：value

特点：文本段落元素指定对齐方式

value：

left：左（默认）
center：居中
right：右
justify：将文本两端对齐。文本在行的起始和末尾对齐，通过调整单词间的空格来实现

例如：

text-align: right;

4、字体大小

语法：font-size：value

特点：为文本元素设置大小

value：值为数字，单位像素（px）

例如：

font-size: 14px;

5、字体颜色

语法：color：value

特点：为文本元素指定颜色

value：值表示方式可以为：十六进制，RGB，RGBA，HSL，HSLA，预定义颜色例如‘red’。

例如：

color: pink;

6、行高

语法：line-height：value

特点：行与行之间的距离，它影响元素内文本的垂直间距，通常用于提高可读性

和视觉布局的美观性。

value：值可以为：数字、百分比、长度单位和关键字值。

例如：

line-height: 1.2;        /* 它表示行高是字体大小的倍数 */

line-height: 150%; /* 它表示行高是字体大小的百分比 */

line-height: 20px;   /* 它表示具体的长度 */

line-height: normal;    /* 它表示浏览器的默认行高，一般为字体大小的1.2到1.4倍 */

7、字符间距

语法：letter-spacing：value

特点：用于控制文本字符之间的间距，它可以增加或减少字符之间的空白，

使文本更具可读性或产生特定的视觉效果。

value：可以使用任何有效的CSS长度单位，如px、em、rem、%等。

正值会增加字符间距，负值会减少字符间距。

例如：

letter-spacing:2px;

8、边框线

语法：border：width style color

特点：通过边框属性，你可以定义边框的宽度、样式和颜色，

使元素更加醒目和具有层次感。 border是由四个子属性组成

（ border-top+ border-right+ border-bottom+ border-left），

value是由三个子属性组成（ border-width+ border-style+ border-color）,

以上子属性也是都可以单独使用。

value：

width：宽度，值为数字，单位像素（px）
style：样式
- none：无边框
- solid：实线
- dashed：虚线
- dotted：点线
- double：双线
- groove： 3D凹槽
- ridge： 3D凸起
- inset： 3D嵌入
- outset： 3D凸出
color：颜色

例如：

border: 1px solid red;

border-top:red;

border:1px solid;

border-style:solid;

border-width:10px;

border-color:red;

9、边框圆角

语法：border-radius：value

特点：可以设置圆角边框，使元素的角变得圆滑。

value：值为数字像素（px），1个值：所有角，2个值：第一个值为左上和右下，

第二个值为右上和左下，4个值：第一个值为左上，第二个为右上，第三个为右下，

第四个为左下。

例如：

    border-radius: 10px;                  /* 所有角的半径为10px */

    border-radius: 10px 20px;          /* 左上和右下角半径为10px，右上和左下角半径为20px */

    border-radius: 10px 20px 30px 40px;        /* 各个角的半径分别为，左上：10px,

                                                                        右上：20px, 右下：30px, 左下40px */

10、字体样式

语法：font-family：value

特点：字体系列指的是一组具有相似设计特征的字体，例如Arial、Times New Roman

等，使用'font-family'属性可以指定文本内容使用特定的字体或字体列表，以确保在不

同设备和浏览器中具有一致的外观。

value：优先级字体列表。

例如：

font-family: "Arial", "Helvetica", sans-serif;

11、字体粗细

语法：font-weight：value

特点：这个属性可以接受多个值，包括预定义的关键字和数值。通过调整字体的粗细，可以

改变文本的视觉效果，突出显示重要内容或达到特定的设计目的。

value：

关键字值：
- normal：标准粗细，通常对应400
- bold：粗体，通常对应700
- bolder：相对于父元素的字体粗细，更粗
- lighter：相对于父元素的字体粗细，更细
数值
- 具体的数值范围从100到900，每100为一个增量。通常使用的数值有400（相当于normal）和700（相当于bold）
- 某些字体可能不支持所有这些数值，当指定的数值不支持时，浏览器会选择最接近的可用值

例如：

font-weight: bold;

font-weight: 100;

12、浮动

语法：float：value

特点：浮动元素会左右移动直到它碰到包含它的父元素或另一个浮动元素的边缘。

value：

left：元素向左浮动
right：元素向右浮动
inherit：元素的浮动属性将继承其父元素的‘float’属性值

例如：

float: left;

13、清除浮动

语法：clear：value

特点：当使用浮动元素时，有时需要清除浮动，以确保容器元素能够包含浮动元素。这可以

通过使用clear属性来实现。

value：

none：默认值。元素允许浮动元素位于它的两侧
left：元素左侧不允许有浮动元素
right：元素右侧不允许有浮动元素
both：元素两侧都不允许有浮动元素
inherit：元素的清除属性将继承其父元素的clear属性值

例如：

clear: both;

14、背景颜色

语法：background-color：value

特点：这是一个常用属性，可以为元素提供视觉上的分隔和装饰，

使页面更具吸引力和层次感。

value：值表示方式可以为：十六进制，RGB，RGBA，HSL，HSLA，预定义颜色例如‘red’，

也可以设置 ‘inherit’ 来继承父元素的背景颜色。

例如：

background-color: blue;

background-color: rgb(255, 0, 0);

background-color: inherit;

background-color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */

15、背景图片

语法：background-image：value

特点：通过这个属性，可以将图像应用到元素的背景上，从而丰富网页的视觉效果。

value：url('图片的路径')

例如：

background-image: url('example.jpg');

16、背景图片是否重复

语法：background-repeat：value

特点：为了更好地控制背景图像的显示效果，可以与其他背景相关属性结合使用。

value：

repeat：默认值，背景图像在水平和垂直方向重复
no-repeat：背景图像不重复
repeat-x：背景图像在水平方向重复
repeat-y：背景图像在垂直方向重复

例如：

background-repeat: no-repeat;

17、背景图片的位置

语法：background-position：value

特点：定位背景图片具体展示位置。

value：可以使用关键词（如 top, bottom, left, right, center）或具体的坐标值

（如 50% 50%, 10px 20px）

例如：

background-position: center;

18、背景图片的尺寸

语法：background-size：value

特点：指定背景图片的尺寸。

value：

auto：默认值，保持图像的原始尺寸
cover：缩放背景图像以完全覆盖元素背景区域
contain：缩放背景图像以使其在元素背景区域内完全显示

例如：

background-size: cover;

19、背景图片的滚动行为

语法：background-attachment：value

特点：指定北京图片的滚动行为。

value：

scroll：默认值，背景图像随元素内容滚动
fixed：背景图像固定，不随内容滚动
local：背景图像随元素内容滚动

例如：

background-attachment: fixed;

20、背景图片的定位区域

语法：background-origin：value

特点：指定背景图像的定位区域。

value：

padding-box：背景图像相对于元素的内边距框定位
border-box：背景图像相对于元素的边框框定位
content-box：背景图像相对于元素的内容框定位

例如：

background-origin: content-box;

21、背景图片绘制区域

语法：background-clip：value

特点：定义背景绘制的区域。

value：

border-box：背景延伸到边框外沿
padding-box：背景延伸到内边距外沿，不包括边框
content-box：背景只延伸到内容区

例如：

background-clip: padding-box;

22、光标样式

语法：cursor：value

特点：用于指定当鼠标指针悬停在元素上时所显示的光标样式。这不仅可以增强用户体验，

还可以传达特定的交互意图。

value：

default：默认光标，通常是一个箭头
pointer：手形光标，通常用于指示可点击的链接
text： I型光标，通常用于指示文本输入区域
move：移动光标，通常用于指示可移动的元素
not-allowed：禁止光标，通常用于指示不可操作的元素
wait：等待光标，通常用于指示操作正在进行中
help：帮助光标，通常用于指示有可用的帮助信息
crosshair：十字准星光标
grab 和 grabbing：抓取和抓取中光标，通常用于拖动操作
url路径：可以使用自定义图像作为光标，但需要指定图像的URL。为了兼容性，最好提供一个备用的预定义光标

例如：

cursor: pointer;

cursor: url('custom-cursor.png'), auto;

element {

cursor: grab;

}

element:active {

cursor: grabbing;

}

兼容性注意：

自定义光标：使用自定义光标时，需要确保图像的大小适当（推荐32x32像素），以保证兼容性和显示效果。若指定的图像无法加载，浏览器会显示备用的预定义光标。
浏览器支持：大多数现代浏览器都支持cursor属性中的预定义值和自定义URL。但某些旧版本的浏览器可能对某些值支持不佳。

23、显示隐藏/转换特性

语法：width：value

特点： CSS中的display属性用于定义元素生成的框的类型。它是CSS中最基础和最重要的属

性之一，控制着元素的布局和显示方式。不同的display值会改变元素在页面上的布局

行为以及与其他元素的关系。

value：

block：
- 元素显示为块级元素，占据其父容器的整个宽度，并在其前后创建换行
- 示例：<div>, <p>, <h1> 等
inline：
- 元素显示为内联元素，只占据其内容的宽度，不会在其前后创建换行
- 示例：<span>, <a>, <strong> 等
inline-block：元素显示为内联块级元素，既具有内联元素的排版特性，也具有块级元素的可设置宽高特性
none：元素完全隐藏，不占据任何空间，不参与文档流
flex：元素作为弹性盒子容器（Flex容器），其子元素作为弹性盒子项（Flex项）进行布局
inline-flex：元素显示为内联弹性盒子容器，行为类似于flex，但本身是内联元素
grid：元素作为网格容器，其子元素作为网格项进行布局
inline-grid：元素显示为内联网格容器，行为类似于grid，但本身是内联元素
table：
- 元素显示为表格容器，其子元素显示为表格行、表格单元等
- 示例：<table> 等
table-row：
- 元素显示为表格行
  - 示例：<tr> 等
table-cell：
- 元素显示为表格单元格
- 示例：<td>, <th> 等

例如：

display: block;

display: none;

display: inline-grid;

24、列表标记类型

语法：list-style-type：value

特点：用于设置列表项标记的类型（如圆点、数字、字母等）。它适用于有序列表（<ol>）

和无序列表（<ul>）的列表项（<li>）。

value：

disc：实心圆（默认值）
circle：空心圆
square：实心方块
decimal：十进制数字（1, 2, 3, ...）
lower-roman：小写罗马数字（i, ii, iii, ...）
upper-roman：大写罗马数字（I, II, III, ...）
lower-alpha：小写字母（a, b, c, ...）
upper-alpha：大写字母（A, B, C, ...）
none：消除列表项标记

例如：

list-style-type: square;

list-style-type: none;

25、列表标记位置

语法：list-style-position：value

特点：用于设置列表项标记相对于列表内容的位置。它适用于有序列表（<ol>）和无序列表

（<ul>）的列表项（<li>）。

value：

outside：标记在列表项之外（默认值）
inside：标记在列表项内容的内部

例如：

list-style-position: inside;

26、列表标记自定义图片

语法：list-style-image：value

特点：用于设置自定义图像作为列表项的标记。它适用于有序列表（<ol>）和无序列表

（<ul>）的列表项（<li>）。

value：url(图片的地址)

例如：

list-style-image: url('custom-marker.png');

27、透明度

语法：opacity：value

特点：它控制元素内容和背景的透明度，使得可以创建具有透明效果的元素。opacity属性的

值在0到1之间，0表示完全透明，1表示完全不透明。

value：数字0-1

例如：

opacity: 0.5; /* 半透明 */

28、文本装饰线

语法：text-decoration-line：value

特点：用于设置文本的装饰线类型。可以组合多个值。

value：

none：无装饰线
underline：下划线
overline：上划线
line-through：贯穿线（删除线）

例如：

text-decoration-line: underline;

29、文本装饰线颜色

语法：text-decoration-color：value

特点：用于设置装饰线的颜色。

value：值表示方式可以为：十六进制，RGB，RGBA，HSL，HSLA，预定义颜色例如‘red’。

例如：

text-decoration-color: red;

30、文本装饰线样式

语法：text-decoration-style：value

特点：用于设置装饰线的样式。

value：

solid：实线（默认值）
double：双线
dotted：点线
dashed：虚线
wavy：波浪线

例如：

text-decoration-style: dashed;

31、内容溢出

语法：overflow：value

特点： overflow属性用于指定当内容溢出元素的盒子时该如何处理。它可以控制水平和垂直

方向上的内容溢出行为。overflow属性有几个常用的值，每个值都有不同的效果。

也可以单独控制水平和垂直，‘overflow-x’ 和 ‘overflow-y’ 。

value：

visible：
hidden：
scroll：
auto：
clip：

例如：

overflow: auto;

overflow-x: scroll;

overflow-y: auto;

32、定位

语法：position：value

特点： position属性用于设置元素在文档中的定位方式。它定义了一个元素在网页布局中的定

位策略。

value：

static：默认值。元素按照文档的正常流进行定位，不受top、right、bottom、left属性的影响。
relative：元素相对于其正常位置进行定位。可以使用top、right、bottom、left属性进行偏移，但不影响其他元素的布局。
absolute：元素相对于最近的已定位祖先元素（非static）的定位上下文进行定位。如果没有已定位的祖先元素，

则相对于初始包含块（通常是html元素）进行定位。使用top、right、bottom、left属性进行绝对定位。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。使用top、right、bottom、left属性进行固定定位。
sticky：元素在正常流中是相对定位的，但在用户滚动到特定位置时变为固定定位。使用top、right、bottom、left属性定义何时应“粘附”在视口上。

例如：

position: sticky;

33、外边距

语法：margin：value

特点： margin属性用于设置元素周围的外边距，它决定了元素与相邻元素或其包含块之间的

距离。也可以单独设置每个方向的外边距：‘ margin-top’，‘ margin-right’，

‘ margin-bottom’，‘ margin-left’ 。

value：数字，单位像素（px）;百分比（%）；也可以使用关键字‘auto’：自动居中。

例如：

margin: 10px 20px 30px 40px;      /* 顺时针顺序：上、右、下、左 */

margin: 10px 20px 30px;               /* 上、左右、下 */

margin: 10px 20px;                        /* 上下、左右 */

margin: 20px;                                 /* 所有方向 */

margin-top: 10px;                         /* 上 10像素 */

margin-right: 20px;                       /* 右 20像素*/

34、内边距

语法：padding：value

特点： padding 属性用于设置元素内容与其边框之间的内边距。它决定了元素内容和边框之

间的距离。也可以单独设置每个方向的外边距：‘padding-top’，

‘padding-right’，‘padding-bottom’，‘padding-left’ 。

value：数字，单位像素（px）;百分比（%）；也可以使用关键字‘auto’：自动居中。

例如：

padding: 10px 20px 30px 40px;       /* 顺时针顺序：上、右、下、左 */

padding: 10px 20px 30px;               /* 上、左右、下 */

padding: 10px 20px;                        /* 上下、左右 */

padding: 20px;                                 /* 所有方向 */

padding-top: 10px;                         /* 上 10像素 */

padding-right: 20px;                       /* 右 20像素*/