原创:itsOli @前端一万小时
本文首发于公众号「前端一万小时」
本文版权归作者所有,未经授权,请勿转载!
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
❗️❗️❗️以下链接为本文最新勘误篇章——《CSS 基础与选择器初识》
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&
amp;amp;amp;amp;gt; “链入” 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 名前面使用一个#
字符。
4.3 类选择器
源码及效果展示
“类”:可直接理解为一个足球俱乐部,在这个俱乐部(类)里,所有成员(元素)都必须遵循统一的规范——如出席商业活动时都必须着同样的装束。
创建一个“类”分两步:
- 为 HTML 元素增加一个 class 属性,这样就可以将这个元素加到这个“类”中。
❗️注意:一个元素可以加入多个类,即一个人可以加入多个俱乐部,写法上各个“类名”用“空格”隔开。
<ul>
<li class="first">fine</li>
<li class="second">thank you</li>
<li class="third done">and you</li>
</ul>
- 在 CSS 中选择这个“类”(❗️注意:格式为在 class 类名前面用一个
.
字符)。
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
小总结:想要对多个元素使用某个样式时,就把这些元素都加入到这个“类”里,就会用到 class;但如果只有一个元素需要加这个样式,那就用 id。
4.4 通配选择器
这个选择器可以与任何元素匹配,就像一个“通配符”。如:
* {
color: yellow;
}
这个“规则”可以让文档中所有元素的 color 值都指定为 yellow。
4.5 属性选择器
“属性选择器”根据元素的属性和属性值来匹配元素,“属性”英文单词为:attribute。
4.5.1 [attr]
源码及效果展示
即直接用 []
符号将元素的属性名框起来,用于根据元素属性来选择元素:
li[class] {
color: red;
background: yellow;
}
选择有 class 属性(值不限)的所有 li 元素,使其文本为 red,背景色为 yellow 。
4.5.2 [attr=val]
源码及效果展示
即直接用 []
符号将“属性”和与之对应的“属性值”框起来,用于根据具体属性及其值来选择元素:
li[class="second"] {
color: red;
background: yellow;
}
选择有 class 属性值为 second 的所有 li 元素,使其文本为 red,背景色为 yellow。
❗️注意:这种选择格式要求必须与“属性值”完全匹配,不多不少,不能有任何形式的简写。
例:选择有 class 属性值为 third done 的所有 li 元素,使其文本为 red,背景色为 yellow。
li[class="third done"] {
color: red;
background: yellow;
}
✘不能简写为:
li[class="third"] {
color: red;
background: yellow;
}
4.5.3 [attr~=val]
源码及效果链接
即直接用 []
符号将“属性”、符号 ~
和与之要加样式的“属性值”框起来,用于“根据部分属性值”来选择元素:
li[class~="done"] {
color: red;
background: yellow;
}
选择有 class 属性值包含 done 的所有 li 元素,使其文本为 red,背景色为 yellow。
4.5.4 ^
$
*
1. ^
源码及效果展示
li[class^="se"] {
color: red;
background: yellow;
}
选择 class 整个属性值以 se 开头的所有 li 元素,使其文本为 red,背景色为 yellow。
2. $
源码及效果展示
li[class$="ne"] {
color: red;
background: yellow;
}
选择 class 整个属性值以 ne 结尾的所有 li 元素,使其文本为 red,背景色为 yellow。
3. *
源码及效果展示
li[class*="ir"] {
color: red;
background: yellow;
}
选择 class 属性值中包含字串 ir 的所有 li 元素,使其文本为 red,背景色为 yellow。
助记:br/>^ 是笑脸(^^)的左边开始,所以记忆为属性值以某字符开头;br/>$ 美元符号很像一个摇摆的尾巴,所以可记忆为属性值以某字符结尾;br/>* 星号犹如星星,都是一串一串的,所以可记忆为属性值中包含某字符串。
4.5.5 语言值匹配
源码及效果展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>表示“谢谢”的语言</title>
</head>
<body>
<h1>表示“谢谢”的语言</h1>
<dl>
<dt>英语</dt>
<dd lang="en">Thank you.</dd>
<dt>日语</dt>
<dd lang="ja">ありがとう.</dd>
<dt>法语</dt>
<dd lang="en">Merci.</dd>
<dt>澳洲英语</dt>
<dd lang="en-au">Thank you very much.</dd>
</dl>
</body>
</html>
当需要对以上代码中:选择 lang
属性等于 en
或者以 en-
开头的所有元素,使其文本为 red,背景色为 yellow。
*[lang|="en"] {
color: red;
background: yellow;
}
❗️注意:上面这种属性选择器常常用于匹配语言值。
后记: 对于基本的选择器,本篇我们先了解到这,下篇文章我们将对以下选择器及其周边知识作详解——伪类选择器、伪元素选择器、组合选择器。
CSS 知识点多且杂,唯有静下心来、动起手来,用一行行代码逐个击破才不至于浮于表面。
共勉:我荒废了时间,时间便把我荒废了。
祝好,qdywxs ♥ you!