跳转至

引言

Cascading Style Sheet,层叠样式表,为 HTML 网页添加样式

由选择器和声明组成,声明由属性和值组成,声明以分号结尾,放在花括号中

selector {
    property1: value;
    property2: value;
}

样式优先级

  • 内联样式 > 内部样式 > 外部样式 > 浏览器自定义/插件样式 > 浏览器默认样式
  • ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器
  • 优先级相同时,后出现的会覆盖先出现的
  • 添加了 !important 的样式具有最高优先级

引入方式

内联样式

直接在元素的标签中使用 style 属性添加样式

<html>
    <head>
        ...
    </head>
    <body>
        <p style="color: red; font-size: 20px;"> 
            hello
        </p>
    </body>
<html>

内部样式

代码写在 <style> 标签中

<html>
    <head>
        <title> demo </title>
        <style type="text/css">
            p strong {
                color: green;
                background-color: #d0f0f6;
                padding: 10px;
            }
        </style>    
    </head>
    <body>
        ...
    </body>
<html>

外部样式

代码写在单独的 .css 文件中,使用 <link> 标签引入

<html>
    <head>
        <link rel="stylesheet" href="xxx.css" />
    </head>
    <body>
        ...
    </body>
<html>

选择器

基本选择器

/* 通用选择器 */
* {
    ...
}

/* 元素选择器 */
element_name {
    ...
}

/* 类选择器 */
.class_name {
    ...
}

/* id选择器 */
#id_name {
    ...
}

/* 属性选择器 */
[property_name="value"] {
    ...
}

分组选择器

/* 同时匹配A,B选择器 */
div, span {
    ...
}

组合选择器

/* 匹配所有位于任意 <div> 元素之内的 <span> 元素 */
div span {
    ...
}

/* 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素 */
ul > li {
    ...
}

/* 匹配同一父元素下,<p> 元素后的所有 <span> 元素 */
p ~ span {
    ...
}

/* 匹配所有紧邻在 <p> 元素后的 <span> 元素 */
p + span {

}

伪选择器

  • 伪类

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

/* 匹配选择具有焦点的 <input> 元素 */
input:focus {
    ...
}
  • 伪元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

/* 匹配所有 <p> 元素的第一行 */
p::first-line {
    ...
}

CSS函数

/* RGB颜色 */
background-color: rgb(255, 0, 0);

/* 从文件返回图像 */
background-image: url(./img/wtflogo.png);

/* 动态计算 */
padding-right: calc(100vw - 100%);
/* 100vw是视口宽度,100%是内容宽度,那100vw - 100%就是滚动条宽度了,设置padding-right 为滚动条的宽度,解决滚动条隐藏和出现时导致的网页抖动问题 */

盒模型

20240229151147

默认情况下,使用标准盒模型时,用 widthheight 属性设置 Content 区域的宽和高,不包含边距和边框,但在替代盒模型(也叫 IE 或怪异盒模型)中,设置的是整个盒子的宽高,即包含内边距和边框。

xxx {
    box-sizing: content-box;  /* 使用标准盒模型(默认) */
}

yyy {
    box-sizing: border-box;  /* 使用替代盒模型 */
}
  • CSS Reset

不同的浏览器会给页面元素预设不同的外边距和内边距,这可能会导致在不同浏览器中网页呈现出不一致的布局,为了提高跨浏览器的一致性,通过设置所有元素的 marginpadding 为 0,然后根据需要为特定元素添加样式。

* {
    margin: 0;
    padding: 0;
}

内边距

Padding 指的是内容和边框之间的透明空间

可取值

  • length 以固定值为内边距,不可以为负值,比如:1px
  • percentage 相对于包含块的宽度,以百分比值为内边距,比如:5%
div {
    /* 全局值 */
    padding: inherit;
    padding: initial;
    padding: unset;

    /* 应用于四个方向的内边距 */
    padding: 1em;

    /* 上下边 左右边 */
    padding: 5% 10%;

    /* 上边 左右边 下边 */
    padding: 1em 2em 2em;

    /* 顺时针:上边 右边 下边 左边 */
    padding: 5px 1em 0 2em;
}

边框

border 包裹着内边距和内容区域,可以设置其

  • 宽度
  • 样式
    • 实线 solid
    • 圆点 dotted
    • 虚线 dashed
  • 颜色
div {
    border: 3px solid red;

    /* 等价于 */
    border-width: 3px;
    border-style: solid;
    border-color: red;
}
  • 圆角
.radius {
    border: 3px solid blue;

    border-radius: 20px;
    border-radius: 50%;
    border-top-right-radius: 10px;
}

20240229190444

外边距

margin 是边框到其他元素的透明空间

