@SovietPower 2021-10-26T16:10:15.000000Z 字数 10159 阅读 989

CSS 笔记

学习笔记

CSS 笔记

作业部落链接：https://www.zybuluo.com/SovietPower/note/1824527
参考：
https://www.runoob.com/css/css-tutorial.html
https://www.w3school.com.cn/css/index.asp

目前：https://www.runoob.com/css/css-grouping-nesting.html

HTML 样式

CSS（Cascading Style Sheets，层叠样式表）用于渲染HTML元素标签的样式（定义如何显示HTML元素）。

CSS可以通过以下方式添加到HTML中:

内联样式：在HTML元素中使用style属性。
内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS。
外部样式表（外部引用）：使用外部CSS文件（样式表，样式通常存储在外部的.css样式表文件中）。
最好的方式是通过外部引用CSS文件。内联样式更方便。

CSS修饰标签的方式分为两种：内联和外引。
对于大部分标签，内联和外引两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如<a>标签，修改其颜色特性，必须直接修改<a>标签的特性才可。

CSS规则由两个主要部分构成：选择器和一条或多条声明。
选择器是需要改变样式的HTML元素。每条声明是一个属性:值对，属性(property)是要设置的样式属性(style attribute)，每个属性都有一个值。
每条声明以分号结束，所有声明用大括号括起来。

如：h1 {color:blue; font-size:12px;}，h1为选择器，color:blue、font-size:12px为两条声明，冒号前为属性、后为值。
注意属性值和其单位间不能留有空格，如：font-size: 20px而不是font-size: 20 px。
几乎所有属性值都可使用inherit（大概），所以可能不会标出该值。简写属性值也可以是inherit。

为了让其可读性更强，通常一行只写一句声明。

CSS注释类似C++，以/*开始、以*/结束。但没有//。

简单选择器

选择器包含五类：

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

以下为几类简单选择器，其根据id、类或元素名称选择元素。

选择器	例	例子描述
`#id`	`#para`	选取所有`id="para"`的元素
`.class`	`.para`	选取所有`class="para"`的元素
`*`	`*`	选取页面所有元素
`element`	`p`	选取页面所有`<p>`元素
`element1, element2, ...`	`h1, h2`	选取页面所有`<h1>, <h2>`元素

id选择器
id选择器根据id属性选择HTML元素，为其指定特定的样式。
id选择器以#开头，后加对应的id。

注意：id不能以数字开头。

如：对于id="para1"的元素，其CSS为#para1 {key:value;}。

类选择器
类选择器根据class属性选择HTML元素，为其指定特定的样式。
类选择器以.开头，后加对应的class名称。

可以指定只有特定的HTML元素会受到该类选择器影响。
同一个HTML元素可以属于多个类，只需在class中用空格分隔，如<p class="classA classB"></p>。
注意：class名称不能以数字开头。

如：
对于class="para"的元素，其CSS为.para {key:value;}。
若要只修改class="para"的<p>元素，其CSS为p.para {key:value;}。

元素选择器/标签选择器
元素选择器根据元素名称选择HTML元素，为其指定特定的样式。
元素选择器即为对应元素名称。

如：
对于页面上的所有<p>元素，其CSS为p {key:value;}。
body, html都是可行的选择器。

通用选择器
通用选择器选择页面上的所有HTML元素。
通用选择器为*，即* {key:value;}。

分组选择器
分组选择器选择页面上需要具有相同样式定义的HTML元素。
分组选择器为若干元素名称，用,分隔，这些元素会被同时设置指定格式。

如：将页面上的<h1>, <h2>, <p>元素内容居中、颜色设为红色，CSS为h1, h2, p {text-align: center; color:red;}。

使用CSS

当读取到样式表时，浏览器会根据它格式化HTML文档。
有三种插入样式表的方法：内联样式（Inline Style）、内部样式表（Internal Style Sheet）、外部样式表（External Style Sheet）。

内联样式

在HTML元素中使用style="key:value;"。

因为格式与内容混合，会比较乱，且只对一个元素生效，所以应少用。

内部样式表

在头部使用<style type="text/css"></style>包含样式。

为单个文档设置样式时使用。

外部样式表

在头部使用<link>链接到样式表：<link rel="stylesheet" type="text/css" href="style_name.css">。
浏览器会读取style_name.css，并根据它格式化文档。可以同时引用多个。
外部样式表以.css作为后缀，不能包含任何的HTML标签。

为多个文档设置某个样式时使用。最常用。

多重样式

同一元素的样式可以被多次声明（内联样式，内部样式，页面引用的多个外部样式）。被多次声明的属性使用哪个值，取决于对应声明的优先级。
一般情况下，优先级：
$内联样式>内部样式>外部样式>浏览器默认样式$ （如果在声明内部样式之后，再调用外部样式，则该外部样式优先级更高）
$内联样式>\text{id}选择器>类选择器=伪类选择器=属性选择器>元素选择器=伪元素选择器>通用选择器$

