CSS基础知识01 - 技术栈

一、定义

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用于描述HTML文档的呈现和美化内容。

二、css的引入方式

2.1.内联样式（行内样式）

直接在HTML元素的style属性中添加CSS样式。这种方式只适用于单个元素，且不利于样式的复用和维护。例如：

html 复制代码

<div style="width:100px; height:100px; background-color:blue;"></div>

2.2.内部样式

在HTML文档的<head>部分使用<style>标签定义CSS样式。这种方式适用于单个HTML文档，样式只在该文档中生效。例如：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <p>页面内容</p>
</body>
</html>

2.3.外部样式

将CSS样式定义在一个独立的.css文件中，然后在HTML文档的<head>部分使用<link>标签引入该CSS文件。这是最常见且推荐的方式，因为它实现了样式与内容的分离，提高了样式的复用性和可维护性。例如：

html 复制代码

<!--html文件-->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>外部样式表</p>
</body>
</html>

CSS文件（styles.css）：

css 复制代码

//css文件
p {
    font-size: 50px;
    color: red;
}

2.4.导入样式

使用CSS的@import规则引入外部的CSS文件。但这种方式不如<link>标签常用，因为@import会导致CSS文件在HTML文件加载完成后才被加载，且在某些旧版浏览器中可能不被支持。例如：

html 复制代码

<style>
    @import url("styles.css");
</style>

三、选择器

3.1.标签选择器

定义：选择具有特定HTML标签的元素。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器示例</title>
    <style>
        /* 使用标签选择器选中所有的<p>元素，并设置它们的文本颜色为蓝色 */
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落，文本颜色为蓝色。</p>
    <p>这是另一个段落，同样文本颜色为蓝色。</p>
</body>
</html>

3.2.类选择器

定义：选择具有指定类的元素，并将样式应用于这些元素。类选择器以.开头，后面跟类名。

可以为多个元素指定相同的类名，并为这些元素应用相同的样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器示例</title>
    <style>
        /* 使用类选择器选中所有class为"highlight"的元素，并设置它们的背景颜色为黄色 */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个带有highlight类的段落，背景颜色为黄色。</p>
    <div class="highlight">这是一个带有highlight类的div元素，同样背景颜色为黄色。</div>
</body>
</html>

3.3.ID选择器

定义：选择具有指定ID的元素，并将样式应用于该元素。ID选择器以#开头，后面跟ID名。由于ID在HTML文档中具有唯一性，因此ID选择器通常用于选中单个元素。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器示例</title>
    <style>
        /* 使用ID选择器选中ID为"uniqueElement"的元素，并设置它的字体大小为24px */
        #uniqueElement {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p id="uniqueElement">这是一个带有唯一ID的段落，字体大小为24px。</p>
    <p>这是另一个段落，不受ID选择器影响。</p>
</body>
</html>

3.4.属性选择器

定义：选择具有指定属性的元素，并将样式应用于这些元素。属性选择器以[]表示，里面包含属性名和属性值（可选）。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器示例</title>
    <style>
        /* 使用属性选择器选中所有具有title属性的元素，并设置它们的边框为1px实线黑色 */
        [title] {
            border: 1px solid black;
        }

        /* 使用属性选择器选中title属性值为"example"的元素，并设置它们的背景颜色为灰色 */
        [title="example"] {
            background-color: gray;
        }
    </style>
</head>
<body>
    <p title="example">这是一个带有title属性且值为"example"的段落，有边框和灰色背景。</p>
    <p title="another">这是一个带有title属性但值不为"example"的段落，只有边框。</p>
    <div title>这是一个带有title属性但没有指定值的div元素，同样只有边框。</div>
</body>
</html>

3.5.通配符选择器

定义：通配符选择器使用星号（*）来选择HTML文档中的所有元素。它通常用于应用全局样式或重置样式。

html 复制代码

<style>
  /* 选择所有元素，并设置它们的margin和padding为0 */
   * {
      margin: 0;
      padding: 0;
   }
</style>
<body>
    <p>这是一个段落。</p>
    <div>这是一个div元素。</div>
    <!-- 所有元素都将应用上面的样式 -->
</body>

3.6.后代选择器

定义：后代选择器用于选择某个元素内部的所有指定后代元素，无论这些后代元素位于多少层嵌套之内。后代选择器通过空格分隔两个选择器来表示。

html 复制代码

<style>
    /* 选择div元素内部的所有p元素，并设置它们的文本颜色为绿色 */
    div p {
        color: green;
    }
</style>
<body>
    <div>
        <p>这是一个段落，位于div内部，文本颜色为绿色。</p>
        <!-- 其他元素 -->
    </div>
