CSS学习二：CSS语法

最新推荐文章于 2020-04-11 16:57:19 发布

turing365

最新推荐文章于 2020-04-11 16:57:19 发布

阅读量229

点赞数

分类专栏： CSS web 文章标签： CSS web

本文链接：https://blog.csdn.net/turing365/article/details/80220575

版权

web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

CSS学习二：CSS语法

CSS学习二：CSS语法

1.CSS最基本的层次

从最基本的层次来看，CSS是由两块内容组合而成的：

属性（Propertie）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式，例如：字体，宽度，背景颜色等。
属性值（Value）：每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样，例如，你想把字体，宽度或背景颜色改成什么。

与值配对的属性被称为CSS声明。*CSS声明会被放置在一个*CSS声明块中。最后，CSS声明块与选择器相结合形成一个CSS规则集（或CSS规则）。

一个例子

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

对应的CSS：

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

二者结合达到如下结果：

这里写图片描述

2. CSS语法细节

2.1 CSS声明

给 CSS 属性设置特定的值是 CSS 语言的核心功能。CSS 引擎会通过计算，将对应的 CSS 声明应用到页面的每一个元素上，从而使得元素们以适当的方式布局，并展示出适当的样式。特别需要记住的是，CSS 的属性和属性值都是区分大小写的。属性和属性值之间，用英文半角冒号 (:) 隔离，如下图所示。

这里写图片描述

CSS 有超过300 个不同的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。

注意

如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它。
在 CSS（和其他网络标准）中，使用美式拼写作为单词的标准写法。例如，颜色（见于上述代码所见）应始终拼写为 color。写成 colour会无法正常工作。

2.2 CSS声明块

声明按块分组，每一组声明都用一对大括号包裹，用 ({) 开始，用 (}) 结束。

声明块里的每一个声明必须用半角分号（;）分隔，否则代码会不生效（至少不会按预期结果生效）。声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。

这里写图片描述

注意

块有时候是可以嵌套的。这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。最常见的例子是 @-rules，这是一种用 @ 标识开头的块，例如 @media, @font-face等（详见下述的 CSS 语句）。
声明块的内容允许为空 —— 这完全有效。

2.3 CSS选择器与规则

我们需要讨论一下如何告知我们的声明块：哪些元素是它们需要应用的。通过在每个声明块前加上选择器（selector）来完成这一动作，选择器是一种模式，它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）。
这里写图片描述

选择器可以很复杂 —— 可以制作一个匹配多种元素的规则，这是通过把多个选择器囊括成用逗号分隔的选择器（一组,）来达成；选择器还可以被“链”在一起，例如我要选择所有 class 是 “blah” 的元素, 但是当且仅当它在

元素里、并且仅当鼠标指针悬停在这个元素上的时候。不过随着你在CSS上的经验变的更丰富，事情会变的更清晰。

一个元素可以被多个选择器所匹配，因此，一个给定的属性可能被多个规则设置多次。 CSS 定义了哪个规则比其它规则更具优先级，则更具优先级的规则必定被应用：这被称为层叠算法（cascade algorithm），关于层叠算法的更多内容和运作原理见层叠和继承。

注意

如果链或组中的某个选择器无效，比如使用了未知的伪元素或伪类，整个组的选择器仍然是有效的，除了这个无效的将被忽略的选择器。

3. CSS语句

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种。其它类型如下：

@-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
- @charset 和 @import （元数据）
- @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
- @font-face （描述性信息）
具体语法示例：
```
@import 'custom.css';
```
该@-规则向当前 CSS 导入其它 CSS 文件
嵌套语句

是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
- @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
- @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
- @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
具体语法示例
```
@media (min-width: 801px) {
 body {
   margin: 0 auto;
   width: 800px;
 }
}
```
上述的嵌套语句只有在页面宽度超过801像素时才会应用。

turing365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习二：CSS语法

CSS学习二：CSS语法1.CSS最基本的层次一个例子2. CSS语法细节2.1 CSS声明注意2.2 CSS声明块注意2.3 CSS选择器与规则注意3. CSS语句CSS学习二：CSS语法1.CSS最基本的层次从最基本的层次来看，CSS是由两块内容组合而成的：属性（Propertie）：一些人类可理解的标识符，这些...
复制链接

扫一扫