【JavaEE初阶】前端篇：CSS（下篇）

☕导航小助手☕

🍚写在前面

     🧇五、CSS的具体属性

           🥡🥡5.1 字体属性

                     🥟🥟🥟5.1.1 设置字体

                     🍔🍔🍔5.1.2 字体大小

                     🧀🧀🧀5.1.3 字体粗细

                     🥨🥨🥨5.1.4 文字样式

           🥮🥮5.2 文本属性

                     🍤🍤🍤5.2.1 文本颜色

                     🦪🦪🦪5.2.2 文本对齐

                     🍲🍲🍲5.2.3 文本装饰

                     🥩🥩🥩5.2.4 文本缩进

                     🥘🥘🥘5.2.5 行高

           🍛🍛5.3 背景属性

                     🍞🍞🍞5.3.1 背景颜色

                     🥪🥪🥪5.3.2 背景图片（重点）

           🥣🥣5.4 圆角矩形

           🍰🍰5.5 元素的显示模式

           🍜🍜5.6 盒模型

                     🍨🍨🍨5.6.1 边框

                     🍝🍝🍝5.6.2 内边距

                     🎂🎂🎂5.6.3 外边距

           🍱🍱5.7 弹性布局

---

写在前面

本篇博客是仅仅承接与上一篇博客的内容，若要学习完整的 CSS内容，可移步至上一篇博客，依次学习 ~

🚪传送门🚪【JavaEE初阶】前端篇：CSS（上篇）

五、CSS的具体属性

其实，CSS的具体属性还是非常多的，这里也是列举一些常见的属性进行介绍 ~

---

5.1 字体属性

在这一块儿用得最多的就是 字体大小 和 字体粗细 两个，其他的就留有个印像即可 ~

---

5.1.1 设置字体

字体，即使是在表是同一个文字符号的时候，也会有许多种不同的形式，比如说：微软雅黑、仿宋体、楷书、黑体、......

这里就不进行演示了 ~

---

5.1.2 字体大小

在之前的博客中已经使用过了，我们可以使用 font-size 来设置字体大小，其单位是 px（像素，当然 也支持其他的单位）~

比如：
font-size: 50px; => 设置成字体大小为50px

示例：

演示：

5.1.3 字体粗细

其实，并不一定借助 h标签（标题标签），也可以实现字体粗细的效果 ~

在 CSS 中，可以直接使用 font-weight属性 来设置字体粗细 ~

此时 无论是不是标题标签，都可以设置成功 ~

比如：
font-weight属性 后面所接的值 可以是英文单词，也可以是 数字：
font-weight: normal;      => 正常粗细（与 400等值）
font-weight: bold;        =>变粗（与 700 等值）
font-weight: lighter;     =>变细
font-weight: number;  (其中，只能写 整一百的数字，100最细 900最粗);

---

---

---

---

5.1.4 文字样式

文字样式 使用的是：font-style属性 ~

比如：
font-style: italic; => 设置倾斜
font-style: normal; => 取消倾斜

一般情况下，很少使用 设置倾斜，因为倾斜看起来很不好看 ~

而更多的是使用 取消倾斜，经常把 em标签/i标签 改成 不倾斜 ~

这里就不进行演示了 ~

5.2 文本属性

5.2.1 文本颜色

这个也已经使用过很多次了 ~

我们可以使用 color属性 来进行设置 ~

其中，color属性有三种写法：

1. 直接使用 单词
2. 使用 rgb 的形式
3. 使用 十六进制 的写法

比如：
color: green;            => 使用单词
color: rgb(100,150,200); => 使用rgb
color: #ff0000;          => 使用十六进制

---

---

不过需要注意的是，如果使用 十六进制的方式 改变文本的颜色，可能存在缩写的行为：

如：

aabbcc 缩写为 abc ~

ff0000 缩写为 f00~

当然，需要三个都一样，否则不能缩写：

如：

aaabaa 不可以缩写成 aaba ~

5.2.2 文本对齐

文本对齐 是来控制文本水平方向的对齐情况的：左对齐、右对齐、居中对齐 ~

使用 text-align属性，然后可以选择：left(左对齐)、right(右对齐)、center(居中对齐)~

示例1：

演示1：

---

示例2：

演示2：

---

示例3：

演示3：