2021-08-19 CSS

CSS（层叠样式表）

CSS 指的是层叠样式表(Cascading Style Sheets)。
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。
CSS 节省了大量工作。它可以同时控制多张网页的布局。
外部样式表存储在 CSS 文件中。

CSS 语法

CSS 选择器

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

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

CSS颜色

rgb（r，g，b） 表示光学三原色的3个混合分量，取值从0~255
hex 如#FFFFFF 本质与rgb相同，只是用3组（每组两位）十六进制数字来表示rgb的三个分量
hsl 在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

CSS背景

可以为任何HTML元素设置如下属性
background-color 使用CSS中的颜色设置
background-image
background-repeat
background-attachment
background-position

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-width 属性指定四个边框的宽度。

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

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

可以通过以下方式设置颜色：
name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

width style color属性简写

在border-width 或者 border-style 或者border-color后面
四个值： （上）（右）（下）（左）
三个值 ：上 （左、右）下
两个值：（上、下）（左、右）
一个值：（上、下、左、右）

border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color

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

border-radius： 5px; 值代表圆角的半径

CSS内外边距

margin padding 可以与top right bottom left组合使用
也可以简写：如下对应
四个值： （上）（右）（下）（左）
三个值 ：上 （左、右）下
两个值：（上、下）（左、右）
一个值：（上、下、左、右）

CSS 高度与宽度

高度与宽度的值并不包括内外边距、边框宽度。

CSS文本

color 设置文本颜色
text-align 设置水平对齐 取值有 left center right justify
vertical-align 设置垂直对齐 取值有top middle bottom
text-decoration 设置文本装饰 取值 none underline line-through overline

CSS字体

font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 设置字体的粗细 normal bold
font-size 设置字体高度

CSS 浮动和清除浮动

float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

clear 属性可设置以下值之一：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

CSS渐变

CSS 定义了两种渐变类型：
线性渐变（向下/向上/向左/向右/对角线）
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
径向渐变（由其中心定义）向四周呈放射状
background-image: radial-gradient(shape size at position, start-color, …, last-color);
也可以设置非均匀渐变在颜色后 加上 占比百分数
shape设置渐变的形状 circle 或 ellipse （椭圆）在参数列表最前面加上该值

CSS伪类

用于设置元素的特殊状态下的属性
如link hover visited active

定位

position属性
有五个不同的位置值：
static 静态定位 其他定位方式不会影响静态定位元素的位置
relative 相对定位 相对于元素本来的位置进行定位
fixed 相对于视图窗口定位 即使上下翻页也不会影响元素的位置
absolute 相对于最近的祖先进行定位
sticky 粘性定位

选择器

一般选择器 依据标签名id类名进行选择

属性选择器 [属性名] 或者[属性名=值] 也可以搭配正则表达式应用

组合选择器 建立在标签的树形结构上一层一层向下，参照树的结构很容易理解
后代选择器 空格分开
子类选择器用> 连接
相邻兄弟选择器用+连接
通用兄弟选择器用 ~连接

伪类选择器 如 :hover :link :visited :active 注意使用“:”

背景图像

background-image: url(…),url(…)可以添加多个背景图片
background-repeat 可选值no-repeat repeat-x repeat-y
background-position 使用top right left bottom 组合选取背景图片的位置

background-origin 属性指定背景图像的位置。
该属性接受三个不同的值：
border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

background-clip 属性指定背景的绘制区域。
该属性接受三个不同的值：
border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

background-size 属性允许您指定背景图像的大小。
可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。
contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。
cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。