洱海文档

外观切换

字
分钟

初识CSS ​

CSS是一种样式表语言, 用来美化网页内容

特性 ​

CSS具有3大特性

继承性 ​

给父元素设置的样式, 会继承给子元素

如果标签有自己的默认颜色, 则不继续

例子:

html
<div>
    <h1>TEST</h1>
    <p>Test</p>
    <a href="#">a标签</a>
</div>
css
div {
    color: red;
}

618506da82cd23fbf51304ce2d471e0d38defae8

层叠性 ​

相同的属性会覆盖:前面的样式覆盖后面的样式

不同的样式会叠加: 不同的样式都生效

例子:

html
<p>Test</p>
css
p{
    color: red;
    font-weight: bold;
}

p{
    color: green;
    font-size: 30px;
}

1fa037ffb3f3ed493c697f71177b0a59cd508d56

优先级 ​

优先级也叫权重, 当一个标签使用了多种选择器时, 基于不同种类的选择器的匹配规则

选择器优先级高的样式生效

通用选择器 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

!important: 强制, 最高优先级, 最低继承性, 慎用!

html
<p class="p1">Test1</p>
<p class="p2">Test2</p>
<p class="p3">Test3</p>
<p class="p4" id="p4">Test4</p>
<p class="p5" style="color: blue;">Test5</p>
<p class="p6" style="color: blue;">Test6</p>
css
*{
    color: green;
}

p{
    color: grey;
}

.p3{
    color: red;
}

#p4{
    color: goldenrod;
}

.p6{
    color: purple !important;
}

89cdfa373652f4ff16ef958691c1829cf5053b50

引用 ​

CSS有3中引用方式, 分别是:内部样式表, 外部样式表, 行内样式表

内部样式表 ​

将CSS代码写在style标签内

html
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识CSS</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>Test</p>
</body>
</html>

5ba4390c9a2d7d41dbaf7ac1ae41fcf20c668834

外部样式表 ​

将CSS代码写在另一个文件中, 后缀为.css

使用link标签引用, rel属性为stylesheet, href属性填CSS地址

html
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Test</p>
</body>
</html>
css
p{
    color: red;
}

5ba4390c9a2d7d41dbaf7ac1ae41fcf20c668834

行内样式表 ​

在标签中加入style属性, 在style属性中直接写CSS

html
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识CSS</title>
</head>
<body>
    <p style="color: red;">Test</p>
</body>
</html>

5ba4390c9a2d7d41dbaf7ac1ae41fcf20c668834

在代码量较少的时候, 可以使用内部样式表, 方便查看, 但代码量大了, 反而会臃肿杂乱, 这时候就可以使用外部样式表了, 行内样式表一般配合Js使用

注释 ​

在CSS中, 注释是由/* 注释 */组成的

选择器 ​

作用: 规定CSS样式会被应用到哪些元素上

选择器有很多, 按下面就行分类, 详见 Mozilla文档

基本选择器 ​

本文档只介绍基本选择器, 其他请自行阅读 Mozilla文档

通用选择器 ​

选择所有元素

* {}

例子:

html
<h1>TEST</h1>
<p>Test</p>
css
* {
    color: red;
}

fae18f97ffce77210f12529504c3dc010b114e63

标签选择器 ​

选择所有相同标签的元素

标签名 {}

例子:

html
<h1>TEST</h1>
<p>Test</p>
css
p {
    color: red;
}

91a3f9903c8cbbf9a68abc23447eca932df9c291

类选择器 ​

按照给定的class属性值, 选择所有匹配的元素

.class属性值 {}

例子:

html
<h1 class="title">TEST</h1>
<p>Test</p>
css
.title {
    color: red;
}

50206a24155a7c03b15f3ea6f65af9b8b5c7fe59

补充:

  1. class属性可以塞多项, 用空格分割, 例如<h1 class="title title2 ...">TEST</h1>
  2. class属性可以使用中文赋值, 虽然可以, 但是并不推荐, 请按规范命名!
  3. class属性的赋值不能以数字或特殊字符开头, 但是_下划线可以

