零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮

经过第3天的补充完善，约会邀请函的内容已经很丰富了。

​

但依然有点拿不出手，下面让我们一起来把它打扮漂亮，

恭迎前端化妆神器——【CSS】 ，闪亮登场！

最终效果

因鄙人非专业美工，配色或布局有不合理的地方，欢迎留言指正！

话不多说，直接开始吧！

div 盒子

先用一个盒子把所有内容装起来，以便将约会邀请函定位到整个页面正中间，并添加背景图片和背景色，此时便需要用到 html 中的 div 标签。

div 标签本身并不会在页面上渲染任何内容，只是一个矩形容器，用于将页面上的元素包裹起来，以便将包裹起来的元素作为一个整体来进行【定位】或添加【样式】。（类似PPT中选中多个元素，创建一个组合）。

在div盒子中可以放裸奔的文字，如：

<div>
 我是div盒子中裸奔的文字
</div>

也可以在div盒子中放其他div盒子，如：

<div>
  我是最外面的大盒子
  <div>我是大盒子里放的第1个小盒子</div>
  <div>我是大盒子里放的第2个小盒子</div>
</div>

默认情况下，div盒子是完全透明不可见的，宽度占满整行，高度具有弹性（就像紧身衣一样），如果没有给div指定宽度或高度，div盒子的高度将由div盒子中元素的高度决定（如果div内仅有文字，则高度由【行高】决定，而不是文字大小！）。

对于 div盒子，最重要的便是要理解 “”盒模型”，详见我的博客 ​​《CSS 盒模型 VS IE 盒模型》​​

背景图片 vs 背景色

使用div盒子将整个页面的内容包裹好后，便可以通过给div盒子添加背景图片，来给页面添加背景图片。

因控制背景图片的样式较多，推荐通过class属性来添加样式，具体代码如下：

<div class="page">
…… 此处省略了其他代码
</div>

给包裹整个页面的div盒子添加了class属性，属性值为 page

• html标签的class属性用于给html标签添加样式，class的属性值可以是多个样式名，用空格隔开，如​​class = "page red"​​

<style>.page {
  box-sizing: border-box;
  width: 750px;
  padding: 200px 80px 30px 80px;
  margin: 0 auto;
  line-height: 32px;
  background-color: rgb(244, 238, 232);
  background-image: url(./images/背景.png);
  background-position: center top;
  background-repeat: no-repeat;
}</style>

• html中的style标签内用于写页面相关的样式信息，使用的语言是【CSS】
• ​​.page​​是CSS中类选择器的写法，表示给页面中class的属性值包含page的元素添加样式
• 大括号中为具体的样式描述，格式为：​​样式名:样式值;​​
• 样式​​box-sizing​​​ 用于描述采用哪种盒模型，详见​​《CSS 盒模型 VS IE 盒模型》​​​，样式值​​border-box​​表示使用 IE 盒模型：宽度 = 内容宽度+padding内边距+border边框



• 样式​​width​​​ 用于描述div盒子的宽度，样式值为​​750px​​ 即 750像素
• 样式​​padding​​​ 用于描述div盒子的内边距，样式值为​​200px 80px 30px 80px​​​ 表示
  —— 上内边距为 200px
  —— 右内边距为 80px
  —— 下内边距为 30px
  —— 左内边距为 80px
• 样式​​margin​​​ 用于描述div盒子的外边距，样式值为​​0 auto​​​ 表示
  —— 上外边距为 0px
  —— 下外边距为 0px
  —— 左外边距为 auto （自动分配）
  —— 右外边距为 auto （自动分配）

重要技巧提示： 当div盒子的左外边距和右外边距都是 ​​auto​​ 即自动分配时，div盒子会在整个页面/父div盒子中水平居中！

