css学习｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 3 天学习了css的内容，用笔记记录一下 cs

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天学习了css的内容，用笔记记录一下

css选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

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

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

id选择器

使用html元素的id属性选择特定元素

元素的id在页面中是唯一的

用法：# + id

类选择器

.+类名

可以对某个类型使用，也可以一起使用

如：p.center 就是对段落使用了center类的进行修改

有large类的话，也可以写成 class = “center large”

通用选择器

会影响页面上的每个HTML元素

分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

css使用

外部css

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

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

外部 .css 文件不应包含任何 HTML 标签。

一个css文件

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

内部css

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

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

例子

<html>
<head>
<style>
body {
  background-color: linen;
}

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

行内css（内联样式）

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

这个就是直接在段落或者标题标签里面直接写style=“”

多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

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

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

css颜色

背景色

style="background-color:DodgerBlue;"
文本颜色

color: Tomato
边框颜色

border:2px solid Tomato
颜色值

还可以使用RGB,HEX,HSL,RGBA值等

与颜色名“Tomato”同名的：rgb(255,99,71) #ff6347 hsl(9,100%164%)

与颜色名 "Tomato" 等效，但是透明度为 50%：rgba(255, 99, 71, 0.5)

rgb

三色混合，懂了不写
rgba

带了透明度 alpha（0是完全透明，1.0是完全不透明）
HEX

#rrggb 其中rr等是介于00和ff之间的十六进制的值
HSL

使用色相，饱和度和明度（HSL）来指定颜色

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

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

亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。
HSLA 带了透明度的

css背景

背景颜色

background-color 属性指定元素的背景色。

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

  opacity: 0.3;

背景图像

background-image 属性指定用作元素背景的图像。

比如设置页面的背景图像：

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

在应用的元素后面写上属性，之后写url

图像填不满就会自动重复，如何设置水平重复还是垂直重复呢

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

这个就是水平重复的

只显示一次背景图像

background-repeat：no-repeat
指定图像位置

background-position 用于指定背景图像的位置
```
background-position: right top;
```
背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

  background-attachment: fixed;

可选值：

fixed：固定背景图像
scroll 随页面其余部分一起滚动

背景简写

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

在一条声明中设置背景属性

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

css 边框样式

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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

CSS 边框宽度

border-width 属性指定四个边框的宽度。

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

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

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

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent

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

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：

实例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

CSS Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

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

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

实例

p {
  border: 5px solid red;
}

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：

CSS 外边距

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

Margin - 单独的边

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

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

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

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

提示： 允许负值。

实例

为

元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

auto 值

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

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

实例

使用 margin: auto：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

css外边距合并

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

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

CSS 外边距合并实例 1

所有 CSS 外边距属性

属性	描述
margin	用于在一条声明中设置外边距属性的简写属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

css内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

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

感觉基本和外边距margin是一样的，一些属性用法也是一样

css宽度和高度

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

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

注意： 请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

设置 max-width

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

CSS 框模型

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

CSS 框模型

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

框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

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

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

例子：

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

CSS 框模型实例

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

css轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

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

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

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

例子：

p {outline-color:red;} p.dotted {outline-style: dotted;}

点状轮廓

< p class="dotted">点状轮廓< /p >

注意： 除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！

CSS 轮廓宽度

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

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

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

反转颜色

下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

CSS Outline - 简写属性

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

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

例子：

p.ex3 {outline: 5px solid yellow;}

CSS 轮廓偏移

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

下例指定边框边缘外 25px 的轮廓：

css学习｜ 青训营笔记

css选择器

id选择器

类选择器

通用选择器

分组选择器

css使用

外部css

内部css

行内css（内联样式）

多个样式表

css颜色

css背景

背景颜色

背景图像

背景附着

背景简写

所有 CSS 背景属性

css 边框样式

CSS 边框宽度

CSS 边框颜色

CSS 边框 - 单独的边

实例

CSS Border - 简写属性

实例

CSS 圆角边框

CSS 外边距

Margin - 单独的边

实例

auto 值

实例

css外边距合并

所有 CSS 外边距属性

css内边距

css宽度和高度

设置 max-width

CSS 框模型

css轮廓

CSS 轮廓宽度

反转颜色

CSS Outline - 简写属性

CSS 轮廓偏移

css学习｜青训营笔记