Sekyoro的博客小屋

css学习

发表于 更新于
本文字数： 17k 阅读时长 ≈ 16 分钟

没有css,就没有前端!

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局

样式定义通常保存在外部 .css 文件中。

通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！

语法

image-20211020200204328

可以将 CSS 选择器分为五类：

1
2
3
4
5
6
7
8
9
10
11
12
p {
  text-align: center;
  color: red;
}//通过元素名称
#para1 {
  text-align: center;
  color: red;
}//通过id
.center {
  text-align: center;
  color: red;
}//通过类

通用选择

1
2
3
4
* {
  text-align: center;
  color: blue;
}

插入方法

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 link 元素内包含对外部样式表文件的引用

请勿在属性值和单位之间添加空格

内部

内部样式是在 head 部分的 style 元素中进行定义

1
2
3
4
5
6
7
8
9
10
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>

行内

1
2
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

慎用

层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

颜色

CSS/HTML 支持 140 种标准颜色名

RGB

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

rgba(red, green, blue, alpha)

rgb(red, green, blue)

hex

rrggbb

为所有 3 个光源使用相等的值来定义灰色阴影

hsl

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。

亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色

通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度

背景

背景颜色

background-color

设置元素的背景色

1
2
3
body {
  background-color: lightblue;
}
  • 有效的颜色名称 - 比如 “red”
  • 十六进制值 - 比如 “#ff0000”
  • RGB 值 - 比如 “rgb(255,0,0)”

透明度

opacity

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

1
2
3
div {
opacity: 0.8;
}

如果不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值

背景图像

background-image

1
2
3
body {
  background-image: url("paper.gif");
}

默认情况下，图像会重复，以覆盖整个元素

background-repeat

默认,图像属性在水平和垂直方向上都重复图像

水平方向重复

1
2
3
4
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

no-repeat 还可指定只显示一次背景图像

background-position指定图像位置

1
2
3
4
5
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

background-attachment

指定背景图像是应该滚动还是固定的

1
2
3
4
5
6
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

scroll使图像随着页面其余部分一起滚动

background

1
2
3
body {
  background: #ffffff url("tree.png") no-repeat right top;
}

简写属性

image-20211020225021226

border边框

允许您指定元素边框的样式、宽度和颜色

border-style

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

除非设置了 border-style 属性，否则其他 CSS 边框属性

border-width

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}

border-color

如果未设置 border-color，则它将继承元素的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

单独的边

1
2
3
4
5
6
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

border简写属性

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color

左边框

1
2
3
4
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

border-radius

用于向元素添加圆角边框

1
2
3
4
p {
  border: 2px solid red;
  border-radius: 5px;
}

外边距

margin

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距.

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

1
2
3
4
5
6
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

margin 属性是以下各外边距属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

auto 值

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配

inherit

继承自父元素

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

内边距

CSS 拥有用于为元素的每一侧指定内边距的属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值：

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

提示：不允许负值。

1
2
3
4
5
6
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

实例

在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）：

1
2
3
4
div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持为 300px，无论填充量如何

那么可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。然后，浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

提示：将浏览器窗口拖动到小于500px的宽度，以查看两个 div 之间的区别！

1
2
3
4
5
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。

然后，浏览器会将水平滚动条添加到页面。

image-20211020235533020

框模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

  • 内容 - 框的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的

背景应用于由内容和内边距、边框组成的区域

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

1
2
3
4
5
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距

重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

实例

元素的总宽度将是 350px： 
1
2
3
4
5
6
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

轮廓

CSS 拥有如下轮廓属性：

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响

image-20211021002834084

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

  • thin（通常为 1px）
  • medium（通常为 3px）
  • thick （通常为 5px）
  • 特定尺寸（以 px、pt、cm、em 计）

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
1
2
3
4
5
p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

  • outline-width
  • outline-style（必需）
  • outline-color

从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要

1
2
3
4
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

outline-offset

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的

文本

color设置文本颜色

background-color设置背景颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

  • 颜色名 - 比如 “red”
  • 十六进制值 - 比如 “#ff0000”
  • RGB 值 - 比如 “rgb(255,0,0)”

页面的默认文本颜色是在 body 选择器中定义的。

1
2
3
4
5
6
7
8
9
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

text-align设置文本的水平对齐方式

文本可以左对齐或右对齐，或居中对齐。

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的

direction和unicode-bidi

direction 和 unicode-bidi 属性可用于更改元素的文本方向

垂直对齐

vertical-align

设置元素的垂直对齐方式

1
2
3
4
5
6
7
8
9
10
11
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

文字装饰

text-decoration设置或删除文本装饰

text-decoration:删除下划线

1
2
3
4
5
6
7
8
9
10
11
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

text-transform

1
2
3
4
5
6
7
8
9
10
11
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写

text-indent

文字缩进,用于指定文本第一行的缩进

1
2
3
p {
  text-indent: 50px;
}

letter-spacing

用于指定文本中字符之间的间距

1
2
3
4
5
6
7
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

line-height

用于指定行之间的间距

1
2
3
4
5
6
7
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

字间距

word-spacing 属性用于指定文本中单词之间的间距

1
2
3
4
5
6
7
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

空白

white-space指定元素内部空白处理方式

1
2
3
p {
  white-space: nowrap;
}

文本阴影
text-shadow 属性为文本添加阴影

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

1
2
3
h1 {
  text-shadow: 2px 2px;
}

阴影添加颜色

1
2
3
h1 {
  text-shadow: 2px 2px red;
}

添加模糊效果

1
2
3
h1 {
  text-shadow: 2px 2px 5px red;
}

image-20211021211922519

字体

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体

image-20211021212057317

font-family属性

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔

注释：如果字体名称不止一个单词，则必须用引号引起来，例如：”Times New Roman”

1
2
3
4
5
6
7
8
9
10
11
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

font-style

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
1
2
3
4
5
6
7
8
9
10
11
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-weight

指定字体粗细

1
2
3
4
5
6
7
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本

字体大小

font-size

设置文本大小

font-size 值可以是绝对或相对大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

像素设置

1
2
3
4
5
6
7
8
9
10
11
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

em设置

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

1
2
3
4
5
6
7
8
9
10
11
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

使用百分比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（”viewport width”）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

1
<h1 style="font-size:10vw">Hello World</h1>

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 <\i> 或 <\span>）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）

文本链接

设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

1
2
3
a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

如果为多个链接状态设置样式，请遵循如下顺序规则：

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

css列表属性

CSS 列表属性使您可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

list-style-type 属性指定列表项标记的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

图像作为列表标记

list-style-image 属性将图像指定为列表项标记：

1
2
3
ul {
  list-style-image: url('sqpurple.gif');
}

定位列表项标记

1
2
3
4
5
6
7
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在