What is CSS?

 

CSS (层叠样式表)允许您创建美观的网页,但是它如何在后台运行? 本文通过一个简单的语法示例说明了CSS是什么,还介绍了有关该语言的一些关键术语.

Prerequisites: 基本的计算机知识, 已安装的基本软件使用文件的基本知识以及HTML基础(研究HTML简介 ).
Objective: 要了解CSS是什么.

HTML简介模块中,我们介绍了什么是HTML以及如何使用HTML标记文档. 这些文档将在网络浏览器中可读. 标题看起来比常规文本要大,段落会换行并在它们之间留有空格. 链接带有颜色和下划线,以区别于其他文本. 您所看到的是浏览器的默认样式-浏览器应用于HTML的非常基本的样式,以确保即使页面的作者未指定任何显式样式,该样式也基本可读.

The default styles used by a browser

但是,如果所有网站看起来都是这样,那么网络将是一个无聊的地方. 使用CSS,您可以精确控制HTML元素在浏览器中的外观,并使用您喜欢的任何设计显示标记.

What is CSS for?

正如我们之前提到的,CSS是一种语言,用于指定如何将文档呈现给用户-如何设置文档的样式,布局等.

文档通常是使用标记语言构造的文本文件-HTML是最常见的标记语言,但是您也可能会遇到其他标记语言,例如SVGXML .

Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.

注意 :浏览器有时也称为用户代理 ,它基本上是表示代表计算机系统内部人员的计算机程序. 浏览器是我们谈论CSS时想到的用户代理的主要类型,但是,它并不是唯一的一种. 还有其他可用的用户代理,例如将HTML和CSS文档转换为PDF进行打印的用户代理.

CSS可以用于非常基本的文档文本样式-例如,更改标题和链接的颜色大小 . 它可用于创建布局,例如将单列文本转换为具有主要内容区域和侧栏的布局 ,以显示相关信息. 它甚至可以用于动画等效果. 请查看本段中有关特定示例的链接.

CSS syntax

CSS是一种基于规则的语言,您可以定义规则来指定应应用于网页上特定元素或元素组的样式组. 例如,"我希望页面上的主标题显示为大红色文本."

以下代码显示了一个非常简单的CSS规则,该规则将实现上述样式:

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

规则以选择器打开. 这将选择我们要设置样式的HTML元素. 在这种情况下,我们将设置第一级标题( <h1> )的样式.

然后,我们有一组花括号{ } . 在这些内部将是一个或多个声明 ,这些声明采用属性对的形式. 每对指定我们选择的元素的属性,然后是我们想要赋予该属性的值.

在冒号之前,我们具有属性,在冒号之后,我们具有值. CSS 属性具有不同的允许值,具体取决于指定的属性. 在我们的示例中,我们具有color属性,该属性可以采用各种颜色值 . 我们还有font-size属性. 该属性可以采用各种大小单位作为值.

CSS样式表将包含许多这样的规则,一个接一个地写.

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

p {
    color: black;
}

您会发现自己快速学习了一些价值观,而另一些则需要查找. MDN上的各个属性页为您提供了一种快速的方法,以在您忘记或希望知道还能用作值的其他内容时查找属性及其值.

注意 :您可以找到MDN CSS参考上列出的所有CSS属性页面(以及其他CSS功能)的链接. 另外,每当您需要查找有关CSS功能的更多信息时,就应该习惯在自己喜欢的搜索引擎中搜索" mdn css-feature-name ". 例如,尝试搜索" mdn color"和" mdn font-size"!

CSS Modules

由于可以使用CSS设置样式的东西太多,因此该语言分为模块 . 在探索MDN时,您会看到对这些模块的引用,并且许多文档页面都是围绕特定模块组织的. 例如,您可以查看MDN对Backgrounds and Borders模块的引用,以了解其目的是什么,以及它包含哪些不同的属性和其他功能. 您还将找到定义该技术的CSS规范的链接(请参见下文).

在此阶段,您不必太担心CSS的结构,但是,例如,如果您知道在其他类似事物中很可能会发现某个特定属性并且可以因此可能在相同的规格中.

