CSS属性

像素

屏幕是是由若干个小点组成的，这些小点就是像素（px），像素点越小，呈现的内容就越清晰、越细腻。

颜色的表示

颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，颜色名这种方式表达的颜色比较单一，所以用的并不多，如：

• 红色：red
• 绿色：green
• 蓝色：blue
• 紫色：purple

rgb/rgba

编写方式：使用红、黄、蓝这三种光的三原色进行组合

• r：红色
• g：绿色
• b：蓝色
• a：透明度（透明度的值是0~1，1是不透明）

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */

/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

HEX/HEXA

HEX的原理同与rgb一样，依然是通过：红、绿、蓝色 进行组合，只不过要用6位（分成3组） 来表示，格式为：#rrggbb

每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ）

每一种光的最小值是： 00 ，最大值是：ff

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */


/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */


/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */

HSL/HSLA

HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)

色相：取值范围是 0~360 度，具体度数对应的颜色如下图：

饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）

亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）

HSLA 其实就是在 HSL 的基础上，添加了透明度。

字体属性

字体大小

属性名：font-size

作用：控制字体的大小

语法：

div {
    font-size: 40px;
}

注意：

• Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失
• 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小
• 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了
• 由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，每个字体设计都会设计x的位置，这决定了基线
• 通常情况下，文字相对字体设计框，并不是垂直居中的，而是靠下一些

字体族

属性名：font-family

作用：控制字体类型

语法：

div {
    font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}

注意：

• 使用字体的英文名字兼容性会更好，具体的英文名可以百度查看

• 如果字体名包含空格，必须使用引号包裹起来

• 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）

• windows默认字体是微软雅黑，Mac默认字体是San Francisco

字体风格

属性名：font-style

作用：控制字体是否为斜体

常用值：

• normal：正常（默认值）

• italic：斜体（使用字体自带的斜体效果），推荐使用这个

• oblique：斜体（强制倾斜产生的斜体效果）

语法：

h1 {
    font-style: italic;
}

字体粗细

属性名：font-weight

作用：控制字体的粗细

关键词：

• lighter：细
• normal： 正常
• bold：粗
• bolder：很粗 （多数字体不支持）

数值：

• 100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）

• 100~300等同于lighter，400~500等同于normal，600及以上等同于bold

语法：

div {
    font-weight: bold;
}

div {
    font-weight: 600;
}

字体复合写法

属性名：font

作用：将上述所有字体相关的属性复合在一起编写

编写规则：

• 字体大小、字体族必须都写上

• 字体族必须是最后1位、字体大小必须是倒数第2位

• 各个属性间用空格隔开

语法：

p {
    font: bold italic 40px "PingFang SC", "STHeiti";
}

文本属性

文本颜色

属性名：color

作用：控制文字的颜色

可选值：常用rgb/rgba、HEX/HEXA

• 颜色名

• rgb或rgba

• HEX或HEXA （十六进制）

• HSL或HSLA

语法：

div {
    color: rgb(112, 45, 78);
}

文本间距

字母间距：letter-spacing，包括中文

单词间距：word-spacing（通过空格识别单词）

属性值为像素px，正值让间距增大，负值让间距缩小

语法：

p {
    letter-spacing: 10px;
    word-spacing:10px;
}

文本修饰

属性名：text-decoration

作用：控制文本的各种装饰线

可选值：

• none： 无装饰线（常用）

• underline：下划线（常用）

• overline： 上划线

• line-through： 删除线

可搭配如下值使用：

• dotted：虚线
• wavy：波浪线
• 也可以指定线的颜色

语法：

p {
     text-decoration: overline;
     text-decoration: underline wavy;
     text-decoration: underline wavy red;
 }

文本缩进

属性名：text-indent

作用：控制文本首字母的缩进

属性值：css中的长度单位，如：px

语法：

div {
    text-indent: 40px;
}

文本对齐_水平

属性名：text-align

作用：控制文本的水平对齐方式

常用值：

• left：左对齐（默认值）

• right：右对齐

• center：居中对齐

语法：

div {
    text-align: center;
}

行高

属性名：line-height

作用：控制一行文字的高度

可选值：

• normal：由浏览器根据文字大小决定的一个默认值
• 像素px
• 数字：参考自身font-size的倍数（常用）
• 百分比：参考自身font-size的百分比

div {
    font-size: 40px;
    line-height: 60px;
    background-color: red;
    /*
    line-height: normal%;
    line-height: 1.5;
    line-height: 150%;
    */
}