ID 选择器 ​

按照给定的id属性值, 选择一个与之匹配的元素

每个网页中, id属性应当是唯一的

#id属性值 {}

例子:

html
<h1>TEST</h1>
<p id="s">Test</p>
css
#s {
    color: red;
}

91a3f9903c8cbbf9a68abc23447eca932df9c291

补充:

  1. id属性可以塞多项, 用空格分割, 例如<p id="s1 s2 ...">Test</p>
  2. id属性可以使用中文赋值, 虽然可以, 但是并不推荐, 请按规范命名!
  3. id属性的赋值不能以数字或特殊字符开头, 但是_下划线可以

属性选择器 ​

按照给定的属性, 选择所有匹配的元素

选择器[属性], 选择器[属性="属性值"]

例子(来源Mozilla文档):

html
<a href="#internal">内部链接</a>
<a href="http://example.com">示例链接</a>
<a href="#InSensitive">非敏感内部链接</a>
<a href="http://example.org">示例 org 链接</a>
<a href="https://example.org">示例 https org 链接</a>
css
a {
    color: blue;
}

/* 以 "#" 开头的页面内部链接 */
a[href^="#"] {
    background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
    background-color: silver;
}

/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
    color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
    color: pink;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
    color: red;
}

/* 以 "https" 开始，".org" 结尾的链接 */
a[href^="https"][href$=".org"] {
    color: green;
}

00bf7ef36f18deb55836e1c810e3fc8e00fe7ce9

分组选择器 ​

选择器列表 ​

选择该列表的所有元素, 每项用, 分割

选择器, 选择器 {}

例子:

html
<h1>TEST</h1>
<p>Test</p>
css
h1, p {
    color: red;
}

fae18f97ffce77210f12529504c3dc010b114e63

组合器 ​

后代组合器 ​

选择器之间用空格分割, 组合器选择前一个元素的后代节点

比如说:div .a, 选择器将选择div标签里的.a标签

选择器 选择器 {}

例子:

html
<h1>TEST</h1>
<div>
    <p class="a">Test1</p>
    <p>Test2</p>
</div>
<p>Test3</p>
css
div .a {
    color: red;
}

604b9b6a50b7d3a950989238a848ddff6ee18205

直接子代组合器 ​

选择器之间用>分割, 组合器选择前一个元素的直接子代的节点

比如说:div > span, 选择器将选择div标签里的span标签

选择器 > 选择器 {}

例子:

html
<div>
    <span>
      1 号 span, 在 div 中.
      <span>2 号 span, 在 div 中的 span 中.</span>
	</span>
</div>
<span>3 号 span, 不在 div 中.</span>
css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

c6ba1579aa84367ac63dda4f1280860abc649a93

一般兄弟组合器 ​

选择器之间用~分割, 组合器选择兄弟元素, 也就是说, 后一个节点在前一个节点后面的任意位置, 并且共享同一个父节点

比如说:p ~ span, 选择器将选择p标签后面的span标签

选择器 ~ 选择器 {}

例子:

html
<h1>TEST</h1>
<span>Test1</span>
<p>Test2</p>
<span>Test3</span>
<span>Test4</span>
<p>Test5</p>
css
p ~ span {
  color: red;
}

327938b1fdecfc2a3cf24b673ca6af5a56ed862f

紧邻兄弟组合器 ​

选择器之间用+分割, 组合器选择相邻元素, 即后一个元素紧跟在前一个之后, 并且共享同一个父节点

比如说:.a + p, 选择器将选择.a标签后一个标签

选择器 + 选择器 {}

例子:

html
<div>
    <p class="a">Test1</p>
    <p>Test2</p>
</div>
<p class="a">Test3</p>
<p>Test4</p>
css
div .a + p{
    color: red;
}

874db2b19c5c4fff00ff717b2997673ee28c26d0

列组合器 ​

选择器之间用||分割, 组合器选择属于某个表格行的节点

选择器 || 选择器 {}

