WEBGIS开发教程

Appearance

章节导航

定义

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

1. 了解css ​

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

css
p {
  color: red;
}

不妨试一下：首先新建一个 styles 文件夹，在其中新建一个 style.css 文件，将这三行 CSS 保存在这个新文件中。

然后再将该 CSS 文件连接至 HTML 文档，否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。

打开 index.html 文件，然后将下面一行粘贴到文档头（也就是 <head> 和 </head> 标签之间）。

html
<link href="styles/style.css" rel="stylesheet">

2. 规则集详解 ​

让我们来仔细看一看上述 CSS： css-declaration-small 整个结构称为 规则集（通常简称“规则”），各部分释义如下：

  • 选择器（Selector） HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

  • 声明（Declaration） 一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

  • 属性（Properties） 改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

  • 属性的值（Property value） 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

  • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

3. 选择器 ​

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称选择的内容示例
元素选择器（也称作标签或类型选择器）所有指定 (该) 类型的 HTML 元素p 选择 <p>
ID 选择器具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器具有特定类的元素（单一页面中，一个类可以有多个实例）.my-class 选择 <p class="my-class"> 和 <a class="my-class">
属性选择器拥有特定属性的元素img[src] 选择 <img src="myimage.png"> 而不是 <img>
伪（Pseudo）类选择器特定状态下的特定元素（比如鼠标指针悬停）a:hover 仅在鼠标指针悬停在链接上时选择 <a>。

4. 盒子模型 ​

编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

  • padding：即内边距，围绕着内容（比如段落）的空间。
  • border：即边框，紧接着内边距的线。
  • margin：即外边距，围绕元素外部的空间。

box-model

5. BFC ​

5.1 定义 ​

BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

5.2 触发条件 ​

  • 浮动元素（元素的float不是 none，指定float为left或者right就可以创建BFC）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • display:inline-block，display:table-cell，display:flex，display:inline-flex
  • overflow指定除了visible的值

5.3 特点 ​

  • 在BFC中，块级元素从顶端开始垂直地一个接一个的排列。（当然了，即便不在BFC里块级元素也会垂直排列）
  • 如果两个块级元素属于同一个BFC，它们的上下margin会重叠（或者说折叠），以较大的为准。但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。
  • BFC的区域不会与浮动的元素区域重叠，也就是说不会与浮动盒子产生交集，而是紧贴浮动边缘。
  • 计算BFC的高度时，浮动元素也参与计算。BFC可以包含浮动元素。（利用这个特性可以清除浮动）
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

5.4 有什么用 ​

  • 解决外边距折叠问题
  • 制作两栏布局
  • 清除元素内部的浮动

6. 预处理器 ​

  • sass
  • less
  • stylus

Copyright © 2023 LZUGIS