3.常用元素属性
3.1字体属性
✨设置字体
方式：
选择器 { font-family: ; }
- 字体名称可以用中文, 但是不建议。
- 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
- 如果字体名有空格, 使用引号包裹.
- 建议使用常见字体, 否则兼容性不好.
<style> div { font-family: 'Microsoft YaHei'; } span { font-family: '宋体'; } </style> <div>你好,世界</div> <span>你好,Java</div>
代码效果：
✨字体大小
方式：
选择器 { font-size: ; }
- size的单位通常使用px，px是像素含义。
<style> div { font-family: 'Microsoft YaHei'; font-size: 50px; } span { font-family: '宋体'; font-size: 30px; } </style> <div>你好,世界</div> <span>你好,Java</div>
代码效果：
✨字体粗细
方式：
选择器 { font-weight: ; }
- 可以使用数字表示粗细
- 也可以使用
bold表示
<style> div { font-weight: bold; } span { font-weight: 100; } </style> <div>你好,世界</div> <span>你好,Java</div>
代码效果：
✨文字样式
方式：
选择器 { font-style: ; }
- 一般我们都是将文字从倾斜改为不倾斜，很少从不倾斜改为倾斜
<style> div { /* 不倾斜 */ font-style:normal; } span { /* 倾斜 */ font-style: italic; } </style> <div>你好,世界</div> <span>你好,Java</div>
代码效果：
3.2文本属性
✨文本颜色
方式：
选择器 { color: ; }
这里的参数可以是十六进制的数
可以是一个函数rgb（），它里面有三个参数可以认为是R,G,B； R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
预定义的颜色值(直接是单词)
<style> div { color: #ff0; } span { color: rgb(25, 33, 50); } p { color: red; } </style> <div>你好,世界</div> <span>你好,Java</span> <p>你好,看这篇文章的帅哥靓女</p>
代码效果：
✨文本对齐
方式：
选择器 { text-align: ; }
- 它当中有三个参数分别是
left(左对齐)，center(居中对其),right(右对齐)。
<style> .text-align .one { text-align: left; } .text-align .two { text-align: right; } .text-align .three { text-align: center; } </style> <div class="text-align"> <div class="one">左对齐</div> <div class="two">右对齐</div> <div class="three">居中对齐</div> </div>
代码效果：
✨文本装饰
方式：
选择器 { color: ; }
常见的取值：
underline 下划线. [常用] none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. [不常用] line-through 删除线 [不常用]
div { text-decoration: underline; } span { text-decoration: line-through; } p { text-decoration: overline; } </style> <div>你好,世界</div> <span>你好,Java</span> <p>你好,看这篇文章的帅哥靓女</p>
代码效果：
✨文本缩进
只对第一行生效
方式：
选择器 { text-indent: [值]; }
- 单位可以使用
px或者em - 使用
em作为单位更好. 1 个em就是当前元素的文字大小 - 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<style> div { text-indent: 2em; } p { text-indent: 0em; } </style> <div>你好,世界 你好,Java</div> <p>你好,看这篇文章的帅哥靓女</p>
代码效果：
3.3背景属性
✨背景颜色
方式：
选择器 { background-color: }
- 背景颜色的格式和文本颜色的格式相似，这里不再赘述了。
✨背景照片
方式：
选择器 { background-image: url(); }
- url中填写绝对路径和相对路径都可以
- url可以加引号，也可以不加引号
✨背景平铺
方式：
选择器 { background-repeat: ; }
参数如下：
- repeat: 平铺
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
- 在不设置背景平铺的参数时，整个屏幕都会铺满
✨背景位置
方式：
选择器 { background-position: x y; }
三种风格：
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
注意
当给出的是方位名词是只有一个时，没给的哪一个就默认居中，在给出的时精确的数字时也是如此。
我们可以将这个页面想象成是一个坐标轴我们给出的参数都是相对于坐标轴来进行使用得到。
✨背景尺寸
方式：
选择器 { background-size: ; }
可用参数如下:
可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
