【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：

5.2.3 文本装饰

文本装饰 就相当于之前所介绍过的 下划线、删除线、上划线 之类的 ~

这些功能在 CSS 里面又实现了一遍 ~

---

比如：
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：

演示1：

---

示例2：

演示2：

---

但是，在实际生活中，我们可能想要 "平铺" 效果，也可能不想要 "平铺" 效果，这个时候就可以使用 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：

演示1：

示例2：

演示2：

---

上述内容，描述的是一个元素自身的相关样式属性，接下来就介绍一些 元素和元素 之间的相关样式属性(即：布局) ~

5.5 元素的显示模式

元素的显示模式有很多，在此处 就只介绍两种显示模式：

• 块级元素
• 行内元素

---

常见的 块级元素 有：h1~h6，p，div，ul，ol，li ......

常见的 行内元素 有：a，span，u，del，i，em ......

可以使用 display属性 来修改该元素的 "显示模式" ~

display: block;  => 设置为块级元素
display: inline; => 设置为行内元素
display: none;   => 直接把元素给隐藏了，不显示

---

块级元素和行内元素的区别：

1. 块级元素独占一行，行内元素不独占一行 ~
2. 块级元素 高度、宽度、内外边距、行高 都是可以控制的；行内元素 设置高度、宽度、行高 都是无效的，设置内边距都有效，设置外边距 左右外边距有效，上下外边距无效 ~
3. 块级元素 默认的宽度，是和父元素一样宽；行内元素 宽度则是内容本身(与 里面包含的文字 相关) ~
4. 块级元素 内部的元素可以是块级元素，也可以是行内元素；行内元素 内部的元素只能是文本 或者 行内元素，不能是块级元素 ~

---

要想让它生效，就可以在里面加上 display:block 即可 ：

5.6 盒模型

盒模型 不适用于行内元素，都是以块级元素为基准来介绍的 ~

盒模型 是 HTML 中 最最基本的排列规则：

1. 每个 HTML 元素，都是一个 "矩形" 的盒子 ~
2. 每个这样的盒子，都由这几个部分组成：外边距，边框，内边距，内容 ~

需要注意的是，边框 会撑大盒子，所以一般会使用 通配符选择器 来修改浏览器的行为，使其不会撑大盒子 ~

* {
       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：

<!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>
        * {
            box-sizing:  border-box; 
        }
        
        div{
            height: 150px;
            background-color: red;
        }
        span{
            background-color: green;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

演示1：

---

但是，此时如果给 div 加上一个 display:flex; 

示例2：

演示2：

---

示例3：

演示3：

---

当然，使用 弹性布局，可以更方便的使用居中效果 ~

使用 justify-content属性,属性值 可以是：space-around;
此时是水平方向居中 ~
可以使用 align-items属性，属性值 可以是：center;
此时 垂直方向也居中了 ~

---

---

当给一个元素设为 display:flex; 之后，此时的子元素就不再遵守原来的 "块级元素" 的规则了，变成了弹性元素，这些元素就会按照弹性布局的规则来排列 ~

但是，这不会对 "孙子"元素 产生影响 ~

---

弹性布局常用的属性：

1. display: flex; => 开启弹性布局

2. justify-content属性 => 描述的是主轴上的排列方式(默认水平方向)

3. 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 的知识点就介绍到这里了 ~

怎么样，是不是很神奇~

如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~