使用 CSS 来装饰我们的第一个网页

实验介绍

嗨！欢迎再次来到从零趣味学习 Web 前端的课堂～

在上一个实验中，我们已经用 HTML 做了自己的第一个页面，但是当我们预览网页时会发现它看起来比较简陋。这一节我们可以通过向 HTML 文件添加一些基本样式来美化它。

知识点

盒子模型
定位方式
background 属性
font-size 属性
color 属性
transform 属性

初识 CSS

首先，我们来简单了解一下什么是 CSS。

CSS，英文全称是 Cascading Style Sheets，译为层叠样式表，简单来说就是用来美化 HTML 页面的。

例如，我们在蓝桥云课的首页，在 chrome 浏览器中按 F12 打开开发者工具，我们可以看到如下所示的内容：

图片描述

我们可以看到，右侧有一个 styles 表，里面全是像 img{max-width: 100%;} 这样的结构组成的，这就是样式表（CSS）了。我们用一个图来解释表中内容的意思：

图片描述

CSS 就是由各种选择器、属性和属性值组成的，其中选择器的作用是找到添加样式的指定元素，属性是给元素添加怎样的样式（比如：字颜色、字体大小），属性值是样式的具体取值（比如：字颜色为蓝色、字体大小 20px）。

那么我们怎么在 HTML 中使用 CSS 呢？

有三种引入 CSS 样式的方式:

内联：在标签内部添加 style 属性，不能复用，只能作用于添加了 style 属性的标签。

图片描述

内部：在 <head>...</head> 标签里面添加 <style>...</style> 标签，在该标签体内写样式代码，可以在当前页面复用。

图片描述

外部：在单独的 .css 文件中写样式代码，在 .html 文件中通过 <link> 标签引入，这种方式可以在多个页面复用，还可以将 html 和 css 代码分离，这是日常开发中最常用的方式。

图片描述

这里我们用的是第二种，内部引入的方式。

使用 CSS 设计网页

首先我们使用 CSS 代码来设计网页。为此我们需要先添加一个 style (<style> </style>)标签，此标签允许我们在 HTML 文档中嵌入 CSS 的元素。

在 head (<head> </head>)标签中插入以下 CSS 代码：

<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{
   font-size: 62.5%;
}

body{
  background: url("https://images.unsplash.com/photo-1646061632529-b552ea07b50b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80") center;
  width: 100%;
  height: 100vh;
}  
</style>

背景图片来源：unsplash.com

这里的*号是通用选择器，在 CSS 样式里选择页面上的所有的 HTML 元素。

我们这里介绍一下三种常见的选择器

标签名选择器

格式: 标签名{样式代码}
作用: 选取页面中所有同名标签

id 选择器

格式: #id{样式代码}
作用: 选取页面中指定 id 的元素(id 必须唯一)

class 选择器

格式: .class{样式代码}
作用: 选取页面中指定 class 值得多个元素

选择器练习：

这里的height: 100vh;一行中 1vh 表示相对于视口高度的 1%，100vh 即表示相对于视口高度的 100%，视口（Viewport）= 浏览器窗口的尺寸，详情见： W3school CSS 单位。

显示效果：

背景图片

现在让我们再来了解一下什么是盒子模型

盒子模型=外边距+边框+内边距+宽高
宽高: 用来控制元素显示大小
边框（border）: 控制元素的边框效果
外边距（margin）: 控制元素显示位置
内边距（padding）: 控制元素内容的位置

如下图所示

图片描述

盒子模型之外边距 margin

什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距

赋值方式:

单独给某一个方向赋值: margin-left/right/top/bottom:10px;
四个方向赋值: margin:50px;
上下和左右赋值: margin:10px 20px;
元素水平居中 margin:0 auto;(注意这是让元素自身居中,text-align:center 是让元素里面的文本在元素内部居中)
上右下左赋值: margin:10px 20px 30px 40px; 顺时针

详情见： W3school margin 属性。

图片描述

盒子模型之边框 border

详情可参考W3school border 属性。

赋值方式:

单独给某一个边添加边框 border-left/right/top/bottom: 粗细样式颜色;
给四个方向添加边框 border:粗细样式颜色;
圆角: border-radius: 10px; 值越大越圆超过宽高的一半时会变为圆形(前提是正方形)

图片描述

盒子模型之内边距 padding

什么是内边距: 元素边缘距内容的距离称为内边距，详情可参考W3school padding 属性。

赋值方式和外边距类似:

单独给某一个方向赋值: padding-left/right/top/bottom:10px;
四个方向赋值: padding:50px;
上下和左右赋值: padding:10px 20px;
上右下左赋值: padding:10px 20px 30px 40px; 顺时针

图片描述

盒子模型之宽高

赋值方式:两种

像素,单位是px
上级元素的百分比

如果只设置宽度高度会等比例缩放
行内元素不能修改宽高
background 属性在一个声明中设置所有的背景属性，在这里使用了背景图片,图片来源：unsplash.com。你也可以根据自己的喜好更改背景图像。详情见： W3school background 属性。
font-size 属性设置字体大小，详情可参考W3school font-size 属性。

图片描述

给导航栏添加样式

在给这些 HTML 标签添加样式之前我们需要先给他们加上 class 属性，这样我们才可以对这些标签进行操作。

<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">海拥</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">服务</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">博客</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">关于</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">联系</a>
                </li>
            </ul>
        </nav>
</header>

在这里，我们有

在 header 中添加了名为 header 的 class 作为我们导航栏的容器
在 nav 中添加了名为 navbar 的 class；
在一个 a 标签中添加了名为 nav-logo 的 class；
在 ul 中添加了名为 nav-menu 的 class；
ul 里面有 4 个 li 都添加了名为 nav-item 的 class；
在每个 nav-item 内部，都有一个名为 nav-link 的 class；

