Web前端-Html-CSS笔记整合（CSS入门）

层叠样式表 (Cascading Style Sheets)

CSS 是一种描述 HTML 文档样式的语言，用来描述应该如何显示 HTML 元素。
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

CSS 选择器

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

CSS选择器 及 CSS选择器优先级（权重） 深入了解===》 点击此处转二号线

CSS 选择器分为五类：

常用选择器
选择器根据名称、id、类来选取元素

选择器	功能描述
.class	选取所有class="class"的元素
#id	选取id=“id”的元素
*	选取所有元素
element	选取所有element标签的元素
element1，element2	选取所有element1和element2标签的元素
element1 element2	选取element1中element2标签的元素

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

层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

CSS颜色·

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

RGB值(red, green, blue)

每个参数 (red，green ，blue) 定义了 0 到 255 之间的颜色强度。
例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

RGBA 值(red, green, blue, alpha)
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

HEX 值
使用以下格式的十六进制值指定颜色：
#rrggbb
其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。

HSL值(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

HSLA值(hue, saturation, lightness, alpha)

CSS背景

CSS 背景属性用于定义元素的背景效果。
常见背景属性：
背景颜色：background-color
背景图片：background-image
背景重复：background-repeat ——>默认情况下， 属性在水平和垂直方向上都重复图像。
背景附着：background-attachment——>指定背景图像是应该滚动scroll还是固定fixed。
背景位置：background-position

ps：
简写属性:缩短代码，在一个属性中指定所有背景属性
例：background: #ffffff url(“text.png”) no-repeat fixed right top;
opacity属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

CSS边框

CSS 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-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-透明

边框圆角（border-radius）
例：border-radius: 5px;

CSS边距

CSS外边距（margin）

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

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

margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值：

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

auto 值
将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

CSS内边距（padding）

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

PS：内边距和元素宽度
CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

CSS宽高

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

属性可设置如下值：

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

CSS轮廓

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

CSS 拥有如下轮廓属性：

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

轮廓样式

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

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

轮廓宽度

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 - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

轮廓偏移

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

轮廓简写

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

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

CSS文本

文本颜色

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

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

文本对齐

text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。

vertical-align 属性设置元素的垂直对齐方式

文本方向

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

文本装饰

text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线

文本转换

text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写

文本间距

文本缩进
text-indent 属性用于指定文本第一行的缩进。
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
文本行高
line-height 属性用于指定行之间的间距
字间距
word-spacing 属性用于指定文本中单词之间的间距

文本阴影

text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

文本字体

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

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

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

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

字体样式

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

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

字体粗细

font-weight 属性指定字体的粗细

字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如

-

用于标题，而

仅用于段落。

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

绝对尺寸：

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

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

注释：普通文本（如段落）的默认大小为 16px（16px = 1em）

使用 vw 单位设置文本大小，视口宽度（“viewport width”），即字体大小随窗口大小变化。

字体属性

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

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

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

例：font: italic small-caps bold 12px/30px Georgia, serif;
注意：font-size 和 font-family 的值是必需的。缺少其他值之一，则会使用其默认值