(1)CSS 基础与选择器初识

本知识学习用时:3小时,总第19/10000小时

前言:通过前3篇系列文章我们对 HTML 有了一个比较详细的了解,那接下来的一些列文章,我们将一步步细致的认识 CSS 。届时,我相信我们能够轻而易举的、规范的写出我们看见的任意一个静态页面。

一、CSS 相关定义

CSS(Cascading Style Sheets 层叠样式表):用来控制 HTML 的表现。——CSS决定页面好不好看、动画效果酷不酷炫。

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

二、CSS 工作原理

再次复习文章:《老生常谈的从 URL 输入到页面展现背后发生的事》

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

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

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

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

④ 再接着,同步的这个 CSS 文件就下载下来了,下载下来之后,浏览器同时去解析这个 CSS 文件,让他变成一个 “CSS 树”。然后浏览器再去做一个计算,把 “DOM 树”和“CSS 树”对应起来,最终得到一个新的“树”。

这个“树”里有两个节点,一个是它的元素是什么东西;另一个是这个元素的具体参数:宽、高、位置、大小、边框等。

⑤ 浏览器得到这个“树”过后,再去“渲染”。

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

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

三、CSS 在 HTML 中的引入方式

外部样式表:通过

“链入” CSS(如上例)

在 里边的 标签下边加

标签。

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

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

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

单从形式上,@import 这种方式与

“链入” CSS 的方式差不多,都是从外部引入 CSS 文件。

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

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

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

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

内部样式表:放在 head 元素内的 标签中。

如上篇文章的例子:

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

(注:1、这种写法注意分号、前后的引号;2、一般不推荐使用,在特定情况下使用。一般情况下推荐使用

“链入” CSS )

四、CSS 选择器初识

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

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

元素选择器

ID 选择器

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

注释:

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

但注意:id 是唯一的,一个元素不能有多个 id ,另外页面上不允许多个元素都有相同的 id。

id 取名时,不允许出现空格。

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

类选择器

“类”:可直接理解为一个足球俱乐部,在这个俱乐部(类)里所有成员(元素)都必须遵循统一的规范,出息商业活动时都必须着同样的装束。

创建一个“类”分两步:

① 为 HTML 元素增加一个 class 属性,这样就可以将这个元素加到这个“类”中。

⚠️注意:一个元素可以加入多个类,即一个人可以加入多个俱乐部,写法上各个“类名”用“空格”隔开。

② 在 CSS 中选择这个“类”(⚠️注意格式为:需要在 class 类名前面用一个 . 字符)。

小总结:想要对多个元素使用某个样式时,就把这些元素都加入到这个“类”里,就会用到 class ;但如果只有一个元素需要加这个样式,那就用 id 。

通配选择器

这个选择器可以与任何元素匹配,就像一个“通配符”。如:

这个“规则”可以让文档中所有元素的 color 值都指定为 yellow 。

属性选择器

“属性选择器”根据元素的属性和属性值来匹配元素,“属性”英文单词为:attribute。

① [attr] 即直接用 [ ] 符号将元素的属性名框起来,用于根据元素属性来选择元素:

(选择有 class 属性(值不限)的所有 li 元素,使其文本为 red ,背景色为 yellow )

② [attr=val] 即直接用 [ ] 符号将“属性”和与之对应的“属性值”框起来,用于根据具体属性及其值来选择元素:

(选择有 class 属性值为 second 的所有 li 元素,使其文本为 red ,背景色为 yellow )

⚠️注意:这种选择格式要求必须与“属性值”完全匹配,不多不少,不能有任何形式的简写。例:

(选择有 class 属性值为 third done 的所有 li 元素,使其文本为 red ,背景色为 yellow )

✘不能简写为:

③ [attr~=val] 即直接用 [ ] 符号将“属性”、符号 ~ 和与之要加样式的“属性值”框起来,用于根据部分属性值来选择元素:

(选择有 class 属性值包含done 的所有 li 元素,使其文本为 red ,背景色为 yellow )

④ -1:

(即选择 class 整个属性值以 se 开头的所有 li 元素, 使其文本为 red ,背景色为 yellow )

④-2:

(即选择 class 整个属性值以 ne 结尾的所有 li 元素, 使其文本为 red ,背景色为 yellow )

④-3:

(即选择 class 属性值中包含字串 ir 的所有 li 元素, 使其文本为 red ,背景色为 yellow )

助记:^ 整个是笑脸(^^)的左边开始,所以记忆为属性值以某字符开头;

$ 美元符号很像一个摇摆的尾巴,所以可记忆为属性值以某字符结 尾;

* 星号犹如星星,都是一串一串的,所以可记忆为属性值中包含某字串。

(当需要对以上代码中:选择 lang 属性等于 en 或者以 en- 开头的所有元素,使其文本为 red ,背景色为 yellow )

⚠️注意:⑤这种属性选择器常常用于匹配语言值。

后记:对于基本的选择器,本篇我们先了解到这,下篇文章我们将对以下选择器及其周边知识作详解:伪类选择器、伪元素选择器、组合选择器。

CSS 知识点多且杂,唯有静下心来,动起手来用一行行代码逐个击破才不至于浮于表面。加油加油,“我荒废了时间,时间便把我荒废了”。

欢迎继续关注下文 :

(2)CSS 选择器详解

(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180611G1Z19D00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券