阅读 764

(Ⅰ)CSS 工作原理、引入方式及选择器初识 | CSS 基础与选择器初识

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

1. CSS 加载方式有几种?
2. @import 有什么作用?如何使用?
3. CSS 选择器常见的有几种?
4. id 选择器和 class 选择器的使用场景分别是什么?
5. @charset 有什么作用?
6. 简述 src 和 href 的区别?
7. 页面导入时,使用 link 和 @import 有什么区别?

8. 在 index.css 和 common.css 中有如下内容,HTML 里引入 index.css 后发现页面字体的颜色和大小
   没发生任何变化,原因可能是?(不定项)
    /* index.css */
    @import "common.css"
    body {
      font-size:12px
    }
    /* common.css */
    body {
      color: red;
    }
  ✅ common.css 的文件路径可能错了,检查元素看看报错可以定位问题。
  ✅ @import "url"; 后面必须有分号。
  ✅ index.css 里 body 的字体设置中的 : 写成了 :。
  ❌ font-size: 12px 后面缺少了分号。
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



前言: 通过前 3 篇系列文章,我们对 HTML 有了一个比较详细的了解。接下来的一系列文章,我们将一步步细致地认识 CSS。

届时,我相信我们能够轻而易举地、规范地写出我们看见的任意一个静态页面。


1 CSS 相关定义

CSS(Cascading Style Sheets 层叠样式表):用来控制 HTML 的表现。

CSS 决定页面好不好看、动画效果酷不酷炫。

HTML+CSS 是一个静态页面的基本组成。就好比一个女生在有基本的身体五官(HTML)后,又对自己打扮了下:化了妆、梳了发型、穿了好看的衣服(CSS)。


2 CSS 工作原理

再次复习文章:《从零基础到轻松就业 | 老生常谈的从 URL 输入到页面展现背后发生的事》

  • 首先,当我们在浏览器上输入一个 URL 并回车后,浏览器向服务器发了一个请求,服务器就把相应的数据——HTML 返回给浏览器。

  • 然后,浏览器拿到这个数据后就加载这个页面,去解析这个 HTML。 怎样去解析呢:浏览器得到的字符串,它会对其做一些编码等的分析,把字符串解析成“树状”的结构,创建一个 DOM,叫 DOM 树(因为它是一个文档结构,类似“树”这样一个效果)。

  • 接着,在解析 HTML 的过程中,浏览器会去加载相应的 CSS。比如,当解析到以下框选的代码时:

浏览器会再次去向服务器发请求,去获取这个 style.css 文件。

  • 继而,同步的这个 CSS 文件就下载下来了。下载下来之后,浏览器同时去解析这个 CSS 文件,让他变成一个 “CSS 树”。然后浏览器再去做一个计算,把 “DOM 树”和“CSS 树”对应起来,最终得到一个新的“树”。 这个“树”里有两个节点,一个是它的元素是什么东西;另一个是这个元素的具体参数:宽、高、位置、大小、边框等。

  • 浏览器得到这个“树”之后,再去“渲染”。 相当于我们得到一个很丰富的数据,这个数据告诉了我们页面上每个元素的位置、每个元素之间的关系——父子、邻居等。这个时候,我就可以拿块画板进行“绘制”。

  • 最后,一个色彩丰富的页面就展现在了我们面前:


3 CSS 在 HTML 中的引入方式

3.1 外部样式表:通过 <link> “链入” CSS(如上例)

<head> </head> 里边,紧接着 <title> 标签下边加 <link> 标签。

  • <link> 标签中, rel="stylesheet" ,“rel 属性”指定了 HTML 文件与所链接的文件的关系,这里指我们要链接一个“样式表”——stylesheet。

  • 样式表放入这个 href(Hypertext Reference)——这里可以用相对链接(上例用的一个 .css 文件,此文件将所有与之相关的 CSS 全部包含在里边,这里注意文件路径要写对),也可以用一个完整的 URL。

3.2 外部样式表:通过 @import “导入”样式

<style>
  @import url("index.css");      /* ① */
  @import url(index.css);        /* ② */
  @import "index2.css";          /* ③ */
  @import url("landscape.css") screen and (orientation:landscape); /* ④ */
</style>
复制代码

单从形式上, @import 这种方式与 <link> “链入” CSS 的方式差不多,都是从外部引入 CSS 文件。

格式上 ①②③ 都可以,效果等同。需要注意的是,对于多个 .css 文件或 URL 的“导入”时,分号 ; 一定不能省。

本例 ④ 中后半段加的是“媒体查询限制条件”:

  • screen 指“在有浏览器屏幕下”;
  • and (orientation:landscape) 针对移动端设备的“显示方向 orientation ”是“横屏(landscape)”。

💡“竖屏”英文单词是:portrait。

3.3 内部样式表:放在 head 元素内的 <style> 标签中

如上篇文章的例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 表单</title>
  <style>
    #txa {
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>
……
复制代码

3.4 内联样式:直接写在元素开始标签的 style 属性中

<p style="background: yellow; font-family: sans-serif;">Oli 是个好人!</p>
复制代码

注:

  • 这种写法注意分号、前后的引号;

  • 一般不推荐使用,在特定情况下使用。

🏆总结:一般情况下推荐使用 <link> “链入” CSS。


4 CSS 选择器初识

CSS 选择器用于“定位”我们想要给予“样式”、“规则”的 HTML 元素。

对于 CSS 的“样式”、“规则”,我们可以拆分理解:

h1 {color: red; background: yellow;}
复制代码

4.1 元素选择器

p {
  color: yellow;
}
div {
  background: yellow;
}
p, div {
  font-family: sans-serif;
}
复制代码

4.2 ID 选择器

id 定位页面上唯一的元素(如上篇文章的例子):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML 表单</title>
  <style type="text/css">
    #txa {                                        /* ① */
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>
…
  <div>
    <label for="txa">评论:</label>
    <textarea id="txa" name="article">是个好人!    <!-- ② -->  
    </textarea>                         
  </div>复制代码

💡注释:

  • 对于 ② 中 id="txa" :“id 属性”是一种标识元素“唯一”的方法,带 id 的元素有一个特性——可以直接链接这些元素、给他们单独加样式。

❗️但注意:id 是唯一的,一个元素不能有多个 id,另外页面上不允许多个元素都有相同的 id。id 取名时,不允许出现空格。

  • 对于 ① 中 #txa :按 id 来选择一个元素,需要在 id 名前面使用一个 # 字符。

下一篇我们继续讲解初识“选择器”都得了解哪些东西。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论