Skip to content
shug的笔记集合

CSS 基础

什么是CSS?

CSS (Cascading Style Sheets) 层叠样式表, 用于设置网页的外观(网页的整容医生)

CSS 语法

h1 { /* h1 是选择器 */
  color: red; /* 颜色设置成红色(字体颜色) */
  font-size: 5em; /* 字体大小5em */
}

HTML模版

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
  </head>


  <body>
    <h1>我是一级标题</h1>


    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>


    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>


    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

如何使用CSS

  1. HTML链接CSS文件

创建文件style.css

h1 {
  color: red;
  font-size: 5em;
}

修改html模版

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <link rel="stylesheet" href="styles.css" /> <!-- 引入CSS -->
  </head>


  <body>
    <h1>我是一级标题</h1>


    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>


    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>


    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>
  1. 内联CSS
<div style="background: red"></div>
  1. 嵌入
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        h1 {
            color: red;
            font-size: 5em;
        }
    </style>
  </head>


  <body>
    <h1>我是一级标题</h1>


    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>


    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>


    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>
  1. 导入
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        @import url(style.css);
    </style>
  </head>


  <body>
    <h1>我是一级标题</h1>


    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>


    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>


    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

选择器

选择器用于标识当前规则应用于与那些HTML元素.

  1. 类型选择器
h1 { /* HTML元素的标签 */
}
  1. 类选择器

类选择器方便复用CSS的规则

.box { /* box 是类名 */
}

使用box类名

<div class="box"></div>
  1. id选择器

id在一个页面只能有一个

#unique { /* unique是id */
}

使用uniqueid

<div id="unique"></div>
  1. 属性选择器

根据元素上的属性是否存在选择元素

a[title] { /* a标签上有title属性, title的值不确定 */
}
a[title="user"] { /* a标签上有title属性, title的值要是user */
}
a[title~="u"] { /* a标签上有title属性, title的值至少包含u, 如果有多个值用空格分割 */
}
a[title|="u"] { /* a标签上有title属性, title的值可以是u, 或者是以u开始的后接连字符, 如u-test, title不能有多个值 */
}


a[title^="u"] { /* a标签上有title属性, title的值以u开头, title可以有多个值 */
}


a[title$="u"] { /* a标签上有title属性, title的值以u结尾, title可以有多个值 */
}
a[title*="u"] { /* a标签上有title属性, title的值包含至少一个u */
}

属性的匹配默认是大小写敏感的, 如果要使用大小写不敏感进行匹配, 在中括号中添加i

li[class^="a" i] {
  color: red;
}
  1. 伪类选择器

伪类用于指定元素的特殊样式

