01.持续学习CSS——入门认知

CSS是个啥

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。用人话来说就是,他就是让网站呈现的高大上,牛逼轰轰。

CSS语法

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

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

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

语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题(主标题<h1> (en-US)添加样式。

接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(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规范

所有的标准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 属性的兼容数据表。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效