属性中具有!important的声明拥有最高优先级。若同一属性有多个!important，则再计算优先级。
尽量少使用!important，可能破坏很多格式。

具体优先级计算可见：https://www.runoob.com/w3cnote/css-style-priority.html

背景

颜色
CSS中，有多种表示颜色的方式：
1. 十六进制，即HEX值。如：#ff0000。
2. RGB。如：rgb(255,0,0)
3. RGBA。alpha范围为 $0~1.0$ ， $0$ 为完全透明， $1$ 为完全不透明。如：rgba(255,0,0,0.5)
4. 颜色名称。如：red, lightblue。
5. 使用色相、饱和度、明度（HSL, hue, saturation, lightness）。如：hsl(0, 100%, 50%)。
6. 使用色相、饱和度、明度、透明度（HSLA, hue, saturation, lightness, alpha）。如：hsla(0, 100%, 50%, 0.5)。

opacity属性可指定颜色的透明度，范围为 $0~1.0$ ， $0$ 为完全透明， $1$ 为完全不透明。
注意：对某元素使用opacity时，其所有子元素都会继承该透明度。若不想子元素继承透明度，可使用RGBA。

background-color
定义元素的背景颜色。

background-image
定义元素的背景图像。
图像默认为平铺重复显示，覆盖整个元素实体。

background-repeat
取值为repeat-x或repeat-y时，图像只在水平/竖直方向重复平铺。
取值为no-repeat时，图像不进行重复。

background-attachment
设置图像是否固定或其移动方式。
取值：
scroll：默认值。背景图片随页面滚动而滚动。
fixed：背景图片固定，不随页面滚动而滚动。
local：背景图片随元素内容滚动而滚动。
initial：设置为该属性的默认值。
inherit：指定该值从父元素继承。

background-position
改变图像在背景中的位置。
可取值为：left, right, top, bottom，不冲突的两个方向可以同时使用，用空格分隔。如：background-position: right top;。

background 背景简写定义
可将上述五种属性统一用background属性定义（简写），用空格分割。
属性值的顺序为：background-color, background-image, background-repeat, background-attachment, background-position。
可以不填写某些属性值。

