零基础入门学习前端三件套 —— CSS 篇 ｜ 青训营笔记

用户2722175045707
88 阅读6分钟

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

什么是 CSS ？

CSS，即级联样式表，用以让浏览器处理内容样式。

CSS 就是一个对样式进行描述的列表。

下面是一个存在 CSS 的页面。

image.png

而这是去掉CSS后的页面。

image.png

前后的显示效果差距非常大！

如果你经常上网冲浪，也许这个界面会让你想起来有些页面没有加载成功时也是这样的…

总之！有CSS装饰的页面才好看~

CSS样式设置规则

让我们看看CSS的样式设置规则是什么样的吧！

这是一个对 div 进行样式设置的样例，其中包含了：选择器，样式属性以及属性值。

image.png

样式继承规则

接下来让我们介绍一下CSS的各选择器的优先级。

特异性等级排名（或者说，优先级排名），从低到高依次是：元素，类，ID，内联样式。若有冲突，高优先级的内容会覆盖低优先级的内容。

-body(设置 blue)
    -div(继承 blue)
        -h1(设置 red)
            -em(继承 red)
        -nav(继承 blue)

属性继承的案例：如果我们为 body 标签设置了一个蓝色属性，那么其下的 div 标签会直接继承 body 的蓝色，而 div 下的 nav 标签也会同理继承 div 的蓝色属性。但是 div 下的 h1 标签被设置为了红色，则 h1 下的 em 标签将继承 h1 的红色属性。

总之，这就像流水一样，如果没有滴加新的染料，那么它就会一直保持原来的样式。

CSS 的使用方法

接下来让我们进一步了解 div 标签搭配 CSS 的使用方法吧~

image.png

首先我们用 div 替代 p 标签，似乎换了个P…（bushi）

我们把内容单独取出来看看

再添加一行使用 div 标签的内容，这次显示在了上一个 div 标签的下面。

image.png

你也许会觉得理所当然…因为我们平时换行的话文本也当然会换行。

但是但是！HTML可不是这样，代码的换行可不会体现在文本上，多余的空格也只会保留一个。

想要了解更多的话，参考这篇文章：developer.mozilla.org/zh-CN/docs/…

接下来，让我们新建一个 style.css 文件，在该文件中为 div 设置一些新样式~

image.png

设置的样式效果如右图所示，最直观的改变就是两个 div 元素的内容都变红了！

如果你也试着建立了一个 css 文件并写了相同的代码，你会发现页面根本没有发生改变，这是因为还没有将css文件链接到html文件中。不过不用担心，我们等一下就会解释这一切~

我们现在在第二个 div 标签中添加 class 属性，属性值设置为 info

因为还没有设置 info 类的样式，所以页面不会有任何变化，依旧为 div 的样子。

image.png

现在让我们把 div 改为 .info，可以发现第一个 div 标签中的内容的样式消失了，而第二个添加了 info 类的 div 标签仍然保留原来的样式！

现在只有具有 class 属性且值为 info 的标签才拥有红色等样式啦~

image.png

ID? Class?

接下来让我们对比一下这两个属性的区别吧！

首先！对于一个元素来说，只能有一个ID，而可以有多个class！（一个人的名字只能有一个，但是可以属于不同的群体~）

如果有多个ID，则所有关于ID的效果全部失效。

<div id="thisisanid">

<div class="class1 class2 class3">

其中 id 和 class 属性的添加方式如上。

嗯…你也许会问：如果我把 id 和 class 一起用会怎么样？

如果 id 和 class 的内容上有冲突，id优先。

你可以将此 div 指定为具有一个 ID，但可以为其分配多个类。也许一个类是指定大小，另一种颜色等，你可以将这些自定义类应用于一个 div，但你只能给 div 分配一个 ID。

但是一般不用id来写css样式。

ID 在 html 中必须是唯一的，但可以在多个元素上使用相同的类。

假设你想让页面中的许多不同元素具有红色字体。如果要使用 id，则必须为每个元素创建一个新 id，而不仅仅是在多个元素中重用同一个类。

因此，id 和 html 元素之间存在一一对应关系。每个元素不能有多个 ID，也不能每个 ID 有多个元素。

#id {
	…
}

.classname {
	…
}

其中ID选择器前面用 #，而类选择器前面用 . （是一个点噢！）。

记住！只用 class 写CSS样式就行了！一般不要用 id 写CSS样式！（直到你掌握前端三件套:D）

默认属性

接下来介绍一下一个重要概念——默认属性（default styling）！

很多标签（例如 <h1> ）会有一些默认的样式，但是<div>和<span>没有（他们只有块和内联的区别，这就是将 div 和 span 标签称作“存粹的容器”的原因）。

image.png

而自定义的CSS规则会覆盖原来的默认样式！

也就是说，样式是可以被修改的。

诸如<h1>和<p>之类的标签基本上与<div>相同，只是它们具有一些默认样式。

那么，你可以用<p>和<h1>来构建一个网页，然后通过为 p 和 h1 创建 CSS 规则来修改这些元素的默认样式。

或者你可以完全用 div 构建你的网页，为各种类创建CSS规则，并将类应用于网页上的 div 标签中！ （一般结合两者食用）

我只是开个玩笑，这么做很不好！

这是因为不同的标签会具有不同的功能，能够让我们快速分辨哪些内容是核心，哪些内容是装饰性的，哪些内容是可以修改的。

header 标签为屏幕阅读器提供了更多信息；而 p 标签的作用并不比 div 标签多得多；div 更容易被泛化为其他样式，做出你想要的效果。

请在学习的过程中慢慢摸索不同的标签的不同用途~

引用 CSS 文件

接下来，介绍如何将 HTML 和 CSS 联系起来。

我们使用link标签链接 CSS 文件。其中 rel 的值为 stylesheet（样式表），href 的值写 CSS 文件的路径信息。

<!DOCTYPE html>
<html>

<head>
    <title>Title!</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h1>Heading!</h1>
    <p>Paragraph!</p>
</body>

</html>

还有其他方法，但那些并不是很好。

这里的“rel”代表关系（relationship）

另请注意，<link>与<a>创建超链接不同，并且它不用于创建超链接！

总结：

HTML 就是一堆相互嵌套的盒子；

CSS 就是对元素样式进行描述的列表；

CSS 中的描述能够影响 HTML 中盒子的样式。

avatar
文章
阅读
粉丝