CSS (层叠样式表) 让你可以创建好看的网页,但是它具体是怎么工作的呢?

这篇文章通过一些很简单的例子,告诉我们什么是 CSS,

同时还会涉及一些和 CSS 相关的专业术语。

预备知识: 基本的计算机知识,安装基础软件文件处理 的基础知识, 还有HTML基础 (学习 HTML概述。)
目标: 了解什么是CSS。

在 HTML概述 模块我们学习了HTML是什么,以及如何使用它来组成页面。

浏览器能够解析这些页面。

标题部分看起来会比正常文本更大,段落则会另起一行,并且相互之间会有一定间隔。

链接通过下划线和不同的颜色与其他文本区分开来。

这些都是浏览器的默认样式——当开发者没有指定样式时,浏览器通过这些最简单的样式使页面具有基本可读性。


如果所有网站都像上图那样,互联网就会非常枯燥。

但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素,从而充分展示你喜欢的设计样式。


CSS用来干什么?

前文提到过, CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, 但你可能也听说过其他可标记语言,如 SVG 或 XML

展示一份文档给用户实际上是将文档变成用户可用的文件。

Browsers:如 FirefoxChrome, 或 Edge,都可以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化。

注意: 浏览器有时候也被称为 user agent,大致可以当这个程序是一个存在于计算机系统中的人。

当我们讨论CSS时,浏览器是 User agent 的主要形式, 然而它并不是唯一的一个。

还有其他可用的user agents — 像是那些可以把HTML和CSS文档转换为可以打印的PDF文档的软件。

CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色大小

它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局

它甚至还可以用来做一些特效,比如动画。查看本段内容中所给出的特定案例。


CSS 语法

CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果:

h1 {
color: red;
font-size: 5em;
}

语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素。

在这个例子中我们为一级标题(主标题<h1>)添加样式。

接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)

每个声明都指定了我们所选择元素的一个属性,之后跟一个我们想赋给这个属性的值。

冒号之前是属性,冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值。

在这个例子中,我们指定了 color 属性,它可以接受许多颜色值;还有 font-size 属性,它可以接收许多 size units 值。

一个 CSS 样式表可以包含很多个规则。

h1 {
color: red;
font-size: 5em;
} p {
color: black;
}

你会发现你已经很快掌握了一些属性的值,但是属性可以接受的值远不止这些。

在MDN上每个属性都有单独的页面,不论你是忘记了某个属性,还是想要知道一个属性还能接受什么其它的值,这些页面都可以帮助你。

注意:在MDN上的 CSS reference 页面列举了所有的 CSS属性页面(同时也包括其它的CSS特性)。

另外,当你想要寻找一个CSS特性的更多内容时,多使用你的搜索引擎来搜索 "mdn css-feature-name" 。

例如,搜索 "mdn color" 和 "mdn font-size"!

CSS 模块

你可以通过 CSS 为许多东西添加样式,CSS 由许多模块(modules) 构成。

你可以在 MDN 上浏览这些模块的参考内容(MDN reference),许多模块都被组织在自己单独的文档页面。

例如,我想查找一下 MDN reference 的 Backgrounds and Borders 模块的相关内容,来了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。你也可以在 CSS Specification 查找(见下文),它定义了CSS规范 。

在这个阶段你不必过于担心 CSS 是如何组织的(how CSS is structured),但是它能帮助你更好的掌握 CSS。

例如,你注意到某个属性和另外一些属性的相似点,并且它们可能确实是相同的格式。

举个具体点的例子:

如上文中的 Backgrounds and Borders 模块 — 你会发现 background-color 和 border-color 这两个属性在逻辑上相通。

并且它也确实如此。


CSS 规范

所有的标准Web技术(HTML, CSS, JavaScript等) 都被定义在一个巨大的文档中,称作 规范specifications (或者简称为 "specs"),它是由 (像是 W3CWHATWGECMA 或 Khronos) 这些规范化组织所发布的,其中还定义了各种技术是如何工作的。

