1 属性和属性值

1 属性和属性值

截至 2020 年 4 月,CSS 拥有 522 个属性,可以通过以下的 JavaScript 代码进行验证。

var element = document.createElement('div');
var count = 0;
for (index in element.style) count++;
console.log(count); //截至2020年4月,输出为522

在未来,会有新属性加入规范,同时会有旧属性被弃用,所以属性数量既可能增多,也可能减少。

本书刻意忽略许多很少使用的 CSS 属性(以及至今仍未被主流浏览器支持的属性),这些属性只会带来不必要的混乱。

相反,本书仅关注 Web 设计师和开发人员当前常用的 CSS 属性,特别是与网格布局和弹性盒模型相关的属性。

1.1 位置

可以将 CSS 代码存为单独的外部文件,并在 HTML 中引用,如下所示。

<html>
   <head>
      <title>欢迎访问我的网站</title>
      <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
   <body>
      style.css中的CSS样式将被应用于本页面。
   </body>
</html>

也可以直接在 HTML 中编写 CSS 代码,如下所示。

<script type="text/css">CSS代码内容</script>

1.2 赋值

可以用以下代码为 ID 是 box 的 HTML 元素进行属性赋值。

#box {property: value;}

属性值因属性而异,既可以是像素、ptemfr 等单位指定的空间大小,也可以是红色、蓝色、黑色等颜色。颜色还可以用十六进制格式来表示,如 #00FF00,或以 rgb(r, g, b) 格式表示。

有些属性值专用于特定的属性。例如,CSS 的 transform 属性可以使用一个叫作 rotate 的属性值,该属性值表示度数,且需要在度数后附上 deg,如下所示。

/* 将该元素按顺时针方向旋转45度 */
#box {transform: rotate(45deg);}

1.3 注释

CSS 只支持使用“块注释”语法来创建代码内的注释,即通过 /* 注释内容 */ 的形式包裹注释。以下是一些例子。

/* 使用十六进制值把字体颜色设为白色 */
color: #FFFFFF;

/* 使用十六进制缩写值把字体颜色设为白色 */
color: #FFF;

/* 使用颜色名称把字体颜色设为白色 */
color: white;

/* 使用RGB值把字体颜色设为白色 */
color: rgb(255, 255, 255);

/* 使用CSS变量把字体颜色设为白色 */
color: var(--white-color);

还可以用注释符号包裹一整段 CSS 代码,从而暂时略去这段代码,以备不时之需。

/*
    content: "hello";
    border: 1px solid gray;
    color: #FFFFFF;
*/

CSS 不推荐 // 行内注释格式,其他的注释格式在 CSS 解释器中都是无效的,只会带来干扰。

1.4 赋值方式

我们使用 property: value; 的形式为 HTML 元素设置背景图片、颜色及其他基本属性,也可以使用简写形式——property: value value value;——指定单个属性的多个属性值,从而避免冗余。在简写时,一般用空格来分隔多个属性值。

近年来,CSS 历经很大的升级。在开始用示意图解释 CSS 属性之前,先来了解 CSS 是如何解释属性和赋值方式的。

/* 最常用的方式 */
property: value;

/* 用逗号分隔属性值 */
property: value, value, value;

/* 用空格分隔属性值 */
property: value value value;

涉及大小的属性可以用 calc 关键字进行计算。

/* 计算px */
property: calc(value[px]);

/* 也可以进行百分比和px 之间的计算 */
property: calc(value[%] - value[px]);

/* 同样可以进行百分比和百分比之间的计算 */
property: calc(value[%] - value[%]);

/* px 加px */
property: calc(value[px] + value[px]);

/* px减px */
property: calc(value[px] - value[px]);

/* px乘以px */
property: calc(value[px] * value[px]);

/* px除以px */
property: calc(value[px] / value[px]);

/* px乘以数值 */
property: calc(value[px] * number);

/* px除以数值 */
property: calc(value[px] / number);

/* 数值除以px是错误的 */
property: calc(number / value[px]);

最后一个示例会报错。这是因为,在使用 calc 时,不能用数值除以指定的像素值。

1.5 CSS 变量

可以使用 CSS 变量避免重复相同的值。

/* 定义变量--default-color */
element {--default-color: yellow;}

/* 定义变量--variable-name */
element {--variable-name: 100px;}

/* 使用变量--default-color设置背景颜色 */
element {background-color: var(--default-color);}