• 样式​​line-height​​​用于描述div盒子中内容的【行高】，样式值为​​32px​​ 即两倍【行高】（浏览器中文本的默认大小为16px）
• 样式​​background-color​​​ 用于描述div盒子的背景色，样式值为​​rgb(244, 238, 232)​​ 即浅棕色，采用的RGB颜色表示法（详见下文的 颜色 color ）
• 样式​​background-image​​​ 用于描述div盒子的背景图片，样式值为​​url(./images/背景.png)​​​ ，其中 url() 是 【CSS函数】，用于解析文件的地址，​​./images/背景.png​​ 为背景图片的相对于当前页面的存储地址。
• 样式​​background-position​​​ 用于描述背景图片的位置，样式值为​​center top​​​即水平方向居中，垂直方向置顶。更多详情见​​《background-position详解》​​
• 样式​​background-repeat​​​ 用于描述背景图片是否重复，样式值为​​no-repeat​​​即不重复。另一个样式值为​​repeat​​ 即重复，当整个背景（通常是div盒子）比背景图片大时，会像贴瓷砖一样，不断重复背景图片来铺满整个背景。

综上，请记住下方的核心代码：

背景图片 background-image

background-image: url(./images/背景.png);
  background-position: center top;
  background-repeat: no-repeat;

背景色 background-color

background-color: rgb(244, 238, 232);

至此，约会邀请函的效果如下：

下一步，让标题水平居中，并换个颜色，给标题 h1 标签添加属性值为 ​​title​​的 class 属性，继续在 style 标签（还是上文中的那个 style 标签，所有使用css描述的 class 样式都写在一个style 标签中即可）中添加相关的样式：

<h1 class="title">一份诚挚的约会邀请</h1>

.title {
  text-align: center;
  color: #ca716a;
}

水平对齐 text-align

样式 ​​text-align​​ 用于描述文本在水平方向上的对齐方式，有以下样式值：

• left 【默认值】——水平靠左对齐
• center ——水平居中对齐
• right ——水平靠右对齐

颜色 color

样式 ​​color​​ 用于描述文本的颜色，有以下样式值：

• 代表颜色的英文单词 —— 如 red 红色、green 绿色、blue 蓝色、orange 橙色、gray 灰色等，不区分大小写 。
• transparent —— 表示透明 。
• currentColor —— 表示与【父元素】的​​color​​ 的样式值相同。
• 16进制的颜色值 —— 如 #FF0000、#0000FF、#00FF00等，所有#aabbcc的形式，都能简化为#abc
• rgb() 颜色表示法 —— 用红red、绿green、蓝blue 这三种颜色根据不同的配比混合得到想要的颜色（三原色原理），每种原色有256级(0-255)亮度，支持百分比值，如红色就是 rgb(255,0,0)，绿色为rgb(0,255,0)，蓝色为rgb(0,0,255)，黑色为rgb(0,0,0)，白色为rgb(255,255,255)。
• rgba() 颜色表示法 —— 在rgb的基础上，增加了A（Alpha通道，即透明度，取值为0-1），如 rgba(0, 0, 255, 0.5) 表示半透明的蓝色。

拾色器 FSCapture

使用拾色器（如 FSCapture.exe）可以轻松获取到以上各种颜色值

百度网盘下载链接：​​https://pan.baidu.com/s/1C1NiNGxWOnxHX5Q-911Ulg​​ 提取码：epe8

小标题

页面中经常会有用于区分信息模块的小标题，比如约会邀请函中的

和

小标题的样式通常是加粗，并与主题色相同，所以给它们的class属性添加上样式 ​​subTitle​​

<p class="subTitle">详细时间地点信息如下：</p>

<p class="subTitle">温馨提示：</p>

.subTitle {
  font-weight: bold;
  color: #ca716a;
}

文本加粗 font-weight

对于需要强调，或希望更显眼的文字，通常需要加粗一下，这时便要用到样式 ​​font-weight​​ ，它有以下样式值：

