文章摘要： CSS是描述语言，网页标准三大组成部分之一的CSS，负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。

相关信息

外部相关文章

  • 参考第三方网站教程：Mmdn web docs，前端知识查询网站。
  • 有些标签有默认的CSS样式。

内部相关文章

简介

简要说明

  • CSS层叠样式表（Cascading Style Sheets）。
  • 用来描述HTML或XML文档样式的语言。
  • 将样式信息与结构化文档分离，使得网页的内容与其表现形式独立开来，从而可以更加灵活地控制页面的布局和外观。
  • 外部样式表通常存储在css文件中。
  • CSS文件的扩展名为.css。

主要功能

  • 样式定义：定义文本颜色、字体大小、边距、间距、背景图像等视觉效果。
  • 布局控制：控制元素的位置和大小，如使用Flexbox、Grid布局系统。
  • 响应式设计：通过媒体查询为不同设备和屏幕尺寸提供不同的样式。
  • 动画和过渡：创建平滑的动画效果和过渡效果，增强用户体验。
  • 主题定制：允许用户定义和应用不同的视觉主题。

注意事项

  • 层叠顺序：理解CSS的层叠规则，确保样式按预期覆盖。
  • 浏览器兼容性：不同浏览器对CSS的支持程度不同，需要考虑兼容性前缀或备选方案。
  • 性能优化：避免过度使用复杂的选择器和嵌套规则，减少重绘和重排，提高页面性能。
  • 可维护性：编写清晰、有组织的CSS代码，使用注释和合理的命名约定。
  • 可访问性：确保样式不会影响内容的可访问性，如足够的对比度和适当的字体大小。

适用场景

  • 网页设计：为网站提供一致的视觉风格和布局。
  • 用户界面设计：为Web应用程序和移动应用程序设计美观且功能性的用户界面。
  • 电子邮件设计：为电子邮件模板设计样式，尽管支持有限。
  • 打印样式：定义文档打印时的样式，以便打印输出与屏幕显示不同。
  • 跨平台应用：在构建跨平台应用程序时，CSS可用于确保在不同设备上的一致性表现。

语法格式

  • CSS每个语句结束后需要有;分号结尾。

注释

/* 这是一个注释*/

CSS样式查询手册

详细总结：CSS样式

CSS样式引入方式

行内（内嵌）样式

  • 在标签中写style属性，属性中写样式参数。
  • **代码冗余：**如果多个元素有相同的样式，你需要在每个元素上都添加相同的style属性，这会导致代码冗余。
  • **难以维护：**随着HTML文档的增长，内嵌样式的数量也会增加，这使得文档的维护变得更加困难。
  • **浏览器性能：**由于每个元素都有内嵌样式，浏览器需要为每个元素解析和应用样式，这可能会影响性能。
  • **可访问性问题：**内嵌样式可能不会被某些辅助技术（如屏幕阅读器）正确处理，这可能会影响可访问性。
<!--在一个元素标签中添加`style`属性-->
<label style="font-size: 100px;">测试文本内容</label>

内联样式

  • 当单个文档需要特殊的样式时，就应该使用内联样式表。你可以使用<style> </style>标签在文档<head> </head>头部定义内部样式表。
<head>
    <!--内联样式-->
    <style>
        lable {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <label>测试文本内容</label>
</body>

外联样式

  • 将样式放在外部，内容与样式分离。
/* 外联样式*/
lable {
    font-size: 100px;
}

<head>
    <!--外联样式-->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <label>测试文本内容</label>
</body>

样式优先级

  • 就近原则
  • 行内 > 内联 > 外联

选择器

详细总结：CSS选择器

<head>
    <!--外联样式-->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <label>测试文本内容</label>
    <label id="ID01">测试文本内容</label>
    <label class="class01">测试文本内容</label>
    <a class="class02" href="https://www.baidu.com/">百度搜索</a>
</body>

元素（标签）选择器

  • 选择器的名字必须是标签的名字。
  • 作用是选择器中的样式会作用于所有相同标签上。
label {
    /*样式属性和参数*/
}

id选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  • HTML元素以id属性来设置id选择器。
  • CSS 中 id 选择器以#井号来表示。
  • id名称不能重复，即不能重复在不同的元素中使用同一个id名称。
#ID01 {
    /*样式属性和参数*/
}

<head>
    <!--外联样式-->
    <link rel="stylesheet" href="./style.css">
</head>

class选择器

  • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  • class 选择器在 HTML 中以 class 属性表示。
  • 在 CSS 中，class选择器以一个.点号表示。