如：body {background:#ffffff url('img_tree.png') no-repeat right top;}。

文本

https://www.runoob.com/css/css-text.html

text-decoration
用划线修饰文本，可定义划线颜色、格式。是三种属性的简写：text-decoration-line, text-decoration-color, text-decoration-style。
具体见 https://www.runoob.com/cssref/pr-text-text-decoration.html。
text-decoration-line取值：
none：无特殊格式（比如取消超链接的下划线）。
overline：在文本上显示上划线。
line-through：在文本中间显示划线（删除线）。
underline：在文本上显示下划线。
blink：定义闪烁效果的文本。但浏览器不会显示。

text-transform
控制文本的大小写。
可为该属性的三个值设计三个类，以便使用。
取值：
uppercase：所有字母大写。
lowercase：所有字母小写。
capitalize：每个单词首字母大写。

其它属性：
color：文本颜色。
direction：文本方向（从左到右或从右到左，取值：ltr, rtl, inherit）。
letter-spacing：字符间距（字母、汉字等所有字符）。
line-height：行高。一般在 $110\%\sim 120\%$ 。
text-align：文本对齐（取值：left, right, center, justify, inherit）。
text-decoration：划线修饰。
text-indent：文本缩进（仅限第一行）。
text-shadow：文本阴影。
text-transform：文本的大小写。
vertical-align：文本垂直对齐格式。
white-space：元素中空白的处理方式。
word-spacing：英文单词的间距。

字体

font
简写属性，依次为font-style, font-variant, font-weight, font-size/line-height, font-family。
font-size和font-family的值是必需的。

font-family
设置文本的字体系列（即字体）。
如果字体名称中有空格，或为汉字且超过一个字，需用引号包含。

可以且应当设置多个字体（逗号分隔），当浏览器不支持第一种字体时，会依次尝试之后的字体。
常用的字体组合，可参考：Web安全字体组合。

例：p {font-family: "Times New Roman", "宋体", Times, serif;}

font-size
设置字体大小。
如果不设置，默认大小为16像素（即16px=1em，普通段落的大小）。

字体大小的数值有三种表示：

使用px，具体的像素值（绝对大小，不允许用户在浏览器中改变文字大小）。
使用em。1em与当前字体大小相等（默认为1em=16px），会随字体大小改变而改变（相对大小，允许用户在浏览器中改变文字大小）。
同时使用百分比和em。将body的font-size设为100%，其余元素用em表示（相对大小，允许用户在浏览器中改变文字大小）。

font-style
指定文字是否为斜体。
取值：
normal：标准字体。
italic：斜体显示。
oblique：将文字倾斜显示，类似斜体。有些文字没有定义斜体，只能将文字倾斜显示。

font-variant
将段落显示为小型大写字母字体。
取值：
normal：默认。标准字体。
small-caps：显示为小型大写字母字体。

font-weight
设置字体粗细。
取值：
normal：默认。标准粗细。
bold：粗体。
bolder：更粗的字体。
lighter：更细的字体。
100, 200, ..., 900：由细到粗的字体。400与normal相同，700与bold相同。

链接

链接有四种状态：
a:link： 未访问过的链接。
a:visited： 已访问过的链接。
a:hover： 鼠标移动到链接上时。
a:active： 鼠标点击时。

每种状态可以分别设置样式。但设置多个状态的样式时，必须满足两个顺序规则（可在同一行）：
1. a:hover必须在a:link和a:visited之后。
2. a:active必须在a:hover之后。

后面（如a:hover, a:active）未指定的属性则与前面定义过的（如a:link, a:visited）相同。

常见的链接修饰：
取消链接未被选中时的下划线：

a:link, a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

指定不同背景颜色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover, a:active {background-color:#FF704D;}

选中时改变链接文字大小、字体、颜色等。

列表

CSS可修改HTML列表的列表项标记（默认时，无序列表使用特殊图形，如黑点、方框；有序列表使用数字或字母）。

list-style-type
简单指定列表项标记。
如：

ul.circle {list-style-type:circle;} /* 圆点类无序列表 */
ul.squre {list-style-type:square;} /* 实心方框类无序列表 */
ul.squre {list-style-type:none;} /* 无列表项标记类无序列表 */
ol.ur {list-style-type:upper-roman;} /* 罗马字体标号类有序列表 */
ol.la {list-style-type:lower-alpha;} /* 小写字母标号类有序列表 */

list-style-position
设置列表项标记相对于内容的位置。
取值：
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit：从父元素继承。

list-style-image
将列表项标记设为指定图像（通过url等）。
如：

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

注意，图像标记的显示效果可能因浏览器而异。要使所有浏览器显示效果相同，可以取消标记，然后在每个列表项（li）前插入图像，并使列表文字后移。
如：

ul /* ol同理 */
{
    list-style-type: none;
    padding: 0px; /* 取消列表默认的内边距 */
    margin: 0px; /* 取消列表默认的外边距 */
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat; /* 设置图像不重复 */
    background-position: 0px 5px; /* 插入图像位置 */
    padding-left: 14px; /* 文字后移 */
}

list
简写属性，分别为：list-style-type, list-style-position, list-style-image。
可不填某些值。

盒子模型

所有HTML元素都可看作盒子，因为每个元素除内容外，都有其外封装：边距、边框、填充。
盒子模型（box model）：

Margin（外边距）： 边框外的区域，是透明的。
Border（边框）： 内边距和内容外的边框。
Padding（内边距）： 内容周围的区域，是透明的。
Content（内容）： 盒子的内容，显示文本和图像。

当为元素指定高度height、宽度width、背景颜色等时，实际是设置的内容Content的高度、宽度、背景颜色。内边距、边框、外边距不受影响，需分别指定。
当padding减小时，多出的空间会被填充为元素背景颜色；但border之外的部分即margin控制的空间，永远保持透明不会被填充。

一个元素的实际宽度 = 宽度+左填充+右填充+左边框+右边框+左边距+右边距
一个元素的实际高度 = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

margin, padding取值的百分比计算方式：
对于非定位元素，top, bottom, left, right都参照其包含块（父元素）的宽。
对于相对定位元素，参照为其包含块的高或宽。

当书写方式为横向，即writing-mode: horizontal-tb;时，纵向值top, bottom取决于包含块的宽度，横向值left, right取决于包含块的高度。
当书写模式为纵向，即writing-mode: vertical-rl;时，相反，纵向值top, bottom取决于包含块的高度，横向值left, right取决于包含块的宽度。

对于绝对定位元素，参照为最近一级非静态定位的父元素（没有就是整个页面<html>）的高或宽。

例：设一个块级包含容器宽w px，高h px，一个块级相对定位子元素定义margin: 10% 5%;（padding: 10% 5%;同理），文字为横向。
则该元素有：margin-top = margin-bottom = 0.1w px，margin-left = margin-right = 0.05h px。

border 边框

内容外的边框，与内容的距离为内边距。

border-style
定义边框的样式。
取值：
none：默认。无边框。
dotted：点线边框。
dashed：虚线边框。
solid：实线边框。
double：定义两个边框。两个边框的宽度和 border-width 的值相同。
groove：定义3D沟槽边框。效果取决于边框的颜色值。
ridge：定义3D脊边框。效果取决于边框的颜色值。
inset：定义3D嵌入边框。效果取决于边框的颜色值。
outset：定义3D突出边框。效果取决于边框的颜色值。

border-width
指定边框的宽度。
除使用px, em等数值外，还可使用三个特殊值thick, medium（默认值）, thin。
注意：三个特殊值的具体数值并不确定，可由用户定义。

border-color
设置边框的颜色。
除颜色值外，还可设为transparent。
注意：使用border-style指定边框后，才能看到颜色。

为不同边框分别设置属性
每个属性都可分别为不同方向的边框单独设置属性值。
如border-style，可替换为4个属性：border-top-style, border-right-style, border-bottom-style, border-left-style。
如border-color，同样可用4个属性：border-top-color, border-right-color, border-bottom-color, border-left-color。
border-width同理。
不推荐使用4个属性分别表示，会增加代码长度，可能影响网页效率。

也可为border-style指定1到4个值，表示不同方向属性。
当设置4个值时，每个值依次表示：上边框、右边框、下边框、左边框。
当设置3个值时，每个值依次表示：上边框、左右边框、下边框。
当设置2个值时，每个值依次表示：上下边框、左右边框。
当设置1个值时，该值表示所有边框。

如：border-style: dotted solid double dashed;，上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed。

border
简写属性，分别为：border-width, border-style, border-color。
border-style是必需值。

还有类似的4个简写属性：border-top, border-right, border-bottom, border-left。

outline 轮廓

边框的外围。
轮廓不属于元素范围的一部分，其高/宽度与元素的高/宽度无关，且可能与其它元素重叠。
其属性类似border。

outline
简写属性，分别为：outline-color, outline-style, outline-width（顺序与border相反）。

outline-color
设置轮廓的颜色。

outline-style
设置轮廓的样式。
取值与border-style相同。

outline-width
设置轮廓的宽度。
取值与border-style相同（也包含thick, medium（默认值）, thin）。

margin 外边距

定义元素周围、border之外的空间大小。
同border，既可用margin指定1到4个值，表示不同方向属性（规则与border相同），也可使用4个属性：margin-top, margin-right, margin-bottom, margin-left。
取值：数值、百分比或auto（浏览器自动调整）。

padding 内边距

定义元素周围、内容与border间的空间大小。当border减小时，多出的空间会被填充为元素背景颜色。
同border，既可用padding指定1到4个值，表示不同方向属性（规则与border相同），也可使用4个属性：padding-top, padding-right, padding-bottom, padding-left。
取值：数值、百分比或auto（浏览器自动调整）。

定位

position属性定义元素的定位类型。有5种取值：static, relative, fixed, absolute, sticky。
元素使用top, right, bottom, left属性定位，但具体方式由position决定。
top, right, bottom, left分别定义元素上/右/下/左外边距边界与其包含块上/右/下/左边界之间的偏移。

其它定位属性：z-index, clip, cursor, overflow, overflow-x, overflow-y。
见：https://www.runoob.com/css/css-positioning.html 。

static定位静态定位
元素的默认值。
static即静态定位/没有定位，遵循正常文档流对象，top, right, bottom, left属性不会影响元素的位置。

fixed定位固定定位
元素的位置是相对于浏览器窗口大小进行偏移，即使窗口滚动它也不会移动。只要窗口大小不变就保持在固定位置。
相对窗口的位置由top等属性确定。
fixed定位会使元素的位置与文档流无关，因此不占据空间。fixed定位的元素会和其他元素重叠。

relative定位相对定位
元素的位置是相对于其静态位置（static时的位置）进行偏移。
相对定位只影响其显示位置，它原本所占的空间位置不会改变（即可能重叠其它元素）（即static时的位置）。
相对定位元素经常被用来作为绝对定位元素的容器块。

absolute定位绝对定位
元素的位置相对于最近的已定位（非静态定位）父元素进行偏移，如果没有，则相对于<html>。
absolute定位会使元素的位置与文档流无关，因此不占据空间。absolute定位的元素会和其他元素重叠。

sticky定位粘性定位
元素的位置取决于当前滚动位置。
当页面滚动超出目标区域时，表现为固定定位，它会固定在目标位置；否则表现为相对定位，会相对于其静态位置进行偏移。

堆叠顺序 z-index
使用非静态定位时，元素会覆盖页面上的其它元素。
z-index属性指定了元素的堆叠顺序，取值为任意整数（可正可负），默认为0。具有更大z-index值的元素会显示在较低z-index值的元素的上面。
若两个元素重叠，但未指定z-index或相等，则最后定位的元素会出现在上层。

：：
：：
：：