• normal 【默认值】正常粗细，无加粗效果
• bold 【常用值】加粗
• 具体数值：100 200 300 400（等同于normal） 500 600 700（等同于bold） 800 900
• 相对值（相对于父级元素）：lighter 比父元素的文本细一点 bolder 比父元素的文本粗一点

因为加粗的样式使用频率非常高，通常会在公共样式里定义一个样式名为 ​​b​​ 的样式类

.b {
  font-weight: bold;
}

然后在需要加粗的文字上，添加上这个样式即可，如：

<li><span class="b">时间：</span> 2022年12月28日19:00-21:00</li>
 <li><span class="b">地点：</span>太平洋电影院（春熙路店）</li>
 <li><span class="b">电影：</span>《爱情神话》</li>

行内文本 span

诶，这里出现了一个新的 html 标签 ​​span​​ ,它通常用于包裹在一行中的部分文本。

<li><span class="b">交通：</span>2号地铁春熙路站D口</li>
 <li><span class="b">碰头：</span>18:45在电影院正门口</li>

​​span​​​ 标签不会在页面上渲染任何效果，也不会像 ​​p​​​或​​div​​那样撑满整行，仅用于对文本进行简单的打包，以便给指定文本添加样式。

style 属性

基于之前的打扮，我们会发现还存在下图中的三个问题

首先来解决问题 1. 间距太小

解决方案很简单，增加图片的上外边距即可。

这里介绍一种新的添加样式的方式——使用 html 标签的 style 属性

<img
  style="margin-top:"
  height="240"
  src="./images/电影海报《爱情神话》.jpg"
  alt="《爱情神话》的电影海报"
/>

在 img 标签上添加 style 属性，属性值为要添加的样式 ​​margin-top: 10px​​

撑满整行 width=“100%”

接着解决问题 2. 宽度不同没对齐。

自从将整个页面的宽度 width 设置为 750px 后，因图片和视频的宽度之和大于 750 px ，视频便因页面宽度不够，自动换到了下一行。

之前因图片和视频在同一行，所以将它们设置为相同的高度 ​​height="240"​​ ，现在变成了两行，为了美观，应该改为相同的宽度。

具体宽度值设置为多少好呢？如果页面宽度改变了，是否需要重新修改宽度呢？有没有一劳永逸的方法呢？

当然有，那就是使用百分比值！

让图片和视频的宽度永远和父元素（本案例中为class值为page的div）的宽度保持固定的比例，这样无论页面宽度如何变化，图片和视频的宽度都能自适应改变。

经测试，本案例中将宽度值设置为 100% （撑满整行）效果最佳，所以修改后代码如下：

<img
  style="margin-top:"
  width="100%"
  src="./images/电影海报《爱情神话》.jpg"
  alt="《爱情神话》的电影海报"
/>

<video width="100%" controls>
  <source src="./videos/《爱情神话》宣传片.mp4" />
</video>

最后一个问题 3. 豆瓣影评超链接的样式太low，和图片视频不匹配。

可以对超链接的样式进行优化，不过考虑到点击超链接后，会跳转到豆瓣影评页，这种交互体验不太友好，我打算将超链接改造成内嵌网页。

内嵌网页 iframe

<iframe
  class="win"
  src="https://movie.douban.com/subject/35376457/"
  frameborder="0"
></iframe>

• ​​iframe​​ 标签用于在当前网页中内嵌另一个网页，有点像在当前网页中开了一个小l浏览器窗口，可以通过这个窗口访问其他网页。
• src 属性用于指定要显示的目标网页的网址
• frameborder 属性用于指定窗口的边框效果，默认值为1，显示1px宽度的边框，此处为了美观，设置为 0，隐藏了边框。

配套样式为

.win {
  width: 100%;
  height: 1000px;
}

至此，整个化妆已经完工，却意外发现，好像没有留自己的联系方式……

赶紧加上！

拨打电话 tel