对于特定示例,让我们回到Backgrounds and Borders模块-您可能认为对于在此模块中定义background-colorborder-color属性是合乎逻辑的. 而且你会是对的.

CSS Specifications

所有Web标准技术(HTML,CSS,JavaScript等)都在称为规范(或简称为" specs")的巨型文档中定义,这些文档由标准组织(例如W3CWHATWGECMAKhronos )发布并进行定义这些技术应该如何表现.

CSS没什么不同-它是由W3C内的一个称为CSS Working Group的小组开发的 . 该小组由对CSS感兴趣的浏览器供应商和其他公司的代表组成. 还有其他人(被邀请为专家 )扮演独立的声音. 它们未链接到成员组织.

CSS工作组开发或指定了新的CSS功能. 有时是因为特定的浏览器对具有某种功能感兴趣,而有时是因为Web设计人员和开发人员正在要求一项功能,有时是因为工作组本身已经确定了要求. CSS正在不断开发,并提供了新功能. 但是,关于CSS的一个关键问题是,每个人都非常努力地工作,永远不要以破坏旧网站的方式改变事物. 一个2000年建立的网站,当时使用了有限的CSS,今天仍然可以在浏览器中使用!

作为CSS的新手,您可能会发现CSS规范不胜枚举–它们是供工程师用来实现对用户代理中功能的支持,而不是供Web开发人员阅读以了解CSS. 许多经验丰富的开发人员宁愿参考MDN文档或其他教程. 但是,值得一提的是它们存在,了解您正在使用的CSS,浏览器支持(请参见下文)和规格之间的关系.

Browser support

Once CSS has been specified then it is only useful for us in developing web pages if one or more browsers have implemented it. This means that the code has been written to turn the instruction in our CSS file into something that can be output to the screen. We'll look at this process more in the lesson How CSS works. It is unusual for all browsers to implement a feature at the same time, and so there is usually a gap where you can use some part of CSS in some browsers and not in others. For this reason, being able to check implementation status is useful. On each property page on MDN you can see the status of the property you are interested in, so you can tell if you will be able to use it on a website.

以下是CSS font-family属性的compat数据图表.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxIE浏览器OperaSafariAndroid Webview适用于Android的ChromeAndroid版Firefox适用于Android的OperaiOS上的Safari三星上网
font-familyChrome 全力支持 1Edge 全力支持 12Firefox 全力支持 1
Notes
Full support 1
Notes
笔记 option元素不支持. 参见错误1536148 .
IE 全力支持 3Opera 全力支持 3.5Safari 全力支持 1WebView Android 全力支持 1Chrome Android 全力支持 18Firefox Android 全力支持 4Opera Android 全力支持 10.1Safari iOS 全力支持 1三星互联网安卓 全力支持 1.0
system-uiChrome 全力支持 56Edge 全力支持 79Firefox 没有支持 No
No support No
Full support 43
Notes Alternate Name
笔记 仅在macOS上受支持.
别名 使用非标准名称: -apple-system
IE 没有支持 NoOpera 全力支持 43Safari 全力支持 9
Notes 别名
Full support 9
Notes Alternate Name
笔记 从macOS 10.11开始受支持.
别名 使用非标准名称: -apple-system
WebView Android 全力支持 56Chrome Android 全力支持 56Firefox Android 没有支持 NoOpera Android 全力支持 43Safari iOS 全力支持 9
别名
Full support 9
Alternate Name
别名 使用非标准名称: -apple-system
三星互联网安卓 全力支持 6.0

Legend

Full support  
全力支持
No support  
没有支持
See implementation notes.
请参阅实施说明.
Uses a non-standard name.
使用非标准名称.

What's next

现在您已经了解了什么是CSS,让我们继续学习CSS入门 ,您可以在这里开始自己编写一些CSS.

In this module

  1. What is CSS?
  2. Getting started with CSS
  3. How CSS is structured
  4. How CSS works
  5. Using your new knowledge