【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的有关内容，今天我们将继续介绍CSS的相关属性和功能，让我们能够更加全面的认识它！！！！！！
提示：以下是本篇文章正文内容，下面案例可供参考
五、CSS的具体属性
其实，CSS的具体属性还是非常多的，这里也是列举一些常见的属性进行介绍;
5.1 字体属性
在这一块儿用得最多的就是 字体大小 和 字体粗细 两个，其他的就留有个印像即可;
5.1.1 设置字体格式
字体，即使是在表是同一个文字符号的时候，也会有许多种不同的形式，比如说：微软雅黑、仿宋体、楷书、黑体等等；
5.1.2 字体大小
在之前的博客中已经使用过了，我们可以使用 font-size 来设置字体大小，其单位是 px（像素，当然 也支持其他的单位）
比如：
font-size: 50px; => 设置成字体大小为50px代码示例：
演示结果：
5.1.3 字体粗细
在 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属性有三种写法：
- 直接使用 单词
- 使用 rgb 的形式
- 使用 十六进制 的写法
比如：
color: green; => 使用单词
color: rgb(100,150,200); => 使用rgb
color: #ff0000; => 使用十六进制
代码示例：
(1)使用单词：
（2）使用 rgb 的形式
（3）使用 十六进制 的写法
注意：
如果使用 十六进制的方式 改变文本的颜色，可能存在缩写的行为：
aabbcc 缩写为 abc ；
ff0000 缩写为 f00；
当然，需要三个都一样，否则不能缩写：
如：
aaabaa 不可以缩写成 aaba ；
5.2.2 文本对齐
文本对齐 是来控制文本水平方向的对齐情况的：左对齐、右对齐、居中对齐；
使用 text-align属性，然后可以选择：left(左对齐)、right(右对齐)、center(居中对齐)；
语法格式：
text-align：left => 左对齐；
text-align：right => 右对齐；
text-align：center => 居中对齐；
代码示例：
（1）左对齐：
演示（1）：
（1）右对齐：
演示（2）：
（3）居中对齐
演示（3）：
5.2.3 文本装饰
文本装饰 就相当于之前所介绍过的 下划线、删除线、上划线 之类的；
语法格式：
比如：
text-decoration: none; => 啥都没有；
text-decoration: underline; => 下划线；
text-decoration: overline; => 上划线；
text-decoration: line-through; => 删除线；
代码示例：
演示结果：
5.2.4 文本缩进
在 HTML 中，可以用 特殊字符 来实现缩进效果 ；
而在 CSS 中，如果想要实现首行缩进几个空格，就可以使用 文本缩进属性 ；
这个可以使用 text-indent属性 ，后面所接的数值就是所要缩进的数值 ；
语法格式：
比如：
text-indent: 50px; => 缩进50px；
代码示例和演示：
5.2.5 行高
行高 = 文字高度 + 行间距 ；
使用 line-height属性 来控制行高 ；可以通过行高，控制行间距的 ；
代码示例：
添加了行高之后：
代码示例：
演示：
5.3 背景属性
5.3.1 背景颜色
我们可以使用 background-color属性 来设置背景颜色 ；
语法格式：
比如：
background-color: grey; => 设置背景颜色为灰色；
代码举例和演示：
设置了背景颜色之后：
5.3.2 背景图片（重点）
使用 background-image: url(路径); 来设置背景图片 ；
其中，使用 background-image属性 来设置背景图片的方式 是平铺的 ；
语法格式：
比如：
background-image: url(image2/1.png); => 这个又是相对路径(当然，绝对路径也可以)
代码示例：
未设置背景图片：
演示1：
设置了背景图片之后：
演示结果：
但是，在实际生活中，我们可能想要 "平铺" 效果，也可能不想要 "平铺" 效果，这个时候就可以使用 background-repeat属性 来决定要不要 "平铺"，以什么样的方式实现 "平铺；
比如：
background-repeat: repeat-x; => 以水平方向平铺(横着铺，竖着不铺)
background-repeat: repeat-y; => 以竖直方向平铺(横着不铺，竖着铺)
background-repeat: no-repeat; =>不铺(只有原来设置的一张背景图片了)
代码示例：
没有平铺的效果：
演示：
一般的背景图片应该是居中比较好看，我们可以使用 background-position属性 来设置背景图片的位置 ；
background-position属性可以赋予的值有：
具体的数字,center,top,bottom,left,right 等，
我们可以通过这些，来控制背景图片所在的位置
比如：
background-position: right top; => 控制背景图片在右上角
background-position: center center; => 控制背景图片在中间
示例1：
演示1：
但是在一般情况下，我们不知道具体的像素位置是哪个，怎么设置呢？
我们可以这样来设置：
示例2：
演示2：
当然，我们也可以使用 background-size属性 来设置背景图片的尺寸
语法格式：
比如：
background-size: 300px 400px; => 宽度是300px，高度是400px
background-size: cover; => 图片会尽可能的填满背景
background-size: contain; => 图片会尽可能的填满背景
需要注意的是，cover和contain 都会使得 图片会尽可能的填满背景，
不过 cover 尽可能的延展的更大，contain 会保证背景图片一定在里面，
所以自己认为，contain 可能会用的更多一点；
代码示例：
演示：
5.4 圆角矩形
语法规则：
//圆角矩形的语法规则：
border-radius: length;
//其中,length表示内切圆的半径,length越大,说明弧线越圆
代码示例：
没有设置圆角矩形：
演示1：
设置圆角矩形：
演示2：
上述内容，描述的是一个元素自身的相关样式属性，接下来就介绍一些 元素和元素 之间的相关样式属性(即：布局)
5.5 元素的显示模式
元素的显示模式有很多，在此处 就只介绍两种显示模式：
- 块级元素
- 行内元素
常见的 块级元素 有：h1~h6，p，div，ul，ol，li ......；
常见的 行内元素 有：a，span，u，del，i，em ......；
可以使用 display属性 来修改该元素的 "显示模式" ；
语法格式：
display: block; => 设置为块级元素；
display: inline; => 设置为行内元素；
display: none; => 直接把元素给隐藏了，不显示；
块级元素和行内元素的区别：
块级元素独占一行，行内元素不独占一行 ；
块级元素 高度、宽度、内外边距、行高 都是可以控制的；行内元素 设置高度、宽度、行高 都是无效的，设置内边距都有效，设置外边距 左右外边距有效，上下外边距无效 ；
块级元素 默认的宽度，是和父元素一样宽；行内元素 宽度则是内容本身(与 里面包含的文字 相关) ；
块级元素 内部的元素可以是块级元素，也可以是行内元素；行内元素 内部的元素只能是文本 或者 行内元素，不能是块级元素 ；
代码举例：
要想让它生效，就可以在里面加上 display:block 即可 ：
5.6 盒模型
盒模型 不适用于行内元素，都是以块级元素为基准来介绍的；
盒模型 是 HTML 中 最最基本的排列规则：
- 每个 HTML 元素，都是一个 "矩形" 的盒子 ；
- 每个这样的盒子，都由这几个部分组成：外边距，边框，内边距，内容 ；
注意：
边框 会撑大盒子，所以一般会使用 通配符选择器 来修改浏览器的行为，使其不会撑大盒子
* { box-sizing: border-box; }
5.6.1 边框
关于 边框 的知识点，只要掌握下面的内容就可以了
采用 border属性，后面所接的值是：粗细,样式(实心的啥的),颜色
具体的可以设置成啥样式的,可以去查文档:mdn border
比如：
border: 10px solid red;
border: 10px dashed black;
border: 10px dotted blue;
代码示例：
当然，边框是分方向的，我们既可以给四个方向都加上边框，也可以只加某个方向，还可以让不同的方向设置上不同的边框；
语法格式：
比如：
border-top: 10px solid black;
border-bottom: 20px dashed red;
border-left: 30px dotted orange;
border-right: 40px solid gray;
代码示例：
演示结果：
5.6.2 内边距
内边距 可以使用 padding属性 来设置；
只是单纯的设置 内容和边框之间的距离而已（不像是边框，可以设置粗细，样式，颜色）
当然，和边框类似，既可以给四个方向都加上内边距，也可以只加某个方向，还可以让不同的方向设置上不同的内边距；
语法格式：
比如： padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 20px;
代码举例和演示：
在实际上，虽然可以给四种方向分别设置内边距，但是通常都不这么做 ；
通常采用的是复合写法，
如：
5.6.3 外边距
外边距 使用的是 margin属性，和 padding属性 的用法非常类似
它也是可以 既可以给四个方向都加上外边距，也可以只加某个方向，还可以让不同的方向设置上不同的外边距（这里的具体用法就不再过多介绍了）（外边距是 元素与元素之间 的距离 ）
代码示例：
演示结果：
关于外边距，还有一个特殊的用法：设置元素水平居中(使用 auto属性值：让浏览器自己决定)
代码示例：
演示结果：
注意：
设置成 垂直方向设为 auto 是无效的，相当于没有外边距 ；
毕竟垂直方向的内容不知道有多少；
5.7 弹性布局
弹性布局 是后来引入的特性，使用弹性布局，就可以代替很多旧式的写法，是页面的布局更加方便，更符合逻辑 ；
代码示例1：
Document
1
2
3
演示结果1：
但是，此时如果给 div 加上一个 display:flex;
代码示例2：
演示演示2：
代码示例3：
演示结果3：
当然，使用 弹性布局，可以更方便的使用居中效果：
语法格式：
使用 justify-content属性,属性值 可以是：space-around;
此时是水平方向居中 ~
可以使用 align-items属性，属性值 可以是：center;
此时 垂直方向也居中了 ~代码举例和演示：
当给一个元素设为 display:flex; 之后，此时的子元素就不再遵守原来的 "块级元素" 的规则了，变成了弹性元素，这些元素就会按照弹性布局的规则来排列 ；
但是，这不会对 "孙子"元素 产生影响 ；
弹性布局常用的属性：
display: flex; => 开启弹性布局
justify-content属性 => 描述的是主轴上的排列方式(默认水平方向)
align-items属性 => 描述的是侧轴上的排列方式(侧轴是和主轴垂直的方向)
现在就来介绍一下 justify-content属性：
justify-content属性 描述的是主轴上的排列方式(默认水平方向)
语法格式：
比如：
justify-content: flex-start; => 默认靠左排列
justify-content: flex-end; => 默认靠右排列
justify-content: center; => 居中
justify-content: space-between; => 元素之间有空白间隙,首尾没有间隙(很多网站都是有这种布局的)
justify-content: space-around; => 元素之间和首尾都有间隙(很多网站都是有这种布局的)
代码举例和演示：
现在就来介绍一下 align-items属性：
align-items属性 描述的是侧轴上的排列方式(侧轴是和主轴垂直的方向)
语法格式：
比如：
align-items: center; => 居中效果
align-items: flex-start; => 默认靠上排列
align-items: flex-end; => 默认靠下排列
代码举例和演示：
align-items属性 和 justify-content属性 的用法基本上就是差不多的，这里就不再一一的演示了
总结
目前为止，有关css的有关内容就介绍完成了；本两个小节详细介绍了css算法的一系列常用的使用方法，要能够熟练掌握和应用他们，让我们下期再见吧！！！！！！！！！！！！！！！！！