可取值

  • length 取值为负时元素会比原来更接近临近元素
  • percentage
  • auto 让浏览器自己选择一个合适的外边距,常用于居中

如果两个元素的外边距重叠了,则合并为一个外边距,取边距较大的值,比如某个元素的上边距 50px,其上方元素下边距 30px,则合并为一个 50px 的外边距

div {
    /* 全局值 */
    margin: inherit;
    margin: initial;
    margin: unset;

    /* 应用于所有边距 */
    margin: 10px;
    margin: 1em;
    margin: -3px;

    /* 上下边 左右边 */
    margin: 5% auto;

    /* 上边 左右边 下边 */
    margin: 1em auto 2em;

    /* 上边 右边 下边 左边 */
    margin: 2px 1em 0 auto;
}

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

内容溢出

内容溢出虽然不会影响到内外边距本身的大小或位置,但溢出的内容可以覆盖相邻元素的内容或外边距区域,使用 overflow 属性可以控制元素溢出的方式,其只工作于指定高度的块元素上

  • overflow: visible;:默认值,内容溢出会显示在元素框之外
  • overflow: hidden;:内容溢出部分不可见
  • overflow: scroll;:内容溢出显示滚动条,不溢出也显示
  • overflow: auto;:内容溢出显示滚动条,不溢出不显示

背景相关

同时设置多个背景属性,推荐顺序:background: color image repeat attachment position/size

背景颜色

background-color

背景色作用于内容区和内边距

/* 颜色值有三种定义方式 */
div {
    background-color: green;  /* 颜色名称 */
    background-color: #fff;  /* 十六进制 */
    background-color: rgb(255, 0, 0);  /* RGB */
}

background-image

设置背景图

.bgi {
    /* 使用url函数指向图像文件 */
    background-image: url(./img/demo.png);
}

.gradient {
    /* 渐变 */
    background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%);
}

background-repeat

控制背景图的平铺方式

.bgr1 {
    background-repeat: repeat;  /* 水平和垂直方向都重复(默认) */
}

.bgr2 {
    background-repeat: repeat-x;  /* 水平方向重复 */
}

.bgr3 {
    background-repeat: repeat-y;  /* 垂直方向重复 */
}

.bgr4 {
    background-repeat: no-repeat;  /* 仅平铺一次 */
}

background-size

.bgs1 {
    background-size: auto;  /* 按图像比例尽可能放大,未覆盖部分重复平铺 */
}

.bgs2 {
    background-size: contain;  /* 按图像比例尽可能放大,未覆盖部分显示背景色 */
}

.bgs3 {
    background-size: cover;  /* 按图像比例一直放大,直到覆盖整个区域,超出部分裁剪 */
}

background-position

设置背景图起始位置,表示一组2D坐标,默认左上角(0, 0)

也可以用长度、百分比、关键字等设置,还可以混用

关键字:left|right|top|bottom|center,表示将元素与2D框的指定边对齐,如果只设置一个轴的关键字,另一个轴则默认为 center

    background-position: top center;
    background-position: 20px 10%;
    background-position: top 20px;

background-attachment

.bga1 {
    background-attachment: scroll;  /* 背景图随网页滚动而移动(默认) */
}

.bga2 {
    background-attachment: fixed;  /* 背景图固定不动 */
}

.bga3 {
    background-attachment: local;  /* 背景图随元素内容滚动 */
}

display 属性

display 属性非常强大且灵活,允许开发者精确控制元素及其子元素的布局和表现形式

块级元素的默认值 display: block,行内元素默认值是 display: inline,列表等元素的默认值是 display: list-item

none: 元素不会被显示,并从文档流中消失。
contents: 元素本身不会被显示,但其子元素会像平常一样显示。
run-in: 根据上下文决定该元素是内联还是块级。

inline: 元素显示为内联元素,不会导致文本换行。

block: 元素显示为块级元素,占据全宽,即使后面有内容也会换行显示。
inline-block: 元素水平排列,类似于inline,但是可以设置宽度和高度。

flex: 元素将变为弹性容器,其直接子元素的布局将受到 Flexbox 布局的影响。
-webkit-flex: Webkit内核浏览器,比如Safari,必须加上-webkit-前缀
inline-flex: 元素将变为内联的弹性容器。

grid: 元素将变为网格容器,其直接子元素的布局将受到 CSS 网格布局的影响。
inline-grid: 元素将变为内联的网格容器。

list-item: 元素会被显示为列表项,类似于 <li> 元素。

table、table-row、table-cell 等: 这些值将元素的行为变得类似于 HTML 表格中的 <table>、<tr>、<td> 等元素。

预处理器

CSS 预处理器是一个能让你处理自己独有的语法来生成 CSS 标准语法的程序,绝大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性。

常见的有:Less、Stylus、Sass 等

参考