<li>
        若迷失方向随时联系我
        <a href="tel:[phone]">13908056224</a> ，我来接你！
      </li>

仍然是使用 a 标签，不过 href 的属性值改成了拨打电话所特有的格式

​​tel:电话号码​​

学会了吗？

完整代码

<div class="page">
  <h1 class="title">一份诚挚的约会邀请</h1>
  <p>你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？</p>
  <p class="subTitle">详细时间地点信息如下：</p>
  <ul>
    <li><span class="b">时间：</span> 2022年12月28日19:00-21:00</li>
    <li><span class="b">地点：</span> 太平洋电影院（春熙路店）</li>
    <li><span class="b">电影：</span>《爱情神话》</li>

    <img
      style="margin-top:"
      width="100%"
      src="./images/电影海报《爱情神话》.jpg"
      alt="《爱情神话》的电影海报"
    />

    <video width="100%" controls>
      <source src="./videos/《爱情神话》宣传片.mp4" />
    </video>

    <iframe
      class="win"
      src="https://movie.douban.com/subject/35376457/"
      frameborder="0"
    ></iframe>
    <li><span class="b">交通：</span>2号地铁春熙路站D口</li>
    <li><span class="b">碰头：</span>18:45在电影院正门口</li>
  </ul>

  <p class="subTitle">温馨提示：</p>
  <ol>
    <li>晚上天气微凉，多穿点衣服注意保暖；</li>
    <li>年关将近，春熙路人多，留意提防小偷；</li>
    <li>
      若迷失方向随时联系我
      <a href="tel:[phone]">13908056224</a> ，我来接你！
    </li>
  </ol>
</div>

<style>.page {
    box-sizing: border-box;
    width: 750px;
    padding: 200px 80px 30px 80px;
    margin: 0 auto;
    line-height: 32px;
    background-color: rgb(244, 238, 232);
    background-image: url(./images/背景.png);
    background-position: center top;
    background-repeat: no-repeat;
  }
  .title {
    text-align: center;
    color: #ca716a;
  }
  .b {
    font-weight: bold;
  }
  .subTitle {
    font-weight: bold;
    color: #ca716a;
  }
  .win {
    width: 100%;
    height: 1000px;
  }</style>

恋爱宝典

CSS

CSS的全称为层叠样式表，是Cascading Style Sheets的首字母缩写，主要用途就是修改页面的样式，给 html 化妆的。

如果把 html 比作一个房子（你的家），div盒子标签就是隔断房间的墙壁，img图片标签是挂在墙上的画，video视频标签是客厅里的电视机，audio音频标签是音乐播放器，h标题标签是大门上的门牌号，p段落标签是你在每间房中设置的不同功能的区域（比如书桌那片是学习区，铺着瑜伽垫的那块是健身区、摆着沙发那块是休息区……），span行内文本标签是拼接成每个房间地面的一块块地板，大部分a超链接标签是把你传送到不同朋友房子的超时空传送器，也有少数a超链接标签被改造成了你家里的电话机，ul无序列表标签是你写在备忘录里的待办清单，ol有序列表标签是你贴在冰箱上的常用菜谱，iframe内嵌网页标签是你家里的魔镜，通过它你可以足不出户看到任何一个朋友家里的实时情况，甚至隔空在朋友家的留言板上贴上你的留言！

那么css 是什么呢？ css 就是你花大价钱请来的装修公司，她最擅长的就是帮你把家里设计布置成任意你想要的模样！

定位

定位即固定位置，我们可以将网页看做一个标准的四四方方的矩形房间，每一个html标签都是放在房间里的物品，默认情况下，所有物品都是从上向下、从左到右依次排列的，如果当前行放不下了，就会自动换到下一行。

为了更精准的控制元素的位置，可以使用【相对定位】或【绝对定位】，另外还有​​固定定位​​​和​​黏性定位​​（更为复杂些，以后再学！）

相对定位

