一、字体属性
- 字体名称可以用中文, 但是不建议.
- 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
- 如果字体名有空格, 使用引号包裹.
- 建议使用常见字体, 否则兼容性不好.
设置字体
设置大小和粗细
二、文本属性
文本颜色
认识 RGB
我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色
文本对齐
不光能控制文本，还能控制图片的对齐
文本缩进
行高
三、背景属性
二、元素的显示模式
🍑块级元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 块级元素可以修改高度和宽度 --> <style> .test { width: 100px; height: 50px; background-color: brown; } .parent { width: 200px; height: 100px; background-color: aqua; } .child { height: 20px;/* 不写 width, 默认和父元素一样宽 不写 height, 默认为 0 (看不到了) */ background-color: bisque; } span { width: 100px; height: 100px; background-color: darkcyan; } </style> <!-- 行级元素无法修改高度和宽度，及时你在选择器了设置了，也不会生效,但背景可以设置 --> </head> <body> <div class="test"> 这是一个块级元素 </div> <div class="parent"> 这是一个块父元素 <div class="child"> 这是一个子级元素块 </div> </div> <span> 这是一个行级元素 </span> </body> </html>
🍑行内元素与内联元素
🌰 l栗子
一个有关的前端面试题
🍑元素的显示模式
栗子
此外，display还有一个功能：可以控制元素是否显示，可以通过他来隐藏元素