CSS 也不例外 — 它是由W3C(万维网联盟)中的一个名叫 CSS Working Group 团体发展起来的。

这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。

也有其他的人员,比如受邀专家(invited experts),他们作为不从属于任何组织的独立声音加入团体。

新的 CSS 特性被开发出来,或是因为某个浏览器热衷于开发新功能,或是因为Web设计人员与开发者要求增加一个新特性,又或是 CSS Working Group 内部的讨论决定。

CSS 始终在发展,并伴随着新的特性。

然而,有一件事情从始至终都未改变,那就是不让新的改变破坏旧的网站,即使是2000年建立的网站,如今也能正常访问!

作为一个 CSS 新手,你会发现阅读 CSS 规范 中的内容非常吃力 — 它旨在为工程师在用户代理(user agents)中实现对 CSS 各种特性的支持,而不是作为一本为Web开发者理解 CSS 内容的教程。

即使是有经验的开发者,也更倾向于使用 MDN 文档或者其它教程。

但是,知晓它的存在,理解 CSS、规范 和 浏览器支持(见下文) 之间的关系是很有价值的。


浏览器支持

当一个浏览器支持 CSS 后,我们就可以用它来进行Web开发了。

这意味着我们写在 CSS 文件中的代码可以被指令执行,展示到荧幕中。

在 CSS 如何工作 一节中我们会学习到更多的相关知识。

但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的,通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。

因此,查看特性的实现状态(implementation status)是非常有用的。

在 MDN 上的每个属性的页面中都标有它们对应的状态,你可以通过这种方法来查看你是否可以去使用它。

以下是 CSS font-family 属性的兼容数据表。

Update compatibility data on GitHub

  Desktop Mobile
  Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
font-family Full support1 Full support12 Full support1

Notes

打开

Full support3 Full support3.5 Full support1 Full support1 Full support18 Full support4 Full support10.1 Full support1 Full support1.0
system-ui Full support56 Full support79 No supportNo打开 No supportNo Full support43 Full support9

Notes Alternate Name

打开

Full support56 Full support56 No supportNo Full support43 Full support9

Alternate Name

打开

Full support6.0
 
 

Legend

Full support 
Full support
No support 
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

下一步

现在你对 CSS 已经有了一定的理解,接下来,通过 CSS 入门的学习,你将可以自己写一些 CSS 代码了。

【C3】01 概述的更多相关文章

  1. kafka详解(01) - 概述

    kafka详解(01) - 概述 定义:Kafka是一个分布式的基于发布/订阅模式的消息队列(Message Queue),主要应用于大数据实时处理领域. 消息队列 MQ传统应用场景之异步处理 使用消 ...

  2. Zookeeper详解(01) -概述

    Zookeeper详解(01) -概述 概念 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. Zookeeper从设计模式角度来理解,是一个基于观察者模式设计的分 ...

  3. 01 - 概述 VTK 6.0 迁移

    摘要 对vtk版本4和5的管道机制重新架架构的主要目的是:迁移数据对象和算法对象中的管道执行逻辑到一个新集合的类中,我们称这个集合类叫executives.分离数据和执行模型的代码后,可以双双简化修改 ...

  4. Redis数据库 01概述| 五大数据类型

    1.NoSQL数据库简介 解决应用服务器的CPU和内存压力:解决数据库服务的IO压力: ----->>> ① session存在缓存数据库(完全在内存里),速度快且数据结构简单: 打 ...

  5. Hive 01 概述、安装配置

    概述 数据仓库:是一个面向主题的.集成的.不可更新的.随时间不变化的数据集合,它用于支持企业或组织的决策分析处理. 数据仓库的结构和建立过程: 数据源 数据存储及管理 ETL Extract 提取 T ...

  6. 【OracleDB】 01 概述和基本操作

    实例概念: Oracle有一个特殊的概念 Oracle数据库 = 数据库 + Oracle文件系统 + Oracle实例 实例处理Oracle的请求,调用文件系统 然后返回结果响应给客户端 单实例和多 ...

  7. 【大数据面试】Flink 01 概述:包含内容、层次架构、运行组件、部署模式、任务提交流程、任务调度概念、编程模型组成

    一.概述 1.介绍 对无界和有界数据流进行有状态计算的分布式引擎和框架,并可以使用高层API编写分布式任务,主要包括: DataSet API(批处理):静态数据抽象为分布式数据集,方便使用操作符进行 ...

  8. Headfirst JSP 01 (概述)

    HTTP 协议 http 是tcp/ip上层协议, 如果你对这些网络协议还不是太熟悉, 下面提供一个非常简单的解释, tcp负责确保从一个网络节点向另一个网络节点发送文件能作为一个完整的文件到达目的地 ...

  9. Python学习笔记 :01概述

    Python基础 首先推荐学习Python基础的教程和书籍 视频教程推荐南京大学张莉老师在cousera上的教程用Python玩转数据 入门教程<Python基础教程> 数据挖掘教程< ...

  10. 重学C语言---01概述

    1.什么是C语言 C语言是一种计算机程序设计语言,它既具有高级语言的特点,又具有汇编语言的特点.计算机语言是从第二次世界大战以后,经历了戏剧性的发展过程.从机器语言到汇编语言和高级语言.C语言是与硬件 ...