PS:老实说, 我并不知道这个选择器是干什么用的

伪选择器 ​

伪类 ​

伪类表示元素状态, 选中元素的某个状态设置样式

如果你想写多个, 就按照 LVHA 的顺序写, 否则可能导致某个状态的样式无法生效

选择器:link:访问前

选择器:visited:访问后

选择器:hover:鼠标悬停

选择器:active:点击时

结构伪类选择器 ​

根据元素的结构关系查找元素

选择器:first-child:查找第一个选择器元素

选择器:last-child:查找最好一个选择器元素

选择器:nth-child(N):查找第N个选择器元素(第一个元素N值为1)

N可以套公式, 例:

功能公式
偶数标签2n
奇数标签2n+1;2n-1
找到5的倍数的标签5n
找到第5个以后的标签n+5
找到第5个以前的标签-n+5
html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
css
li:first-child{
    background-color: green;
}

li:last-child{
    background-color: red;
}

li:nth-child(3){
    background-color: blue;
}

d1d5a3c15809b9c34e3fc70fedf06fde31b10356

伪元素 ​

创建虚拟元素(伪元素), 用来摆放装饰性的内容

选择器::before:在选择器里面最前面添加一个伪元素

选择器::after:在选择器里面最后面添加一个伪元素

警告

  • 必须设置content:""属性, 用来设置伪元素的内容, 如果没有内容, 则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同

CSS 单位 ​

来源 Mozilla文档

长度单位 ​

绝对长度单位 ​

单位名称等价换算
cm厘米1cm = 37.8px = 25.2/64in
mm毫米1mm = 1/10th of 1cm
Q四分之一毫米1Q = 1/40th of 1cm
in英寸1in = 2.54cm = 96px
pc派卡1pc = 1/6th of 1in
pt点1pt = 1/72th of 1in
px像素1px = 1/96th of 1in

相对长度单位 ​

单位相对于
em在font-size中使用是相对于父元素的字体大小, 在其他属性中使用是相对于自身的字体大小, 如width
ex字符“x”的高度
ch数字“0”的宽度
rem根元素的字体大小
lh元素的行高
rlh根元素的行高.当用于根元素的font-size或line-height属性时, 它指的是这些属性的初始值
vw视口宽度的 1%
vh视口高度的 1%
vmin视口较小尺寸的 1%
vmax视口大尺寸的 1%
vb在根元素的块向上, 初始包含块的尺寸的 1%
vi在根元素的行向上, 初始包含块的尺寸的 1%
svw, svh分别为视口较小尺寸的宽度和高度的 1%
lvw, lvh分别为视口大尺寸的宽度和高度的 1%
dvw, dvh分别为动态视口的宽度和高度的 1%

颜色 ​

颜色关键词 ​

直接写颜色的名字, 例如

红色red

黄色yellow

绿色green

蓝色blue

Hex值(十六进制) ​

#后面跟上颜色的Hex值, 例如

红色:#ff0000

黄色#ffff00

绿色#008000

蓝色#0000ff

红色半透明#ff000080

RGB 值和 RGBA 值 ​

RGB分别表示颜色的3个通道, 红, 绿, 蓝, 取值为 0~255

A表示透明通道, 取值为 0~1

例如:

红色rgb(255, 0, 0)

黄色rgb(255, 255, 0)

绿色rgb(0, 128, 0)

蓝色rgb(0, 0, 255)

红色半透明rgba(255, 0, 0, 0.5)

HSL 值和 HSLA 值 ​

HSL分别表示色相, 饱和度, 亮度

色相的取值为 0~360

饱和度和亮度的取值为 0~100%

A表示透明通道, 取值为 0~1

例子:

红色hsl(0, 100%, 50%)

黄色hsl(60, 100%, 50%)

绿色hsl(120, 100%, 25%)

蓝色hsl(240, 100%, 50%)

红色半透明hsla(0, 100%, 50%, 0.502)

推荐使用深夜模式

基于 CC BY-SA 4.0 协议发布