csdn推荐
本章概要
CSS 与软件开发领域的很多东西都不太一样——虽然算不上传统意义上的编程语言,但却要求具备抽象思维;虽然也不是纯粹的设计工具,但却要求具备创造力。CSS 提供了一种看似简单的声明式语法,但是只要写过大型项目 CSS 的人都知道,CSS 可能会变得非常复杂。
在传统编程的学习中遇到问题,通常可以直接搜索出想要的答案(例如:“如何在数组中找出类型为 x 的项?”);而对于 CSS 而言,将遇到的问题提炼为一个可以回答的提问却并非易事。即便可以提炼,最终答案也往往是“看情况”。最好的解决办法通常取决于具体的应用场景,以及该问题的处理需要精确到什么程度、相应要考虑哪些具体的边界条件等。
了解一些“小技巧”或实用秘籍固然有用,但想真正掌握 CSS 这门语言还须理解这些做法背后的原理。本书例证详实,但主要目的还是 CSS 的基本原理。
术语概览
由于 CSS 的学习渠道不同,您或许不熟悉 CSS 语法中各部分的叫法。我不会在此赘述,但由于书中会用到这些称谓,最好还是先弄清它们的含义为上。
以下这一行 CSS 称为一句 声明。该声明包含一个 属性(property,即 color)和一个 值(value,即 black):
color: black;
property 属性不能与 attribute 属性混淆,后者是 HTML 语法的一部分。例如,在元素 中,href 就是 a 标签的 attribute 属性。
包含在大括号内的一组声明被称作一个 声明块(declaration block)。声明块的前面是一个 选择器(selector)。一个选择器指定了页面上的一个或多个元素,它们将被这些声明所修饰。以下是一个 body 选择器的示例,指向 元素:
body {
color: black;
font-family: Helvetica;
}
选择器与声明块合在一起,称为一个 规则集(ruleset),也叫一个 规则(rule)。不过据我观察,很少有人像这样精确使用规则的单数形式,通常是用其复数形式来指代一系列样式集合。
最后,@规则(at-rules)是指用一个“@”符号开头的语法结构,比如 @import 导入规则,以及 @media 媒体查询规则。
本书第一部分从 CSS 最基本的原理入手,包括:层叠、盒模型以及各种可用的单位类型。大多数 Web 开发人员都知道层叠和盒模型。他们了解像素单位,可能也听说过“应该换用 em 作单位”。诸如此类的话听得越多,并且一直对这些知识浅尝辄止,终究是走不了多远的。要想彻底拿下 CSS,就必须先理解这些基础知识,而且是深入地理解。
想必您现在一定迫不及待地想学习最新最酷的 CSS 特性了。它们确实令人兴奋,但我们得先回顾一下 CSS 的基础知识。我会快速过一遍,当中可能有您已经熟悉的基础,然后再深入探讨各个话题。本章旨在强基固本,为您后续 CSS 知识体系的构建保驾护航。
本章先从 CSS 中的 C 入手(代表 cascade,层叠)。先阐明其工作原理,再给出实际应用;接着会介绍与层叠相关的话题——继承。然后再谈谈简写属性及其常见的认知误区。
总之,本章话题都是关于如何将特定样式应用到指定元素上的,其中有不少都是开发者填过的坑。全面理解这些话题可以更好地掌控 CSS。幸运的话,您还将更好地认同 CSS 甚至对 CSS 开发乐在其中。
文章来源:https://blog.csdn.net/frgod/article/details/139711139
微信扫描下方的二维码阅读本文
暂无评论内容