.class01 {
    /*样式属性和参数*/
}

组合选择器

并列选择器

  • 使用,逗号隔开。
.class01, .class02 {
    /*样式属性和参数*/
}

后代选择器

  • 选择指定元素内的所有后代元素。
  • 使用``空格分割。
body .class02 {
    /*样式属性和参数*/
}

子元素选择器

  • 选择指定元素的直接子元素/儿子级。
  • 使用>大于号表示。
body > .class02 {
    /*样式属性和参数*/
}

相邻同胞选择器

  • 选择紧随其后的第一个同胞元素。
  • 使用+加号。
label + .class02 {
    /*样式属性和参数*/
}

后续同胞选择器

  • 选择所有跟随其后的同胞元素。
  • 使用~波浪号。
label ~ .class02 {
    /*样式属性和参数*/
}

伪类选择器

  • CSS伪类是用来添加一些选择器的特殊效果。
/*外联样式*/
/*选择`.class02`元素，是一个超链接元素的为访问链接状态*/
.class02: link {
    /*定义该状态下的样式*/
}

伪元素选择器

  • 创建虚拟元素（伪元素），用来摆放装饰性的内容。

盒子模型

  • 所有HTML元素都可以看作一个盒子，并且占据着一定的页面空间。
  • CSS盒子模型本质上是一个盒子，封装周围的HTML元素。包含了边距、边框、填充、实际内容。、
  • 盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。

盒子模型的组成部分

  • **content内容：**盒子模型中最内部分，显示文本和图像，有宽度width和高度height的属性。
  • **padding内边距：**直接包围内容，默认透明，内边距呈现了元素的背景，它的边缘是边框。
  • **border边框：**围绕在内边距以外的是边框。
  • **margin外边距：**清除边框外的区域，外边距默认是透明的，不会遮挡其后的任何元素。 ==盒子模型的图片==

一个页面有很多这样的盒子组成，这些盒子之间会互相影响，需要从一下两个方面进行理解：

  1. 理解单独一个盒子的内部结构。
  2. 理解多个盒子之间的相互关系。
  • 内边距影响其他元素与自身的边距。
  • 内边距影响自身的尺寸。
  • 内边距会影响尺寸设置。
  • 盒子中的内容尺寸会影响尺寸设置。

文档流

  • 文档流是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式排列。
  • 块级元素：有宽度和高度，独占一行，默认按照从上而下的方式布局。
  • 行内元素：没有宽度和高度，默认的宽度就是文字的宽度，与其他元素并排，遇到边界或宽度不够时自动换行。

显示模式/布局

显示模式分为：none隐藏、inline行内、block块级、inline-block行内块级、flex弹性。

none隐藏

  • 隐藏不显示，且不占空间。

inline行内

  • 不能设置宽高属性。

block块级

  • 能够设置宽高属性，且独占一行。
  • 宽度默认是父级的100%。

inline-block行内块级

  • 能够设置宽高属性，且不会独占一行。

flex弹性

  • 适合结构化布局，提供空间分布和对齐能力。
  • 不会产生浮动布局中脱标现象。
  • 弹性容器，当尺寸不够时，会对元素尺寸进行拉伸。

定位

  • 定位就是把指定的元素放在页面任意位置，允许定义的元素框相对于其正常位置应该出现的位置，或相对浏览器窗口本身的位置。

static默认定位

  • HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  • 块级元素：自上而下，垂直排列（自动换行），可以改变宽度和高度。
  • 行内元素：从左往右，水平排列（不会换行），不能改变宽度和高度。
  • 行内块元素：从左往右，水平排列（不会换行），可以改变宽度和高度。

fixed固定定位

  • 元素的位置相对于浏览器窗口是固定位置。
  • 即使窗口是滚动的它也不会移动。
  • 固定定位使元素的位置与文档流无关，因此不占据空间。
  • 固定定位的元素和其他元素重叠。

relative相对定位

  • 针对父极元素的位置进行定位。

absolute绝对定位

  • 绝对定位的元素的位置是针对顶级父极（<html>）元素的位置进行定位。
  • 绝对定位使元素的位置与文档流无关，因此不占据空间。
  • 绝对定位的元素和其他元素重叠。

sticky粘性定位

  • 粘性定位的元素是依赖于用户的滚动，在相对定位与固定定位之间切换。
  • 一开始处于相对定位，当页面滚动超出目标区域时，将切换为固定定位固定在一个位置。

浮动

  • CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
更新时间: