样式表

@CSS

简介 Overview

. CSS - Cascading Style Sheets，层叠样式表

. 美化页面：如何在屏幕、纸张或其他媒体上显示 HTML 元素

. 可以同时控制多个网页的显示

. 更多信息，请查看 CSS开发快速提升技巧、20个编写现代CSS代码的建议

. CSS由选择器选择器 - selector 和声明块 Declaration 组成

. 选择器：选择一个或多个元素，以便应用样式；选择器可以是标签、类、id等单一选择器或其它复合选择器

. 声明块：用花括号{} 括起来，由一条或多条规则rule构成，为选出来的元素指定样式；多条规则使用分号; 分隔

. 规则：每个规则都包含一个 CSS 属性名name和一个值value，以冒号: 分隔

[] 类名为warn的CSS样式，包含2条规则，指定了被选中的元素/应用该类样式的元素的颜色和字体重量/加粗

.warn {
    color: #eb2f06;
    font-weight: 600;
}

使用 Usage

行内样式/内联样式

. 使用 style 属性为元素定义样式

. 定义的样式仅适合于当前元素

. 行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式

. style 还可以指定内联变量供当前元素的样式使用；内联样式和内联变量互不影响

. 通常配合JS来动态改变

. 不符合结构-样式-逻辑分离的开发原则

内部样式

. 在 HTML 页面 <head> 区使用 <style> 定义样式

. 适用当前 HTML 页面多个元素

. 不可跨页面使用

. 不符合结构 → 样式 → 逻辑分离的开发原则

外部样式

. 样式在外部文件中定义；后缀 .css；可以使用任何文本编辑器编写

. 在 HTML 页面 <head> 中使用 <link> 引入样式文件

. 可以在样式文件中使用 @import 导入其它样式文件；应在样式文件首行引入

. 样式文件不能包含任何 HTML 标签

. 适合多个 HTML 页面、多个元素

. 可以缓存到本地，加快页面访问速度

. 符合结构 → 样式 → 逻辑分离的开发原则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS introduction</title>

    /* 外部样式 - link */
    <link rel="stylesheet" href="./css/style.css">

    /* 内部样式 - style */
    <style>
      /* 引入其它样式文件 */
      @import url(https://at.alicdn.com/t/c/font_3859342_yxk1peemmtq.css);

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .p-txt {
            /* 全局变量 */
            color: var(--txt-wran-color);
            /* 局部变量 */
            opacity: var(--sn);
        }
    </style>
</head>

<body>
  <!-- 内联样式 -->
  <h1 style="color: #F40;">hello, world</h1>
  <!-- 内联变量 -->
  <p class=“p-txt” style="--sn: 0.1;">第1段</p>
  <p class=“p-txt” style="--sn: 0.3;">第2段</p>
</body>

</html>

@charset "utf-8";
@import "./style.css";

:root {
    --txt-wran-color: #c81623;
    --nav-bg-color: #9f103a;
    --w-width: 1000px;
}

1. 几种形式的使用可以并存；最后哪个样式生效，由其代表的优先级决定，请参考后续内容和选择器 - selector

2. 编码：可以指定CSS文件的编码，特别是有中文存在时，必须指定；通常不需要指定，因为不推荐使用中文；指定编码必须在CSS文件第一行

3. 变量：可以声明CSS全局变量，便于修改和调整：一处修改，多处更新；还可以在元素上以style的形式声明内联变量；更多变量内容，请参考 CSS - variable

特性 Features

继承性

. 子元素会继承父元素的某些样式

. 不是所有的样式都可以被继承，特别是表单类元素和超链接 <a>，很多样式不会继承父元素

叠加性

. CSS文件是按照从上到下的顺序执行；因此，同一个元素的样式，后面的样式会覆盖前面的样式

. 特别要注意：样式的叠加和元素上样式类的书写顺序无关，和CSS文件中的顺序有关

. 有利于实现类的复用

. 同类型多个功能按钮往往需要先指定公共样式，包括静态样式、动态样式，再根据功能指定专有样式

优先级

. 一般来说，多个样式同时作用于一个元素时，由优先级决定

. 优先级高的样式会覆盖优先级低的；同时还要结合不同选择器 - selector 共同决定

. 样式异常或无效，请使用浏览器的开发者工具视图检查：按 F12 打开并检查

[] 样式顺序和书写顺序对结果的影响

.active-color {
    color: #f40;
}

.color {
    color: #000;
}
    
//颜色为黑色
<div class="active-color color">CSS的样式顺序</div>

//颜色为黑色
<div class="color active-color">CSS的样式顺序</div>

[] 复用类

grid：布局

container：大小

service-container：细节

<div class="service-container container grid"></div>

.grid {
  display: grid;
}

.container {
  max-width: 1000px;
  margin-inline: 3rem;
}

.service-container {
  row-gap: 1rem;
}

[] 复用类 - 第三方库

多个轮播图的使用

保证库约定类的基础上，叠加不同的类实现不同的内容轮播

更多信息，请访问轮播图 - Swiper

选择器 Selector

选择HTML元素，以便指定/应用样式; 可以选择一个元素；也可以选择多个元素
基本选择器: . 类型选择器 Type selectors：也叫标签选择器，如div span h1 header table footer ...；多用于样式初始化

. 类选择器 Class selectors：以点 . 开始，如 .wrap

. ID选择器 ID selectors：以井号 # 开始，如 #user

. 通配符选择器 Universal selectors：以星号 * 表示，代表所有元素

嵌套选择器 & nesting selector：以缩进的形式书写样式；新规范；注意浏览器的支持
属性选择器 Attribute selectors
伪元素 Pseudo-elements: ::before

::after

::first-letter

::first-line

::marker

::selection

::placeholder
伪类 Pseudo-classes: :hover

:target

:first-child

:last-child

:nth-child(n)

:has()

:not()

:root

:checked

:selected

:valid | :invalid

:focus | :focus-within
组合选择器 Combinators: . 列表选择器 Selector list：也叫并列选择器，适合多个元素应用同样的样式

. 后代选择器 Descendant combinator：所有后代元素

. 直接后代选择器 Child combinator：子元素

. 兄弟选择器 Subsequent-sibling combinator：以波浪线 ~ 表示，所有弟弟

. 相邻兄弟选择器 Next-sibling combinator：以加号 + 表示，相邻的弟弟

. 叠加选择器：为一个类再叠加一个样式，如.btn.goods、.wrap.active；多用于类的共享和动态类

属性 Properties

设置元素的CSS样式属性; 更多信息，请查看一些不好记却很好用的 CSS 属性、14 个非常实用的CSS属性技巧
自身属性: 元素类型：display: inline | inline-block | block | flex | grid

元素尺寸计算模式：box-sizing: content-box | border-box

宽度/高度：width max-width height max-height

填充：padding (top | right | bottom | left)

边距：margin (top | right | bottom | left)

边框：border (top | right | bottom | left)

背景：background

阴影：box-shadow
定位属性: 相对定位：relative

绝对定位：absolute

固定定位：fixed

粘性定位：sticky
布局属性: 浮动 float

弹性盒子 flex

网格 grid
字体属性: 字体：@font-face font font-size font-family font-weight

颜色：color

格式：text-align text-indent text-shadow text-decoration letter-spacing word-spacing

其它：vertical-align line-height white-space break-word writing-mode
特效类: 盒阴影：box-shadow

文字阴影：text-shadow

过渡动画：transition

帧动画：animation @keyframes

变换：transform

滤镜：filter
函数: rgb()、rgba()、hsl()

url()

attr()

var()

calc()

linear-gradient()、radial-gradient()、Conic-gradient()

clamp()

min()

max()

minmax()

repeat()
浏览器厂商前缀: 代码健壮性

更多信息，请查看 Can I Use

--webkit：谷歌 Chrome、欧鹏 Opera、苹果 Safari

--moz：火狐 Firefox

--ms：微软 Edge; CSS顺序：布局定位属性 → 自身属性 → 文本属性 → 其它属性