零基础入门学习前端三件套 —— HTML 与 CSS 实战篇（上） ｜ 青训营笔记

用户2722175045707
50 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第 3 天

学习前端，光看是不行的，我们还得来用用~

我们打算最终实现这样的一个效果 ↓

image.png

在本文章中，你将掌握 HTML 和 CSS 的使用基础，分析与调整 HTML 元素。

一个HTML基础框架

先来新建一个 index.html 吧！

我们先在 index.html 文件中添加一些介绍自己的文本！

使用<html>, <h1>, <p>, <hr/>, <div> 等标签编辑出一个如下图网页！

image.png

嗯？没有听说过<hr/>？请向搜索引擎，指南网站或同学询问！

必应/谷歌是个强大的搜索引擎，MDN是个超棒的指南网站，浪花是个不错的同学（？）

虽然现在这可能看起来不像我们想象中的Catbook，它只是其中的内容，还没有任何css样式应用于它。

不用担心，接下来我们会一一完成的！

添加图片

现在添加一张头像吧！

image.png

请用<img>标签和它的（什么?）属性添加cat图片~（当然，自己使用其他图片也是可以的！）

引入一个 CSS 文件并使用一个类

是时候展示真正的技术了！（bushi）

是时候链接我们的CSS文件了！

请在 head 标签中嵌入一个 标签，并使用 rel 和 href 属性链接 styles.css 文件。

<head>
    <title>Catbook</title>
    <link rel="stylesheet" href="styles.css" />
</head>

注：link 标签是自闭标签噢！

我们现在要把文本都放在页面中间！

请在 CSS 文件中输入上面的代码，创建 u-textCenter 类，然后通过（什么手段？）将该类应用在主标题 Kevin Sun Chen 的标签上！

.u-textCenter{
    text-align: center;
}

嗯？不记得怎么使用 class 了？请翻看 CSS 篇！

应用结果应当如下 ↓

image.png

我们将这些只应用一个css属性的类称为实用类(utility classes)

我们将格式化实用类（方便后续应用），因此它们以“u-”开头（utility的u）

接下来，请将刚刚创建的实用类应用到其他文本中！

如果你觉得一个个标签地输入很麻烦的话…还记得之前提到的继承吗？

我们创建一个<section>标签，然后将内容放在该标签中，并给 section 标签使用 u-textCenter 类，这样就能够让其下的 h4, p 标签等都能够获得该类所赋予的样式属性！

实现结果如下 ↓

image.png

本练习完成后的 html 内容部分代码 ↓

<section class="u-textCenter">
    <h4>About Me</h4>
    <p>
        I am more of a dog person but I'm just trying to fit in and get catbook
    </p>
    </section>
<section class="u-textCenter">
    <h4>My Favorite Type of Cat</h4>
    <p>
        I actually like dogs
    </p>
</section>

用两个 section 标签分成了两个部分。

改变字体

接下来让我们改变文本的字体吧！

点击此处或从google fonts中搜索 open sans 来引入该字体。

网站在这：fonts.google.com/specimen/Op…

进入后，按照步骤复制代码。

（没法访问的话也没关系，等一下直接将代码给你~）

image.png

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");

body {
  font-family: "Open Sans", sans-serif;
}

更多的 CSS！

接下来…尝试为更多的文本设置新的样式！

让我们在顶部为导航栏内容添加<nav>标签，并给予对应的类（暂未设置内容）

<nav class="navContainer">
    <h1 class="navTitle">Catbook</h1>
</nav>

接下来，我们将要将其变得好看一点。

但首先，让我们定义一些颜色样式！

CSS具有可以被定义然后在整个过程中使用的CSS变量。

我们尝试将颜色定义为变量值。

:root{
    --primary: #396dff;
    --grey: #f7f7f7;
    --white: #fff;
}

在 :root 中定义变量。需要注意的是：这实际上并不是在设置任何样式，而只是定义变量

名称必须以双破折号--开头

应用变量时，使用 var(变量名) 作为属性值。

.navTitle{
    color: var(--primary);
    font-size: 20px;
}

顺便在 .navTitle 下添加这个样式：

/* Below cancels out some of the default styling of h1 */
margin: 0; 
font-weight: normal;

尝试更改 :root 中的颜色，并在刷新页面时观察颜色变化！

修改 nav 样式

现在尝试使用这些变量来设置导航栏的样式！ （参考该图片，或是自己设置~）

提示：你可能需要一个新的类

image.png

烦人的间距问题...

接下来要解决的是空白边框问题…

让我们放大仔细看看…

image.png

可以明显发现网页周围缝隙有很大的空白！

我们得把空隙填上去，但在这之前需要先看看这是什么原因导致的问题！

开发者模式的使用

鼠标右键点击最下面的 检查(Inspect Element)

image.png

或浏览器使用 F12 打开开发者模式

查看选择元素(Elements/Inspector)

image.png

点击左上角的图标后，点击页面中你所需要了解的元素信息。

（快捷键：Ctrl + Shift + C）

image.png

将鼠标移动到空白处，可以看到这个框架视图（在下面的style的最下面）

image.png

Padding（填充） 可清除内容周围受背景色影响的区域 .

Margin（边距） 是边框外的空白区域，完全透明.

image.png

接下来让我们看看它们具体有什么效果吧！

我们试着通过修改 margin, border, padding 以观察它们之间的区别。

那么，这个就是margin的锅咯！

让我们在 CSS 文件中把 body 中的 margin 样式的属性值改为 0 即可修复该bug！

image.png

某些 CSS 属性可以采用多个值，如 padding 和 margin

接下来让我们看看其实现效果是什么样的。

这是一个值的情况，四周都为10px

如果只有一个值，其他三个值都是缺省状态，则这三个值都以第一个值作为它们的值

image.png

这是两个值的情况，上下为第一个值的10px，左右为第二个值的20px

如果有两个值，由于下方和左方的值为缺省状态，则缺省的值以其对称方向（上和右）的值作为它们的值

image.png

这是三个值的情况，上为第一个值的10px，左右为第二个值的20px，下为第三个值的30px

如果有三个值，那么只有左侧的值为缺省状态，则缺省的值以其对称方向（右）的值作为它的值

image.png

这是四个值的情况，上为第一个值的10px，左为第二个值的20px，下为第三个值的30px，右为第四个值的40px

image.png

那么，可以发现这是按照顺时针顺序进行赋值的~

如果只有一个值，其他三个值都是缺省状态，则这三个值都以第一个值作为它们的值

如果有两个值，由于下方和左方的值为缺省状态，则缺省的值以其对称方向（上和右）的值作为它们的值

如果有三个值，那么只有左侧的值为缺省状态，则缺省的值以其对称方向（右）的值作为它的值

如果有四个值…不用解释了吧？

image.png

消去margin后，就正常多了~

image.png

HTML 与 CSS 实战篇（上）结束

下篇将解决网页的布局问题~

avatar
文章
阅读
粉丝