| aliases | ||||
|---|---|---|---|---|
| tags |
|
|||
| created | 2023-08-18 12:44:52 -0700 | |||
| modified | 2025-11-05 02:55:03 -0800 |
选择器{
属性1：属性值;
属性2：属性值;
}属性即要作用的目标对象的范围或方面。如要对某元素的 字体大小 进行设置，就可以使用 font-size 属性进行设置。
使用 font-family 指定要使用哪个字体。
使用 color 属性来指定字体的颜色，可以是颜色名称，也可以是十六进制的数值。
使用 font-size 属性来指定字体的大小。
字体大小单位常用有两个：
px：像素em：倍数
选择器名称是 Html 中所有标签名称。
示例，如果要对一个 <p> 标签设置样式，可以如下这样：
p {
color:#333;
}类选择器使用 . 进行标识，后面紧跟 类名：
.类名{
属性:属性值;
}id 选择器使用 # 进行标识，后紧跟 id 名：
#id{
属性:属性值;
}通配符选择器用 * 号表示，它是所有选择器中作用范围最广，能匹配页面中所有元素：
*{
属性:属性值;
}复合选择器是由两个或多个基础选择器通过不同的方式组合而成。
交集选择器也称为「标签指定式选择器」。
由两选择器构成，其中第 1 个为标签选择器，第 2 个原则上可以是 类选择器 或 id 选择器，两选择器间不能有空格。
交集选择器其实就是对 标签选择器 或 类选择器 作进一步更精确的「筛选」。
标签名.类名{
属性:属性值;
}后代选择器，又称为「包含选择器」。用于选择某元素内部的子元素。
后代选择器使用空格表示。
元素1 元素2 {
...
}[!info]
元素 1 是元素 2 的父元素。
并集选择器是各个选择器通过逗号 , 连接而成，任何形式的选择器（包括 标签选择器、类选择器 以及 id 选择器 等）都可以作为并集选择器的一部分。
属性选择器又因为在属性通配符上分为三类：^、$ 和 *。
[!info]
^、$和*，表示的意义，跟「正则表达式」完全一致。
^：属性值以某值开头$：属性值以某值结尾*：属性值包含了某值
标签[属性^=属性值]{
...
}p[id^="one"]{
}[!info]
id属性的属性值以one开头的<p>标签。
标签[属性$=属性值]{
...
}p[id$="main"]{
}[!info]
id属性的属性值以main结尾的<p>标签。
标签[属性*=属性值]{
}p[id*="demo"]{
}[!info]
id属性的属性值中有demo的<p>标签。
该选择器主要用来选择某个元素的直接子元素。
[!info]
与 后代选择器 区别：后代选择器不一定是直接子元素，选择范围相对更大。
子元素选择器使用 > 来表示。
元素1>元素2{
...
}Tip
元素 1 是元素 2 父元素，并且元素 2 是元素 1 的直接子元素，即第一级子元素。
该选择器使用加号 + 来连接前后两个选择器。选择器中的两个元素有同个父元素，而且第 2 个元素必须紧跟第 1 个元素。
该选择器使用加号 ~ 来连接前后两个选择器。选择器中的两个元素有同个父元素，而且第 2 个元素不必紧跟第 1 个元素。
#css/列表项符号
list-style-type 属性用于控制列表项符号的类型。
| 属性值 | 描述 |
|---|---|
disc |
实心圆 （无序列表） |
circle |
空心圆 （无序列表） |
square |
实心方块（无序列表） |
decimal |
阿拉伯数字 |
deciman-leading-zero |
以 0 开头的阿拉伯数字 |
lower-roman |
小写罗马数字 |
upper-roman |
大写罗马数字 |
lower-alpha |
小写英文字母 |
upper-alpha |
大写英文字母 |
lower-latin |
小写拉丁字母 |
upper-latin |
大写拉丁字母 |
hebrew |
传统希伯来编号 |
cjk-idographic |
中日韩表意数字 |
geogian |
传统乔治亚编号 |
armenian |
传统亚美尼亚编号 |
none |
不使用项目符号 |
list-style-image 属性可以为各列表项设置图像，算是 list-style-type 的补充。
list-style-position 属性是设置 列表项符号 的位置。
取值有两种：
inside：列表项符号位于列表文本以内，占用<li>的宽度。outside：列表项符号位于列表文本以外，不占用<li>的宽度。
[!info]
简单说，
list-style-position这个属性就是决定列表项符号是否算进<li>中。
list-style 是一个复合属性，可以将列表相关样式都综合在一个属性中。
语法：list-style: 列表项目符号 列表项目符号位置 列表项目图像
盒模型是 CSS 中最重要、最基础的部分，它指定 块级元素 如何显示及如何相互交互。
#css/边框
边框以外是 外边距。
borkder-style 设置顺序：上、右、下、左。
border-width 设置有 4 值、2 值、 3 值及 1 值。1 值就是 4 条边框都设置同一个值。其余三种值的顺序如下：
- 4 值：上、右、下、左
- 3 值：上、左右、下
- 2 值：上下、左右
直接包围内容的部分是「内边距」，称为「内填充」。
内边距边缘是 边框。
#css/内边距
padding 设置的顺序与 边框（border-style、border-width）类似，即上、右、下、左。
而 padding 的 2 值、3 值和 4 值设置顺序与 border-style 或 border-width 一样。
#css/外边距
Emmet 原来叫「zen coding」。
它是一套 CSS「速写」语法规则。