随机推荐

  1. rust 程序设计笔记(1)

    简介 - Rust 程序设计语言 简体中文版 hello world & rust相关工具使用 hello world rustc rustc --version complie .rs pr ...

  2. Gradle查看依赖及排除依赖的方法

    查看项目的编译依赖,同时写入文件aa.txt F:\sts4\order-test>gradlew :order-test-api:dependencies --configuration co ...

  3. Postman使用记录,通过表格动态赋值循环调用接口 - Using CSV and JSON data files in the Postman Collection Runner

    1.GET请求,通过导入csv文件来处理 GET http://localhost:8080/web/addstudent?sno={{sno}}&name={{name}}&sex= ...

  4. 算法金 | A - Z,115 个数据科学 机器学习 江湖黑话(全面)

    大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 机器学习本质上和数据科学一样都是依赖概率统计,今天整整那些听起来让人头大的机器学习江湖 ...

  5. LangGraph实战

    1.概述 前段时间LangChain发布了LangGraph,它引起了很多关注.LangGraph 的主要优势在于它能够实现循环工作流,这对于在 LLM 应用程序中模拟类似代理的行为至关重要.本篇博客 ...

  6. 从零开始带你上手体验Sermant自定义插件开发

    本文分享自华为云社区<Sermant自定义插件开发上手体验>,作者:华为云开源. 一.研究缘由 由于目前我们所处的行业是汽车行业,项目上进行云服务的迁移时使用到了Sermant中的相关插件 ...

  7. 重复消费Java Stream的三种方法。你选择哪种?

    Java中的Stream一旦被消费就会关闭,不能再次使用了.如果的确有需要该怎么办呢? 这里介绍三种重复消费Stream的方法. 1. 从集合再次创建 这里你都不用往下继续看就知道该怎么办,不过我还是 ...

  8. 树莓派4B-控制霍尔编码器

    霍尔编码器-直流减速电机 介绍 直流减速电机,即齿轮减速电机,是在普通直流电机的基础上,加上配套齿轮减速箱.齿轮减速箱的作用是,提供较低的转速,较大的力矩.同时,齿轮箱不同的减速比可以提供不同的转速和 ...

  9. ROS2开发BUG记录:在将 use_sim_timer 置为 true 时,节点的 Timer_Callback 行为“异常”

    问题: 在将 use_sim_timer 置为 true 时,节点 Timer_Callback 行为 "异常" .在回调函数中,使用 self.get_logger().info ...

  10. MySQL 获取所有表名、所有表结构

    获取所有表名 SELECT A.TABLE_SCHEMA '数据库', A.TABLE_NAME '表名', A.TABLE_ROWS '表记录行数', A.CREATE_TIME '创表时间', A ...