相对定位即相对于自己原来的位置，进行位置调整。

通过给标签添加样式 ​​position: relative;​​可对元素进行相对定位，然后修改以下四个样式值，来确定具体位置：

• left：右移
• right：左移
• top：下移
• bottom：上移

如下范例，原本蓝盒子就在红盒子正下方

给蓝色盒子添加相对定位的样式后，效果如下：

position: relative;
    top:40px;
    left: 50px;

绝对定位

绝对定位通常是相对于整个网页进行定位，但当父/祖元素外存在相对定位的元素时，将相对于最近的相对定位的元素计算距离

通过给标签添加样式 ​​position: absolute;​​即可对该元素进行绝对定位，然后修改以下四个样式值，来确定具体位置：

（如果不设置以下四个样式值，元素会保留在原位置不动！）

• top —— 元素距离顶部的距离
• bottom—— 元素距离底部的距离
• left —— 元素距离左侧的距离
• right —— 元素距离右侧的距离

通常指定水平和垂直方向，各一个样式即可确定最终位置，范例如下：

<div class="box"></div>

.box {
　 position: absolute;
　 top:40px;
　 left: 40px; 
}

样式

在计算机的专业术语中，样式表示元素的模样和格式，不同的html标签元素有着各自不同的特有样式，比如最常见的文本样式如下：

文本样式

对于文字而言，常用的样式有：

• 文本大小 font-size，如 font-size:20px;
• 文本粗细 font-weight，如 font-weight: bold;
• 文本字体 font-family，如 font-family: “微软雅黑”
• 文本颜色 color，如 color:red
• 文本装饰线

/* 没有装饰线 */
    text-decoration-line: none;
    /* 上划线装饰 */
    text-decoration-line: overline;
    /* 贯穿线装饰 */
    text-decoration-line: line-through;
    /* 下划线装饰 */
    text-decoration-line: underline;
    /* 支持同时设置多个属性——如上划线装饰和下划线装饰同时出现 */
    text-decoration-line: underline overline;

• 文本装饰线的风格（类型）

/* 实线 */
    text-decoration-style: solid;
    /* 双实线 */
    text-decoration-style: double;
    /* 点线 */
    text-decoration-style: dotted;
    /* 虚线 */
    text-decoration-style: dashed;
    /* 波浪线 */
    text-decoration-style: wavy;

行高 line-height

行高，是两行文字“基线”之间的垂直距离

CSS函数

在计算机术语中，函数是指一段可以被引用的具有特定功能的代码。

作为主要功能是负责样式的CSS，有存在一些很实用的函数，比如上文提到的url()图片地址函数，通过传入图片地址，就能让css获取到该图片。

background-image:url( "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");

父元素

html标签相互包裹嵌套后，便会产生各种不同的关系，比如：

<div class="father">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

最外面的div盒子是里面两个div盒子的父元素；
里面两个div盒子是外面div盒子的子元素。

默认值

默认值，即当没有通过代码修改或指定设置时，系统默认给属性或样式设置的值。

常用值

常用值，即该属性/样式经常被设置的值。

说不完的情话

• 你娉婷婉约的风姿，娇艳俏丽的容貌，妩媚得体的举止，优雅大方的谈吐，一开始就令我刮目相看。
• 在风吹散你的头发时，我简直着魔了：在闪闪发光的披肩柔发中，在淡淡入鬓的蛾眉问，在碧水漓漓的眼睛里，你竟是如此美丽可人!
• 在人流中，我一眼就发现了你。我不敢说你是她们中最漂亮的一个，可是我敢说，你是她们中最出色的一个。那健美的身材，优雅迷人的风度，尤其是那一头乌亮的秀发，有一种说不出的魅力。
• 女人之所以美丽，是因为有好心情;之所以潇洒，是因为有自信;之所以有气质，是因为有极佳的涵养;之所以告诉你，是因为你占全了！