a:hover {
  color: red;
}
名称通常适用元素作用
activea, button鼠标按键按下到松开的时间(可能被后面的伪类覆盖如link, hover, visited, 要使用active保证顺序(link-visited-hover-active) )
any-linka, area超链接锚点的元素(有href属性的a或area标签), 匹配所有匹配link和visited的元素
autofillinput在浏览器自动填充表单中的input元素时匹配该input, 如果用户编辑了, 将不再匹配该input(为保证兼容同时添加-webkit-autofill伪类)
blankinput, textarea选择用户为空的输入框
bufferingaudio, video当可播放元素正在缓冲媒体资源时, 选择可播放的元素(buffering匹配时, playing也匹配)
checkedinput type=radio, input type=checkbox, select中的option选中使用的元素的选中状态
current所有表示当前正在显示的元素或元素的父元素
defaultbutton,input type=radio, input type=checkbox, select中的option具有默认值的元素
define所有元素任何以定义的元素,包括自定义元素
dir所有元素匹配特定的文字书写方向的元素
disabled所有元素任何被禁用的元素
empty所有元素选择不包含任何子元素的元素
enabled所有元素任何已启用的元素
first所有元素与@page一起使用选择打印的第一页, 只能修改margin, orphans, windows, 分页符, 修改margin时只能使用绝对单位
first-child所有元素选择一组兄弟元素中的第一个元素
first-of-type所有元素表示一组兄弟元素中其类型的第一个元素
focus所有元素表示获得焦点的元素
focus-visible所有元素匹配focus伪类, 并且浏览器的启发引擎决定焦点可见时
focus-within所有元素当元素或元素的后代元素聚焦时
fullscreen所有元素处于全屏模式的所有元素
future所有元素匹配完全出现在与current匹配的元素后的任何元素
has所有元素如果作为参数的相对选择器选中元素时, 至少匹配一个元素, 提供选中父元素或先前兄弟元素的方法
host内部使用了该CSS的影子DOM的影子宿主从影子DOM中选择自定义元素
host-content
hover所有元素指针设备与元素交互时选中
in-rangeinput其值在min和max之间
indeterminateinput type=radio, input type=checkbox, 不确定状态的progress状态不确定的表元素
invalidform, fieldset, input等表单元素选中未通过验证的表单元素
is所有元素伪类函数, 选中参数列表中任意一个可以选择的元素
lang所有元素选中参数语言的元素
last-child所有元素选择一组兄弟元素中的最后元素
last-of-type所有元素父类子元素列表中, 最后一个给定类型的元素
left无与@page配合, 选中打印文档的左侧页
linka, area具有href属性并且已访问的a或area元素
local-linka, area与link类似,但是href要指向同一文档链接
modal所有元素匹配处于排除与外部元素所有交互的元素, 直到交互消除
mutedaudio, video处于静音状态
not所有元素匹配不符合一组选择器的元素
nth-child所有元素根据元素在父元素的子元素列表的索引来选择元素
nth-last-child所有元素从兄弟元素节点中从后往前的索引匹配
nth-last-of-type所有元素元素在相同标签的兄弟元素中最后一个位置的元素
nth-of-type所有元素相同标签的兄弟元素的位置
only-child所有元素没有兄弟元素的元素
only-of-type所有元素没有其他相同类型的兄弟元素
optionalinput, select, textarea任何没有设置required的input, select或textarea
out-of-rangeinput当前值处于min和max之外
past所有元素匹配完全出现在current匹配的元素之前的任意元素
pausedaudio, video处于暂停状态
picture-in-picture所有元素处于画中画模式的元素
placeholder-showninput, textarea当前显示占位文本的input或textarea
playingaudio, video处于正在播放的元素
popover-open所有元素处于显示状态的弹出框元素
read-onlyinput, textarea不可编辑的元素
read-writeinput,textarea可以编辑的元素
requiredinput,textarea,select设置了required属性
right无与@page一起使用, 表示打印文档的所有右页
root根节点(html)与html相同, 但优先级更高
scope所有元素选择器要匹配的参考点的元素
seekingaudio,video寻找播放位置
stalledaudio, video表示停止播放时可播放的元素
state自定义元素选择具有直到自定义状态的自定义元素
target唯一元素其id与URL片段匹配
target-within任意元素与taget类似, 只是target选择子元素时, 该元素也被选中
user-invalid表单元素经过验证的表单元素
user-valid表单元素经过任何表单验证的元素, 在与用户交互后匹配
valid表单元素验证正确的表单元素
visiteda, area用户访问后的链接
volume-lockedaudio, video用户锁定了声音
where任意元素接受选择器列表, 选中所有能被任意规则选中的元素
  1. 伪元素选择器

选择元素的一部分

a::first-line { /* 选择a标签的第一行 */
  color: red;
}
名称作用
after在子元素列表末尾插入一个子元素, 可以通过content添加内容, 添加的子元素默认时行内元素
backdrop任何处于全屏模式的元素下的即刻渲染的盒子
before在子元素列表开始插入一个子元素, 可以通过content添加内容, 添加的子元素默认时行内元素
cue选中元素中的WebVTT提示
cue-region与所选元素内的WebVTT提示相匹配, 用于设置带有VTT轨道的媒体的字幕和其他样式
file-selector-button表示type=file的input
first-letter选中块级元素的第一行的第一个字母
first-line选中块级元素的第一行
grammar-error用于浏览器标识为语法错误的文本段
highlight用于自定义高亮
marker选择列表项的标记框
part表示影子树中具有part属性的任意元素
placehoder表示input或textarea中的占位文本
selection文档中被用户高亮的部分(选中的部分)
slotted被放在HTML模版中的元素
spelling-error被浏览器标记为不正确拼写的文本段
target-text浏览器在支持文本片段技术时滚到的文字
view-transition表示视图过度叠加层的根元素
view-transition-group单个视图过度组
view-transition-image-pair视图过度的旧视图状态和新视图状态的容器
view-transition-new视图过度新视图的状态
view-transition-old视图过度旧视图的状态
  1. 关系选择器
  • 后代选择器