/* 把宽度设置为100px */
element {width: var(--variable-name);}

1.6 Sass/SCSS

虽然 Sass/SCSS 超出了本书的讨论范畴,但我还是要向进阶的 CSS 学习者推荐它们。需要注意的是,Sass/SCSS 在浏览器中无法做到“开箱即用”,需要用命令行安装 Sass 编译器,才能在 Web 服务器上启用它。

$a: #E50C5E;
$b: #E16A2E;
.mixing-colors {
  background-color: mix($a, $b, 30%);
}

我鼓励你进一步学习 Sass/SCSS,但前提是要对本书所述的标准 CSS 有足够的了解。

1.7 CSS 背后的理念

层叠样式表(Cascading Style Sheet,CSS)这个名称是有来由的。想象瀑布落下的激流冲击着石头,石头一层一层地被浸湿。与之类似,每个子元素的 CSS 样式都继承于已应用在其父元素上的样式。

文档对象模型(Document Object Model,DOM)的层级体现了网站结构,如图 1 所示。CSS 样式会逐层“渗透”DOM 树,这个神奇的过程由 CSS 选择器控制。

{%}

图 1 CSS 选择器协助遍历文档对象模型

让我们通过图 2 展示的这个简单的网站结构来理解 CSS 的基本概念。

图 2 主容器嵌套了一些元素。CSS 就像一把镊子,帮助我们选择想要的元素来应用具体的样式

如果给 <body> 标签应用黑色背景,那么嵌套在该标签内的所有元素都将自动继承黑色背景。

body {background: black; color: white;}

该样式会在父层次结构中“层叠”,使以下所有 HTML 元素都继承“在黑色背景下显示白色文本”的样式。

<body>
   <header>Website header</header>
   <article>Amazing article.</article>
   <footer>
      Privacy Policy.
      <span>2018 Copyright.</span>
   </footer>
</body>

如果想单独显示页脚并以红色突出显示 Privacy Policy.,以绿色突出显示 2018 Copyright.,那么可以应用以下 CSS 命令进一步扩展层叠原则。

body {background: black; color: white;}
footer {color: red;}
footer span {color: green;}

注意,footerspan 之间有一个空格。在 CSS 中,空格是 CSS 选择器符号,意指“在前面指定的标签内选择”。在本示例中,前面指定的标签就是 footer

1.8 CSS 选择器

/* 选择ID 为id 的单个元素 */
#id {}

/* 选择类名为class1 的所有元素 */
.class1 {}

/* 在ID 为parent 的父元素下选择类名为class1 的所有元素 */
#parent .class1 {}

1.9 宽松的环境

与 HTML 相似,CSS 是十分宽容的语言,因为它是专为网站不能保证被完全加载的环境设计的。如果代码编写错误,或者网页因某种原因没有被完全加载,那么 CSS 代码会降级适应,从而最大程度地显示样式。

1.10 常用项

以下是最常见的 CSS 属性和属性值组合。

/* 设置文本颜色 */
color: #FFFFFF;

/* 设置背景颜色 */
background-color: #000000;

/* 为元素创建边框 */
border: 1px solid blue;

/* 把字体设为Arial */
font-family: Arial, sans-serif;

/* 设置字体大小 */
font-size: 16px;

/* 设置内边距 */
padding: 32px;

/* 设置外边距 */
margin: 16px;

1.11 简写属性

以下例子通过 3 个属性来为 HTML 元素的背景图片设置样式。

background-color: #000000;
background-image: url("image.jpg");
background-repeat: no-repeat;

可以通过简写属性 background 实现一样的效果(属性值用空格隔开),如下所示。

background: #000000 url("image.jpg") no-repeat;

网格布局和弹性盒布局也同样拥有简写形式。

目录

  • 版权声明
  • 前言
  • 1 属性和属性值
  • 2 伪类选择器
  • 3 盒模型
  • 4 位置
  • 5 字体和文本
  • 6 圆角边框、外边距、阴影、溢出
  • 7 显示
  • 8 元素可见性
  • 9 浮动元素
  • 10 颜色渐变
  • 11 背景图片
  • 12 object-fit
  • 13 边框
  • 14 二维变换
  • 15 三维变换
  • 16 弹性盒布局
  • 17 CSS 网格布局
  • 18 CSS 与太空中的特斯拉
  • 作者简介