CSS基础4-文字与背景

文字大小

---

font-size:*px|*em|*rem

注：

1. px绝对尺寸

2. em相对尺寸是父元素大小的倍数如父元素10px,子元素2em则子元素为20px

3. rem绝对尺寸是根元素html文字大小的倍数

文字颜色：color:颜色

---

颜色表示方式

1. 英文单词

2. #16进制

3. rgba(r,g,b,a)

文字类型

---

font-family:"文字1"，“文字2”

注：除通用字体库，首字母大写，字体用逗号隔开，多个字体时浏览器依次选用

文字粗细

---

font-weight:400|normal|700|bold

文字缩进

---

text-indent:*px|*em

文字对齐方式

---

text-align:left|right|center|justify两端对齐

文本修饰线

---

text-decoration:none|line-through|underline

文本样式

---

font-style:italic|oblique倾斜|normal

文本空格

---

1. letter-spacing:*px; 字母之间间距

2. word-spacing:*px; 单词之间间距

改变字母大小写

---

text-transform:属性值；

| 属性 | 含义 |

| :-: | :-- |

| capitalize | 每个单词第一个字母大写 |

| lowercase | 所有字母小写 |

| uppercase | 所有字母大写 |

行高

---

line-height:*px;

如：

1. 让一行元素垂直居中

2. 多行文字调整行间距

这是测试文字

---

背景相关样式

=========================================================================

1. 背景颜色background-color:颜色；

2. 背景图片background-image:url()

3. 背景平铺方式（是非重复）background-repeat:no-repeat|repeat-x

4. 背景起始位置background-position:*；

• 关键字：关键字总是成对出现

如：左上 left top|左下 left bottom|

注：如果只有一个值，缺失补充为center

• 百分比值法：0% 0% 左上角|100% 100% 右下角

• 长度计量法：background-position:200px 50px;表示距离左50px,距离上50px

5. 背景裁剪background-clip:border-box|padding-box|content-box;

6. 添加背景图像background-image:url();

7. 背景位置原点background-origin

表示图像从哪开始填充,与clip相同

属性值：border-box|padding-box|content-box;

8. 背景附加方式background-attachment

• scroll默认值图片随滚动条滚动

• fixed图片在原来位置上，不随滚动条滚动

• local图片自己滚动机制

9. 图片背景大小background-size:*px;

10. 多背景

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

加入社区》https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0