前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天

P29 - P43

从此开始进入 CSS 的学习。前面都是 HTML 的学习。

CSS 的作用：美化。

HTML 只是规定了网页内容有哪些，在网页中显示的位置默认是从上到下显示，还带有默认效果，比如超链接有颜色有下划线，无序列表有小圆点。想要把这些内容变得更加漂亮，就需要 CSS。所以在制作网页时，既需要 HTML 又需要 CSS。

Day 3 主要学习基础选择器和文字控制属性。

基础选择器的作用就是找标签，想要美化内容就要先找到这个内容再去美化，就用选择器去找这个内容。

选择器是很多的，今天先从基础选择器开始学习。

文字控制属性是用来控制文字的外观，比如文字的颜色、大小等等。

在这里插入图片描述

CSS 初体验

用 CSS 美化内容其实就是给内容加样式而已。

CSS 有多种写法，比较容易上手的一种写法是直接将 CSS 放到 HTML 中，放到 head 标签里面，title 标签下面。

CSS 代码是给浏览器看的，浏览器解释翻译完了在网页上呈现给用户看。

既然是给浏览器看的，那么就要放到 head 标签里面，习惯上放到 title 标签下面。

现在要将 CSS 放到 HTML 内部，而 CSS 和 HTML 是两种语言，要想让 CSS 打入 HTML 内部，就需要在 HTML 的 head 标签内部，title 标签下部，添加 style 标签，在 style 标签内部去写 CSS 既可。

CSS 代码都是由选择器加大括号组成。选择器的作用是找目标标签，要美化谁就用选择器去找谁既可。

CSS 属性的写法是：