用空格组合两个选择器body div, 选择body中的div元素(可以是子元素的子元素的子元素…)

  • 子代选择器

    用>连接两个选择器body>div, 选择body的子元素div

  • 兄弟选择器

    用+连接div+img选择div后面相邻的img

  • 通用兄弟选择器

    用~连接div~img选择div后面的img

  1. 全局选择器

*选中文档中所有内容, 或者父元素中的所有元素

@规则

名称作用
charset指定样式表中的字符编码, 必须是样式表第一个元素
color-profile命名一个颜色配置文件, 可以在color()函数中使用
container条件组规则如果条件为真, 则应用规则
counter-style自定义counter的样式
document根据文档URL现在样式规则
font-face指定显示文本的自定义字体
font-feature-values允许在font-variant-alternates使用通用名称
font-palette-values允许自定义有字体创作者创建的字体调色板的默认值
import导入其他样式表
keyframes创建动画的关键帧
layer声明一个级联层, 同一层的规则将级联在一起
media创建媒体查询, 根据结果应用样式表
namespace定义CSS样式表中的XML命名空间, 用于把通配, 元素和属性选择器限制在指定命名空间
page修改打印页面的不同方面
property允许开发者显示定义CSS自定义属性
scope选择特定DOM子树的元素
starting-style用于定义元素上设置的属性的起始值
supports指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明

CSS函数

名称介绍示例
abs返回参数的绝对值, 与输入类型相同width: abs(20% - 100px);
acos反余弦,输入-1到1的参数,返回0-180度的弧度数transform: rotate(acos(-0.2));
asin反正弦,输入-1到1的参数, 返回-90到90之间的弧度数transform: rotate(asin(-0.2));
atan反正切, 输入任意数字, 返回-90到90之间的弧度数transform: rotate(atan(1));
atan2反正切, 输入任意两个数字, 返回两个输入的反正切值-180到180之间的弧度数transform: rotate(atan2(1, 2))
attr获取CSS属性, 若属性不合法, 则使用后面的默认值content: attr(data-foo) ” “;
calc在声明CSS属性时执行一些计算width: calc(100% - 80px)
clamp把一个值限制在一个范围clamp(MIN, VAL, MAX)
cos余弦函数width: calc( 100px * cos(45deg))
counter返回一个代表计数器的当前值的字符串counter(countername, upper-roman)
counters返回表示指定计数器当前值的连接字符串counters(countername, ’-’);
cross-fade定义透明度混合两个或多个图像cross-fade(url(white.png) 0%, url(black.png) 100%);
element从任意的 HTML 元素中生成的图像background: element(id);
env类似var引用CSS变量env(safe-area-inset-top, 20px);
exp以e为底数的指数函数width: calc(100px * exp(-1));
fit-content将给定大小, 缩放成可用大小fit-content(300px)
hypot返回参数平方和的平方根hypot(3em, 4em)
log对数函数, 默认以e为底log(2);
max求参数的最大值max(10vw, 4em, 80px)
min求参数的最小值min(10vw, 4em, 80px)
minmax定义一个长范围的闭区间, 通常与网格布局一起使用minmax(200px, 1fr)
mod取模mod(10, 3)
path接收SVG的路径字符串path(“M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80”);
pow指数函数pow(5, 2)
ray定义动画元素遵循的offset-path线段ray(50deg closest-corner contain at 100px 20px);
rem取余函数rem(14, 5)
repeat表示轨迹列表的重复片段repeat(4, 1fr)
round根据选定的舍入策略选择数字round(117px, 25px);
sign返回参数的正负sign(20vh-100px)
sin正弦函数sin(45deg)
sqrt平方根sqrt(9)
symbols用于计算list-style的值symbols(cyclic ”*” ”†” ”‡”);
tan正切函数tan(20deg);
url指向资源url(“http://mysite.example.com/mycursor.png”)
var引用CSS变量color: var(—color-a);

层叠

层叠(覆盖)如果两条规则的优先级一样, 那么后面的规则将覆盖前面的规则

<html>
    <head>
        <style>
            h1 {
                color: red;
            }
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>This is my heading.</h1>
    </body>
</html>

最终This is my heading.是蓝色的

优先级

CSS的计算中, 最后每一个元素的每一个CSS属性都会有值