现在让我们一一添加样式到元素

首先我们给 header 和 navbar class 添加样式

.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

我们这节实验主要用到的是 class 选择器，以.class名来选择我们需要去修饰的元素，更多关于选择器的知识可参考W3school 选择器参考手册。

display: flex;一行将对象作为弹性伸缩盒显示，详情可参考前端布局神器 display:flex。
justify-content属性（水平）对齐弹性容器的项目,这里的space-between使项目在行与行之间留有间隔，详情可参考W3school justify-content 属性。

此时的显示效果：

图片描述

其他元素的基本样式

.nav-menu {
    display: flex;
    justify-content: space-between;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
}

.nav-link:hover{
    color: #482ff7;
}

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}

color属性有三种表示方法：

颜色名，例如：color: red;
十六进制，例如：color: #FFFF00;
RGB，例如：rgb(0,255,255)

详情可参考W3school HTML 颜色。

图片描述

之后，看起来应该像这样

图片描述

美化页面内容部分

我们使用以下 CSS 代码来美化页面主题部分。此表单的最大宽度为 720px，并使用box-shadow来增强美感。

.wrapper{
max-width: 720px;
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 20px 20px;
box-shadow: -4px -4px 11px #c8c2c2a2,
            4px 4px 9px rgba(147, 149, 151, 0.871);
}

position 属性规定元素的定位类型，这里的 absolute 生成绝对定位的元素，接下来我们聊聊一些定位方式：

静态定位(文档流定位):是元素的默认定位方式

格式:position:static
元素显示特点: 块级元素从上到下排列,行内或行内块元素从左向右排列,元素不易实现层叠效果
如何控制元素的位置: 通过外边距

相对定位

格式:position:relative
元素显示特点: 元素不脱离文档流(元素不管显示到什么位置仍然占着原来的位置)
如何控制元素的位置: 通过top/left/right/bottom控制元素的显示位置,坐标相对于初始位置
应用场景: 当需要移动某个元素,但移动该元素时不影响其它元素的显示效果,这时使用相对定位,如果做位置微调使用相对定位

图片描述

绝对定位

格式: position:absolute
元素显示特点: 元素脱离文档流(当元素设置为绝对定位时会让出自己所占的位置)
如何控制元素的位置: 通过top/left/right/bottom 控制元素位置,坐标相对于窗口(默认)或某一个上级元素(添加相对定位)
应用场景:如果移动到的位置是某个上级元素的角落使用绝对定位,如果需要往页面中添加一个元素而且不希望影响现有的显示效果(也就是不在文档流里面)使用绝对定位

图片描述

固定定位

格式: position:fixed;
元素显示特点: 元素脱离文档流
如何控制位置: 通过 top/left/rigth/bottom 控制元素位置,坐标相对于窗口.
应用场景: 需要将元素固定在窗口的某个位置,并且不随着内容位置改变而改变

图片描述

浮动定位

格式: float:left/right;
显示特点: 元素脱离文档流,元素从当前行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
如何控制元素位置: 通过外边距
如果元素的所有子元素全部浮动,则元素自动识别的高度为0,通过给元素添加overflow:hidden解决.
应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位

图片描述

更多关于 position 可参考W3school position 属性。

top 属性规定元素的顶部边缘，详情可参考W3school top 属性。
left 属性规定元素的左边缘，详情可参考W3school left 属性。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜，详情可参考W3school transform 属性。
box-shadow 属性向框添加一个或多个阴影，这里设置了双重阴影，第一行第一个 -4px 为 x-坐标值，第二个 -4px 为 y-坐标值，11px 为模糊程度，#c8c2c2a2 是颜色，详情可参考W3school box-shadow 属性。第二行同理，其中rgba(147, 149, 151, 0.871);也表示颜色，可参考W3school rgba() 函数。

此时的显示效果：

图片描述

现在让我们来给标题加上一些样式

.wrapper h2{
color: #fff;
text-align: center;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}

text-align 属性规定元素中的文本的水平对齐方式，这里我们将值设为 center ，把标题放在中间，详情可参考W3school text-align 属性。
margin-bottom 属性设置元素的下外边距，详情可参考W3school margin-bottom 属性。
text-transform 属性控制文本的大小写，这里的 uppercase 定义仅有大写字母，详情可参考W3school text-transform 属性。
letter-spacing 属性增加或减少字符间的空白（字符间距），详情可参考W3school letter-spacing 属性。

显示效果：

图片描述

这里我在每个输入区域周围都使用了边框，并且背景已经模糊。

.wrapper .form .form_container{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.wrapper .form .form_container .form_left,
.wrapper .form .form_container .form_right{
width: 48%;
}

.wrapper .form .input_field input[type="text"],
.wrapper .form textarea{
width: 100%;
padding: 14px;
border: none;
border-radius: 5px;
margin-bottom: 15px;
border: 1.5px solid rgba(255, 255, 255, 0.438);
border-radius: 3px;
background: rgba(105, 105, 105, 0.25);
}

显示效果：图片描述

使用以下 CSS 将输入消息区域大小与左边对齐。

1
2
3

.wrapper .form textarea{
height: 90%;
}

显示效果：图片描述

接下来是时候设计按钮了。这里按钮的宽度设置为 200 像素，并使用font-size: 18px来增加按钮的文本大小。

.wrapper .form .btn{
width: 200px;
background: rgba(255, 255, 255, 0.164);
margin: 0 auto;
padding: 13px;
font-size: 18px;
border-radius: 4px;
text-align: center;
}

.wrapper .form .btn a{
color: #fff;
}