属性名:属性值;

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-初始css</title>
  <style>
    /* 这里是CSS注释了，而不是HTML注释 */
    /* CSS 代码 */
    /* 选择器 {CSS 属性} */
    /* 属性名和属性值成对出现 → 键值对 */
    p {
      /* 文字颜色 */
      color: red;
      /* 文字大小，即字号 */
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>初识 CSS</p>
</body>
</html>

效果：

在这里插入图片描述

CSS 引入方式

在这里插入图片描述

CSS 有三个常见的书写位置。

rel: relationship

href: hipertext reference

实际工作中，一般都是用外部样式表。

程序示例：

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-CSS引入方式</title>
  <link rel="stylesheet" href="./my.css">
</head>
<body>
  <p>这是 p 标签</p>
  <!-- 行内写法 style = " CSS 属性" -->
  <div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>

CSS 代码：

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {
  color: red;
}

效果：

在这里插入图片描述

选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-标签选择器</title>
  <style>
    /* 特点：选中同名标签设置相同的样式，说明无法差异化同名标签的样式 */
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是 p 标签。</p>
  <p>111111</p>
  <p>222222</p>
</body>
</html>

效果：

在这里插入图片描述

类选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-类选择器</title>
  <style>
    .red{
      color: red;
    }
    .size{
      font-size: 50px;
    }
  </style>
</head>
<body>
  <p>11111</p>
  <!-- 一个类选择器可以给多个标签使用 -->
  <p class="red">22222</p>
  <!-- 一个标签可以使用多个类名，class 属性值写多个类名，类名用空格隔开 -->
  <div class="red size">3333333</div>
</body>
</html>

效果：

在这里插入图片描述

id 选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-id选择器</title>
  <style>
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <div id="red">这是 div 标签。</div>
</body>
</html>

效果：

在这里插入图片描述

通配符选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-通配符选择器</title>
  <style>
    *{
      color: red;
    }
  </style>
</head>
<body>
  <p>这是 p 标签。</p>
  <div>这是 div 标签。</div>
  <h1>这是 h1 标签。</h1>
</body>
</html>

效果：

在这里插入图片描述

小练习

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07-画盒子</title>
  <style>
    .div1 {
      width: 100px;
      height: 100px;
      background-color: brown;
    }
    .div2 {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</body>
</html>

效果：

在这里插入图片描述

文字控制属性

文字控制属性的作用是美化文字。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-字体大小</title>
  <style>
    /* 谷歌浏览器文字默认大小是16px */
    p {
      /* font-size 属性必须要有单位，否则属性不生效 */
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>测试字体大小。</p>
  <div>测试默认字体大小。</div>
</body>
</html>

效果：

在这里插入图片描述

调出浏览器的调试工具的方法：在网页任意位置，右键：

在这里插入图片描述

出现的这个面板叫做浏览器的调试工具：

在这里插入图片描述

点击左上角的这个小箭头，使其处于高亮状态：

在这里插入图片描述

将鼠标放置在想要查看格式的位置，不要点击，只需要将鼠标放在这个位置既可。

在这里插入图片描述

可以看出，文字大小确实是 16px。

字体粗细

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09-字体粗细</title>
  <style>
    h3 {
      font-weight: 400;
    }
    div {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h3>h3 标题</h3>
  <div>div 标签</div>
</body>
</html>

效果：

在这里插入图片描述

字体倾斜

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10-字体倾斜</title>
  <style>
    em{
      font-style: normal;
    }
    div {
      font-style: italic;
    }
  </style>
</head>
<body>
  <em>em 标签。</em>
  <div>div 标签。</div>
</body>
</html>

效果：

在这里插入图片描述

行高

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11-行高</title>
  <style>
    p {
      /* line-height: 30px; */
      line-height: 2;
    }
  </style>
</head>
<body>
  <p>一百五十名警察和侦探包围了他那位于顶层的藏身之处，这些警察在房顶上凿孔，他们试图用催泪瓦斯把克劳利——这位杀害警察的人——熏出来。接着警察把机关枪架设在周围的建筑物上，在超过一小时的时间内，这一处纽约市的高档住宅区之一，回响起啪啪的手枪声和嗒嗒嗒的机枪声。克劳利蜷缩在一个沙发后面不停地向警察射击，当时有上万激动的群众围观这一战斗场面。以前在纽约市的街道上从来没有上演过这样的一幕。</p>
</body>
</html>

效果：

在这里插入图片描述

行高按照定义，是一行文字的高度加上该行文字的上间距和该行文字的下间距，每一行文字的上间距都是相同的，每一行文字的下间距都是相同的，所以行高也等于一行文字的高度加上该行文字的下间距再加上该行文字的下一行文字的上间距，也就是一行文字的顶部到下一行文字的顶部，当然也等于一行文字的底部到下一行文字的底部。

行高 - 垂直居中

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-行高-垂直居中</title>
  <style>
    div {
      height: 100px;
      background-color: skyblue;
      /* 注意：只能是单行文字垂直居中 */
      /* 如果是多行文字，只需要加行高，拉开两行文字之间的距离既可 */
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>文字</div>
</body>
</html>

效果：

在这里插入图片描述

字体

在这里插入图片描述

无衬线字体：sans-serif

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13-字体族</title>
  <style>
    div {
      font-family: 楷体;
    }
  </style>
</head>
<body>
  <div>字体族</div>
</body>
</html>

效果：

在这里插入图片描述

font 复合属性

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14-font属性</title>
  <style>
    /* 文字倾斜、文字加粗、字体大小是 30px，行高 2 倍，楷体 */
    div {
      font: italic 700 30px/2 楷体;
    }
  </style>
</head>
<body>
  <div>测试 font 属性</div>
</body>
</html>

效果：

在这里插入图片描述

文本缩进

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15-文本缩进</title>
  <style>
    p {
      text-indent: 2em;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>推开丁仪那套崭新的三居室的房门，汪淼闻到了一股酒味，看到丁仪躺在沙发上，电视开着，他的双眼却望着天花板。汪淼四下打量了一下，看到房间还没怎么装修，也没什么家具和陈设，宽大的客厅显得很空，最显眼的是客厅一角摆放的一张台球桌。汪淼在浏览器的地址栏中输入那个很容易记住的游戏网址：www.threebody.com，网页上显示该游戏只支持V装具方式。汪淼想起了纳米中心的职工娱乐室里好像有一套V装具，就走出已经空荡荡的中心实验大厅，去值班室要了钥匙，在娱乐室中穿过一排台球桌和健身器材，在一台电脑旁找到了V装具，费了很大劲才把感应服穿上，然后戴上显示头盔，启动电脑。荒原依旧，但V装具感应服中的压缩机咝咝地启动了，汪淼感到一股逼人的寒气。前方出现了两个行走的人影，在曙光的背景前呈黑色的剪影。汪淼追了上去，他看到两人都是男性，披着破烂的长袍，外面还裹着一张肮脏的兽皮，都带着一把青铜时代那种又宽又短的剑，其中一人背着一只有他一半高的细长的木箱子。那人扭头看看汪淼，他的脸像那兽皮一样脏和皱，双眼却很有神，眸子映着曙光。“冷啊。”他说。</p>
</body>
</html>

效果：

在这里插入图片描述

文本对齐方式

在这里插入图片描述

text-align 这个属性调整的是内容的对齐方式，不影响标签的位置。即改变的文字内容的位置而不是改变了标签的位置。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>16-文本对齐方式</title>
  <style>
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>标题文字</h1>
</body>
</html>

效果：

在这里插入图片描述

图片对齐方式

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>17-图片对齐方式</title>
  <style>
    div {
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

效果：

在这里插入图片描述

文本修饰线

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>18-文本修饰线</title>
  <style>
    a {
      text-decoration: none;
    }
    div {
      text-decoration: underline;
    }
    p {
      text-decoration: line-through;
    }
    span {
      text-decoration: overline;
    }
  </style>
</head>
<body>
  <a href="#">a 标签，去掉下划线</a>
  <div>div 标签，添加下划线</div>
  <p>p 标签，添加删除线</p>
  <span>span 标签，添加顶划线</span>
</body>
</html>

效果：

在这里插入图片描述

color 文字颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>19-文字颜色</title>
  <style>
    h1{
      color: red;
    }
    h2{
      color: rgb(0, 255, 0);
    }
    h3{
      /* 0 表示完全透明，1 表示完全不透明 */
      color: rgba(0, 255, 0, 0.5);
    }
    h4 {
      /* 6 位可以简写为 3 位，相同的两位可以只写一个 */
      color: #0000ff;
      /* 相当于 00f */
    }
  </style>
</head>
<body>
  <h1>h1 标签</h1>
  <h2>h2 标签</h2>
  <h3>h3 标签</h3>
  <h4>h4 标签</h4>
</body>
</html>

效果：

在这里插入图片描述

调试工具 - 谷歌浏览器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>20-调试工具</title>
  <style>
    div {
      color: red;
      font-size: 40; /* 没有单位 px，是不起作用的 */
    }
  </style>
</head>
<body>
  <div>调试文字</div>
</body>
</html>

效果：

在这里插入图片描述

上面部分是 HTML 代码，下面部分是作用在这部分 HTML 代码上的 CSS 代码。

将代码修改正确后，刷新网页。

在这里插入图片描述

综合案例一：新闻详情

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>21-综合案例 —— 新闻详情</title>
  <style>
    h1{
      text-align: center;
      font-weight: 400;
      font-size: 30px;
      color: #333;
    }
    div {
      text-align: center;
    }
    .color{
      color: #999;
    }
    .color2 {
      color: #333;
    }
    .indent {
      text-indent: 2em;
    }
    .size1{
      font-size: 14px
    }
    .size2{
      font-size: 18px
    }
    div {
      color: #999;
      font-size: 14px
    }
    .pic {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
  <p class="color size1">来源：央视网 | 2222年12月12日 12:12:12</p>
  <!-- <div>来源：央视网 | 2222年12月12日 12:12:12</div> -->
  <p class="indent size2 color2"><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
  <p class="indent size2 color2">中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
  <div class="pic">
    <img src="./1.jpg" alt="">
  </div>
  <p class="indent size2 color2">王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
  <p class="indent size2 color2">此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>
</body>
</html>

综合案例二：CSS 简介

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>22-综合案例二：CSS 简介</title>
  <style>
    h1 {
      color: #333;
    }
    p {
      color: #444;
      text-indent: 2em;
      font-size: 14px;
      line-height: 30px;
    }
    a {
      color: #0069c2;
    }
    li {
      color: #444;
      font-size: 14px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <h1>CSS（层叠样式表）</h1>
  <p>层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
  <p><strong>CSS 是开放网络的核心语言之一，</strong>由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
  <ul>
    <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
    <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
    <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
  </ul>
</body>
</html>