/* p继承了div中的行高，会直接计算，60*1.5 */
div{
    font-size: 40px;
    background-color: red;
    line-height: 1.5;
}

p{
    font-size: 60px;
    background-color: chocolate;
}

<div>雪压枝头低<p>虽低不着泥</p></div>

注意：

1. line-height过小会产生文字重叠，且最小值是0，不能为负数

2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值

3. line-height和height是什么关系？设置了height，那么高度就是height的值，未设置height则根据line-height计算高度

应用场景：

1. 多行文字控制行间距

2. 对于单行文字：让height等于line-height，可以实现文字垂直居中

备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

文本对齐垂直

1. 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐
2. 居中：对于单行文字，让height = line-height即可，多行的使用定位

div{
    font-size: 40px;
    background-color: red;
    height: 100px;
    /* 居中对齐 */
    line-height:100px;
    /* 底部对齐 */
    line-height:160px;
}

vertical-align

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式，vertical-align不能控制块元素

常用值：

• baseline（默认值）：使元素的基线与父元素的基线对齐
• top：使元素的顶部与其所在行的顶部对齐
• middle：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
• bottom：使元素的底部与其所在行的底部对齐

div{
    font-size: 80px;
    background-color: red;
}
span{
    font-size: 40px;
    background-color: red;
    vertical-align: top;
}

<div>学习前端<span>还是学习后端</span></div>

列表属性

列表相关的属性，可以作用在ul 、ol、li元素上

属性名	含义	属性值
list-style-type	设置列表符号	none：不显示前面的标识（常用） square：实心方块 disc：圆形 decimal：数字 lower-roman：小写罗马字 upper-roman：大写罗马字 lower-alpha：小写字母 upper-alpha：大写字母
list-style-position	设置列表符号的位置	inside：在 li 的里面 outside：在 li 的外边
list-style-image	自定义列表符号	url(图片地址)
list-style	复合属性	没有数量、顺序的要求

    <style>
						ul {
						    list-style: decimal inside url("./图标.png");
						}
    </style>
    
<ul>
    <li>不知火舞</li>
    <li>干将莫邪</li>
    <li>上官婉儿</li>
</ul>

表格属性

边框相关属性

边框相关属性（其他元素也能用）

属性名	含义	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border	边框复合属性	没有数量、顺序的要求

table{
    border: 2px red dashed;
}

table独有属性

只有<table>标签才能使用

属性名	功能	属性值
table-layout	设置列宽度	auto：自动，列宽根据内容计算（默认值） fixed：固定列宽，平均分
border-spacing	单元格间距	CSS 中可用的长度值 生效的前提：单元格边框不能合并
border-collapse	合并单元格边框	collapse：合并 separate：不合并
empty-cells	隐藏没有内容的单元格	show：显示，默认 hide：隐藏 生效前提：单元格不能合并
caption-side	设置表格标题位置	top：上面（默认值） bottom：在表格下面

table{
    border: 2px red solid;
    width: 500px;
    table-layout: fixed;
    border-spacing: 2px;
    border-collapse: collapse;
    empty-cells: hide;
    caption-side: top;
}

背景属性

属性名	功能	属性值
background-color	设置背景颜色	符合 CSS 中颜色规范的值 默认背景颜色是 transparent
background-image	设置背景图片	url(图片的地址)
background-repeat	设置背景重复方式	repeat：重复，铺满整个元素，默认值 repeat-x：只在水平方向重复 repeat-y：只在垂直方向重复 no-repeat：不重复
background-position	设置背景图位置	通过关键字设置位置： 写两个值，用空格隔开 水平：left、 center、right 垂直：top、 center 、bottom 如果只写一个值，另一个方向的值取center 通过长度指定坐标位置： 以元素左上角，为坐标原点，设置图片左上角的位置 两个值，分别是 x 坐标和 y 坐标。 只写一个值，会被当做 x 坐标，y 坐标取 center
background	复合属性	写两个值，用空格隔开没有数量和顺序要求

div {
    width: 500px;
    height: 500px;
    background: red url("./图标.png") repeat left;
}

鼠标属性

属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer：小手 move：移动图标 text：文字选择器 crosshair：十字架 wait：等待 help：帮助

div {
    width: 500px;
    height: 500px;
    background-color: blue;
    cursor: pointer;
  
    /* 自定义鼠标光标 */ 
  	cursor: url("./arrow.png"),pointer;
}