</body>

3.7.子代选择器

定义：子代选择器用于选择某个元素的直接子元素。子代选择器通过大于号（>）分隔两个选择器来表示

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器示例</title>
    <style>
        /* 选择div的直接子元素p，并设置它们的文本颜色为蓝色 */
        div > p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个段落，是div的直接子元素，文本颜色为蓝色。</p>
        <div>
            <p>这是另一个段落，但不是div的直接子元素，不受子代选择器影响。</p>
        </div>
    </div>
</body>
</html>

3.8.并集选择器

定义：并集选择器用于选择多个选择器所匹配的元素。并集选择器通过逗号（,）分隔多个选择器来表示。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器示例</title>
    <style>
        /* 选择p元素和div元素，并设置它们的字体大小为16px */
        p, div {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个段落，字体大小为16px。</p>
    <div>这是一个div元素，同样字体大小为16px。</div>
</body>
</html>

3.9.交集选择器

定义：交集选择器用于选择同时匹配多个选择器的元素。交集选择器通过将多个选择器放在一起（没有分隔符）来表示。注意，交集选择器通常用于选择具有特定类名或属性，并且同时属于特定HTML标签的元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器示例</title>
    <style>
        /* 选择同时是p元素且class为special的元素，并设置它们的背景颜色为黄色 */
        p.special {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="special">这是一个特殊的段落，背景颜色为黄色。</p>
    <p>这是一个普通的段落，不受交集选择器影响。</p>
</body>
</html>

3.10伪类选择器

定义：伪类选择器用于选择元素的特定状态或位置。伪类选择器通常以冒号（:）开头，后跟伪类名称（有些伪类如:not()使用函数语法）。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器示例</title>
    <style>
        /* 选择鼠标悬停状态的a元素，并设置它们的文本颜色为红色 */
        a:hover {
            color: red;
        }

        /* 选择第一个p元素，并设置其字体加粗 */
        p:first-of-type {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接，鼠标悬停时文本颜色变为红色。</a>
    <p>这是第一个段落，字体加粗。</p>
    <p>这是第二个段落，不受伪类选择器影响。</p>
</body>
</html>

3.11.属性选择器（css3）

允许根据元素的属性及其值来选择元素。属性选择器可以非常灵活和强大，让你能够选择具有特定属性、属性值或特定属性特性的元素

1.存在属性选择器（attr）

选择具有指定属性的所有元素

css 复制代码

[title] {
    color: blue;
}
//选择所有具有title属性的元素

2.属性值选择器

选择具有指定属性且属性值完全等于指定值的所有元素

css 复制代码

[type="text"] {
    border: 1px solid #ccc;
}

3.属性值包含选择器（[attr~=value]）：

选择具有指定属性且属性值包含指定单词的所有元素（单词以空格分隔）

css 复制代码

[class~="example"] {
    background-color: yellow;
}

选择所有 class 属性包含单词 example 的元素，例如 class="foo example bar"。

4.属性值开头选择器 （[attr^=value]）：

选择具有指定属性且属性值以指定值开头的所有元素。

css 复制代码

[href^="https"] {
    color: red;
}

5.属性值结尾选择器 （[attr$=value]）：

选择具有指定属性且属性值以指定值结尾的所有元素。

css 复制代码

[src$=".png"] {
    border: 2px solid black;
}

6.属性值包含选择器（子字符串匹配） （[attr*=value]）：

选择具有指定属性且属性值包含指定值的所有元素（不区分单词边界）

css 复制代码

[name*="user"] {
    font-weight: bold;
}

7.属性值大小写敏感选择器 （[attr|=value]）：

选择具有指定属性且属性值以指定值开头且紧跟一个连字符（-）的所有元素，或者属性值完全等于指定值（适用于语言代码选择）

css 复制代码

[lang|="en"] {
    color: green;
}

8.属性值否定选择器 （[attr!=value]）：

选择具有指定属性且属性值不等于指定值的所有元素。

css 复制代码

[type!="text"] {
    background-color: lightgray;
}

四、元素特性

4.1.三种元素

1.块级元素：独占一行，并且可以设计宽高

常见块级元素：div : 布局容器；h1~h6：h1标题最大，h6标题最小；p标签：段落标签；table：表格；form：表单容器；ul li :无需列表；ol li ：有序列表；dl dt dd：自定义列表；hr标签:水平线

2.行级元素：在同一行显示，不可以设置宽高，宽度由内容决定，可以与其他行内元素一起在同一行上显示。

常见行级元素：a：超链接；span:修饰文本标签；sub：下标；sup：上标；label：行元素；strong或者b标签：字体加粗；em或者i：字体倾斜；ins或者u：下划线；del或者s：删除线

3.行块级元素：在同一行显示，并且可以设置宽高

常见行块元素：img：图片标签；input：表单元素

4.2.切换元素特性

display：none；

属性名	属性值
display	none	元素不会在页面上显示，也不会占据任何空间。
display	inline	元素会被显示为内联元素。内联元素不会独占一行，它们的宽度只由其内容决定，并且可以和其他内联元素在同一行上显示。
display	block	元素会被显示为块级元素。块级元素会独占一行，
display	inline-block	结合了内联元素和块级元素的特点。元素像内联元素一样在同一行上显示，但可以设置宽度和高度。
（拓展）	flex （以后会常用）	将元素设置为弹性盒模型（flexbox）容器，允许其子元素以灵活的方式排列和布局。
（拓展）	grid	将元素设置为网格布局（grid layout）容器，允许其子元素在二维网格中排列和布局。

五、css的单位

5.1.单位类型与特性

5.1.1.绝对单位

1.像素（px）：

特性：固定大小，不随视口变化

应用场景：图标、图标、边框等固定大小的元素。

注意事项：在高分辨率屏幕上，可能导致页面元素显得过小或模糊

2.毫米、厘米、英寸（in）：

特性：给予物理尺寸，适用于打印样式表

应用场景：需要精确控制打印输出布局时使用

注意事项：在网页设计中较少用到，因为屏幕显示与物理尺寸存在差异

3.点（pt）、派卡（pc）：

特性：印刷行业常用单位，1pt等于1/72英寸，1pc等于12点

应用场景：在需要精准控制打印输出布局时使用

注意事项：同样在网页设计中不常见

5.1.2.相对单位

1.百分比（%）

特性：相对于父元素的尺寸来定义。

应用场景：流体布局，是元素尺寸可以根据父容器的大小变化。

注意事项：对于未设置宽度的元素，百分比无效；多层嵌套元素时，尺寸计算相对复杂。

2.em：

特性：相对于元素的字体大小来定义，如果当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。

应用场景：字体大小的缩放，以字体大小为基准的元素尺寸调整

注意事项：继承关系复杂，多层嵌套时计算量大；可能收到父元素字体大小的影响。

3.rem：

特性：相对于根元素（即html元素）的字体大小来定义

应用场景：在保持一致性的同时进行全局尺寸调整，适应响应式设计

注意事项：不会收到父元素字体大小的影响，提供了一个更稳定、更可预测的度量方式。

4.ex和ch：

特性：ex是字体中消协字母x的高度，ch是给予数字0的宽度计算的

应用场景：在需要给予字体尺寸进行布局时使用

注意事项：使用较少，因为它们的值取决于元素的font-size和font-family属性

5.1.3.视口单位

vw（视口宽度百分比）：

特性：表示视口宽度的百分比。

应用场景：创建响应式布局，使元素宽度与视口宽度成比例。

注意事项：对于老旧浏览器（如IE9及以下版本）不支持。

vh（视口高度百分比）：

特性：表示视口高度的百分比。

应用场景：创建响应式布局，使元素高度与视口高度成比例。

注意事项：同样需要注意老旧浏览器的兼容性。

vmin和vmax：

特性：vmin表示视口宽度和高度中的较小值的百分比，vmax表示较大值的百分比。

应用场景：在不同屏幕尺寸下提供更加平衡的尺寸调整。

注意事项：同样需要考虑浏览器兼容性。

5.2.单位的选择与应用

1.根据需求选择单位：

在进行网页设计时，需要根据具体需求选择合适的单位。例如，对于需要精确控制的尺寸，可以选择像素（px）或绝对长度单位；对于需要根据字体大小来调整的尺寸，可以选择em或rem单位；对于需要根据视口大小来调整的尺寸，可以选择vw、vh、vmin或vmax单位。

2.考虑浏览器兼容性：

在选择单位时，还需要考虑浏览器的兼容性。例如，老旧浏览器可能不支持某些新的CSS单位（如vw、vh等）。因此，在进行网页设计时，需要确保所选单位在目标浏览器上都能得到良好的支持。

3.结合使用多种单位：

在实际开发中，可以结合使用多种单位来实现更加灵活和可适应不同设备的布局。例如，可以使用像素（px）来定义固定大小的元素，使用百分比（%）来定义相对大小的元素，使用vw或vh来定义与视口大小成比例的元素等。

六、文本相关属性

6.1.常见文本属性

CSS（层叠样式表）提供了多种用于设置文本样式的属性。以下是一些常见的文本相关属性及其用途：

color：设置文本的颜色。

css 复制代码

p {
    color: #333;
}
/*本文最后会简单讲一下关于颜色#333的相关内容
无基础的同学可以看一下*/

font-family：设置文本的字体族。

css 复制代码

p {
    font-family: Arial, sans-serif;
}

font-size：设置文本的字体大小。

css 复制代码

p {
    font-size: 16px;
}

font-weight：设置文本的粗细。

css 复制代码

p {
    font-weight: bold; 
/* 其他值包括 normal, lighter, bolder, 100-900（以100为增量） */
}

font-style：设置文本的字体样式（正常、斜体或倾斜）。

css 复制代码

p {
    font-style: italic; /* 其他值包括 normal 和 oblique */
}

text-align：设置文本的对齐方式（左对齐、右对齐、居中对齐或两端对齐）。

css 复制代码

p {
    text-align: center; /* 其他值包括 left, right, justify */
}

text-decoration：设置文本的装饰（如下划线、上划线、贯穿线等）。

css 复制代码

a {
    text-decoration: none; 
/* 其他值包括 underline, overline, line-through, blink（不推荐使用） */
}

text-transform：控制文本的大小写（全部大写、全部小写或首字母大写）。

css 复制代码

p {
    text-transform: uppercase; /* 其他值包括 lowercase 和 capitalize */
}

line-height：设置文本行高。

css 复制代码

p {
    line-height: 1.5; /* 可以是数值、百分比或长度单位 */
}

letter-spacing：设置字符间距。

css 复制代码

p {
    letter-spacing: 2px; /* 可以是负值 */
}

word-spacing：设置单词间距。

css 复制代码

p {
    word-spacing: 4px; /* 可以是负值 */
}

font-variant：设置小型大写字母（小型大写字母通常用于标题）。

css 复制代码

p {
    font-variant: small-caps; /* 其他值包括 normal */
}

text-indent：设置文本首行缩进。

css 复制代码

p {
    text-indent: 30px; /* 可以是负值 */
}

text-shadow：设置文本阴影。

css 复制代码

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/*text-shadow:上 右 下 左（逆时针方向）rgba阴影可在浏览器上调*/
}

white-space：设置如何处理空白字符（如空格和换行）。

css 复制代码

pre {
    white-space: pre-wrap; /* 其他值包括 normal, nowrap, pre, pre-line */
}

overflow-wrap：设置长单词或URL是否应该被拆分换行。

css 复制代码

p {
    overflow-wrap: break-word; /* 其他值包括 normal, anywhere, break-all */
}

direction：设置文本的方向。

css 复制代码

p {
    direction: rtl; /* 从右到左，默认值为 ltr（从左到右） */
}

unicode-bidi ：与direction属性一起使用，用于设置文本嵌入的双向算法。

css 复制代码

p {
    unicode-bidi: bidi-override; /* 使用双向算法覆盖，默认值为 embed（使用嵌入的双向算法） */
}

writing-mode：设置文本在页面上的书写模式。

常用值：horizontal-tb（水平书写，从上到下）、vertical-lr（垂直书写，从左到右）、vertical-rl（垂直书写，从右到左）等。

css 复制代码

p {
    writing-mode: vertical-rl; 
/* 垂直书写，从右到左，其他值包括 horizontal-tb（水平书写，从上到下）、
vertical-lr（垂直书写，从左到右）等 */
}

text-overflow：当文本溢出包含它的元素框时，指定如何显示溢出的文本。

常用值：clip（剪切溢出文本，不显示）、ellipsis（显示省略号以表示文本被剪切）。

css 复制代码

p {
    text-overflow: ellipsis; /* 显示省略号以表示文本被剪切，其他值为 clip（剪切溢出文本，不显示） */
    white-space: nowrap;    /* 通常与 text-overflow 一起使用，防止文本换行 */
    overflow: hidden;       /* 隐藏超出容器的内容 */
}

overflow-wrap （或word-wrap，两者效果相同，但word-wrap是旧名称）：设置如何处理长单词或URL地址的换行。

css 复制代码

p {
    overflow-wrap: break-word; 
/* 在长单词或URL内部进行换行，默认值为 normal（只在允许的断行点换行） */
}

font-feature-settings：允许对OpenType字体中的特定特性进行低级控制。

需要指定要启用或禁用的特性的标签和值。

css 复制代码

p {
    font-feature-settings: "liga" 1, "dlig" 1;
/* 启用连字和离散连字特性，具体标签和值根据字体而定 */
}

font-kerning：控制字体中的字距调整（kerning）是否应用。

css 复制代码

p {
    font-kerning: none;
/* 不应用字距调整，默认值为 auto（根据字体和浏览器的设置自动应用字距调整） */
}

font-variant-alternates：控制字体的替代变体，如小型大写字母、分数字符等。

css 复制代码

p {
    font-variant-alternates: stylistic(1); 
/* 启用字体的某种样式变体，具体编号根据字体而定 */
}

font-variant-caps：控制字体的大小写形式，如小型大写字母、所有大写字母等。

常用值：normal（默认值）、small-caps（小型大写字母）、all-small-caps（所有字母均为小型大写字母）、petite-caps（比小型大写字母更小的变体，但并非所有字体都支持）等。

css 复制代码

p {
    font-variant-caps: all-small-caps; 
/* 所有字母均为小型大写字母，其他值包括 normal（默认值）、small-caps（小型大写字母）、
petite-caps（比小型大写字母更小的变体，但并非所有字体都支持）等 */
}

font-variant-numeric：控制数字的显示方式，如比例数字、衬线数字等。

css 复制代码

p {
    font-variant-numeric: tabular-nums; /* 使用表格数字显示，具体类型根据字体而定 */
}

font-variant-position：控制字体中字符的位置，如上标、下标等。

常用值：normal（默认值）、super（上标）、sub（下标）等。

css 复制代码

p {
    font-variant-position: super; /* 上标，其他值包括 normal（默认值）、sub（下标）等 */
}

**white-space:**设置如何处理空白字符（如空格和换行）

css 复制代码

pre {
    white-space: pre-wrap;
/* 保留空白符序列，但是正常地进行换行，其他值包括 normal（合并空白符，并允许自动换行）、
nowrap（合并空白符，但是不允许换行）、pre（保留空白符序列，并且不进行换行）、
pre-line（合并空白符，但是保留所有换行符） */
}

七、颜色

7.1.颜色的基本属性

色调：指颜色的种类，如红色、蓝色等。
饱和度：指颜色中灰色的含量。饱和度最大时，颜色中灰色的含量为零，颜色最鲜艳；饱和度最小时，颜色基本就是灰色。
亮度：指颜色中黑色的含量。亮度最大时，颜色中黑色的含量为零，颜色最亮；亮度最小时，颜色最暗。
对比度：指前景色与背景色之间的差异。差异越大，对比度越大，反之则越小。

7.2.颜色的表示方法

CSS支持多种颜色表示方法，包括色彩关键字、RGB色彩模式、HSL色彩模式等。

1、色彩关键字：如red、blue、green等，这些是不区分大小写的标识符，表示具体的颜色。

2、RGB色彩模式：使用红（Red）、绿（Green）、蓝（Blue）三个颜色的叠加来表示颜色。在CSS中，RGB色彩模式可以通过两种方式表示：

十六进制符号：#RRGGBB，其中RR、GG、BB分别表示红、绿、蓝三个颜色的值，取值范围为00~FF。例如，红色可以表示为#FF0000。

百分数或整数：rgb(red, green, blue)，其中red、green、blue分别表示红、绿、蓝三个颜色的值，取值范围为0255（整数）或0%100%（百分数）。例如，红色可以表示为rgb(255, 0, 0)或rgb(100%, 0%, 0%)。

3、HSL色彩模式：使用色调（Hue）、饱和度（Saturation）、亮度（Lightness）三个参数来表示颜色。在CSS中，HSL色彩模式通过hsl(H, S, L)函数实现，其中H表示色调，取值范围为0360（度数）；S和L表示饱和度和亮度，取值范围为0%100%（百分数）。例如，红色可以表示为hsl(0, 100%, 50%)。

7.3.颜色的透明度

在CSS中，除了可以设置颜色的色调、饱和度、亮度等属性外，还可以设置颜色的透明度。透明度的设置对于实现一些特殊效果非常有用。

RGBA色彩模式：在RGB色彩模式的基础上增加了一个alpha通道，用于表示颜色的透明度。alpha的取值范围为0.0（完全透明）到1.0（完全不透明）。例如，半透明的红色可以表示为rgba(255, 0, 0, 0.5)。
HSLA色彩模式：在HSL色彩模式的基础上也增加了一个alpha通道，用于表示颜色的透明度。用法与RGBA类似。

码字不易，希望亲爱的网友们给孩子点点赞~~谢谢啦

上述内容若有遗漏或不足之处，恳请各位大佬不吝赐教，指正并帮助美化，以期更加完善。