发表大前端1 小时读完 (大约11954个字)

CSS 基础概览

CSS 构造块

CSS (层叠样式表)是一种文本文件，其中包含一个或多个(通过属性和值)决定网页某特定元素如何显示的规则。CSS 里有控制基本格式的属性(如 font-size 和 color)，有控制布局的属性(如 position 和 float)，还有决定访问者打印时在哪里换页的打印控制 元素。CSS 还有很多控制元素显示或消失的动态属性，可以用于创建下拉列表和其他交互性组件。

CSS2 是目前浏览器支持最为广泛的版本，CSS3 是以CSS2 为基础，提供了大量设计人员和开发人员长期期待的功能，但可惜的是目前还没有成为规范。

构造样式规则

样式表中包含了定义网页外观的规则。

样式表中的每条规则都有两个主要部分 ：选择器和声明块。选择器决定哪些元素受到影响；声明块由一个或多个 属性 - 值

对组成，它们指定应该做什么。

1
2
3
4
5
6
7
8
9
selector {
	property-name:property-value;
				···
}

h1 {
	background-color: green;
	color: red;
}

在样式规则中可以添加额外的空格、制表符或回车，从而提高样式表的可读性 。

​

为样式规则添加注释

在 CSS 中添加注释是个好主意，这样就可以标注样式表的主要区域，或者只是针对某条规则或声明进行解释。注释不仅对开发 人员有用，对阅读代码的其他人也有好处。

注释可以包含回车，因此可以跨越多行。类似地，/* 和 */ 既可以单独成行，也可以跟文本同处一行。另外，注释还可以放到声明块内部，或者样式规则后面。

1
2
3
4
5
6
7
8
9
10
11
/* This is a single line comment */
/*
	···
    This is multi-ling comment
	···
*/
h1 {
    color: green;
    font-size: .875em;
    /* This is a comment in declarations bloc */
}

需要注意的是，不能将一个注释嵌套在另一个注释内部 ，这样的做法是错误的。

注释是很有用的组织工具。样式表很快就会变得很长，因此，组织好样式表对于保持 CSS 易于维护至关重要。通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释 

1
2
3
4
5
6
/* Section-1 */
	···
/* Section-2 */
	···
/* Section-3 */
	···

当然，你也可以注释掉属性值，来进行调试，就像你在其它语言中做的那样。

​

CSS 中的继承

当你为某个元素应用 CSS 属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。也就是说，这些下层的元素继承了其祖先元素的属性。

任何一个直接包含在另一个元素中的元素，都是其父元素的分支。

此外，对大多数属性来说，还可以使用 inherit 值进行强行继承。

那么，哪些属性会被继承呢？

  • 文本
    • color(颜色，a 元素除外) ‰
    • direction(方向)
    • font(字体)
    • font-family(字体系列) ‰
    • font-size(字体大小)
    • font-style(用于设置斜体)
    • font-variant(用于设置小型大写字母) ‰
    • font-weight(用于设置粗体)
    • letter-spacing(字母间距)
    • line-height(行高)
    • text-align(用于设置对齐方式)
    • text-indent(用于设置首行缩进)
    • text-transform(用于修改大小写)
    • visibility(可见性)
    • white-space(用于指定如何处理空格) ‰
    • word-spacing(字间距)
  • 列表
    • list-style(列表样式)
    • list-style-image(用于为列表指定定制的标记) ‰
    • list-style-position(用于确定列表标记的位置) ‰
    • list-style-type(用于设置列表的标记)
  • 表格
    • border-collapse(用于控制表格相邻单元格的边框是否合并为单一边框) ‰
    • border-spacing(用于指定表格边框之间的空隙大小)
    • caption-side(用于设置表格标题的位置)
    • empty-cells(用于设置是否显示表格中的空单元格)
  • 页面设置
    • orphans(用于设置当元素内部发生分页时在页面底部需要保留的最少行数) ‰
    • page-break-inside(用于设置元素内部的分页方式)
    • widows(用于设置当元素内部发生分页时在页面顶部需要保留的最少行数)
  • 其它
    • cursor(鼠标指针)
    • quotes(用于指定引号样式)

层叠：当规则发生冲突时

样式的来源很多，每个浏览器都有其默认的样式，你可以使用自己的样式覆盖它们或对它们进行补充。

有时候，多条规则会定义元素的同一个属性，这是应该怎么办呢？CSS 用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。

首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS 用层叠的原则来考虑特殊性(specificity)、顺序(order)和重要性(importance)，从而判断相互冲突的规则中哪个规则应该起作用。

  • 特殊性

    特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。遇到冲突时，优先应用特殊性强的规则 。

    一般来说，我们任务 id 选择器是最特殊的，而继承的样式是最一般的。

    不过，建议在样式表中多使用类选择器，避免使用 id 选择器。

  • 顺序

    有时候，特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个。在这种情况下，规则的顺序就可以起到决定作用:晚出现的优先级高。

  • 重要性

    如果这还不够，可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声 明的末尾加上 !important，比如 p{ color: orange !important; }(除非是在特殊情况 下，否则不推荐使用这种方法)。

你编写的样式会覆盖浏览器的默认样式。 当两个或两个以上的样式发生冲突时，会应用特殊性高的样式声明，不管它位于样式表中的哪个位置。如果两个或两个以上的规则拥有相同的特殊性，则使用后出现的规则， 除非其中某条规则标记了 !important。

如果某元素没有直接指定某条规则，则使用继承的值(如果有的话)。

​

属性的值

每个 CSS 属性对于它可以接受哪些值都有不同的规定。有的属性只能接受预定义的值。有的属性接受数字、整数、相对值、百分数、 URL 或者颜色。有的属性可以接受多种类型的值。

  1. inherit

    对于任何属性，如果希望显式地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用 inherit 值。

  2. 预定义的值

    大多数 CSS 属性都有一些可供使用的预定义值。例如，float 属性可被设为 left、right 或 none。与 HTML 不同，不需要(也不能)将预定义的值放在引号里。实际上， 大多数 CSS 值，无论是否为预定义的值，都不需要加引号。(也有一些例外，如超过一个单 词的 font-family 名称，以及要生成的内容。)

  3. 长度和百分数

    很多 CSS 属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空 格。例如 3em、10px。唯一的例 外是 0，它可以带单位也可以不带。效果是一样的，因此 0 一般不带单位。

    有的长度是相对于其他值的。一个 em 的长度大约与对应元素的字号相等。一般来说，应该只在输出尺寸已知的情况下使用绝对长度 。

    百分数(如 65%)的工作方式很像 em， 它们都是相对于其他值的值 ，百分数通常是相对于父元素的 。

  4. 纯数字

    只有极少数的 CSS 属性接受不带单位的数字，典型的如 line-height、z-index 和 opacity。

  5. URL

    有的 CSS 属性允许开发人员指定另一个文件的 URL，background-image 就是这样一个属性。

    1
    background: url(bg-patern.png);

    注意，规范指出，相对 URL 应该相对于样式表的位置而不是相对于 HTML 文档的位置。

  6. CSS 颜色

    我们可以使用预定义颜色关键字或以十六进制(通常称为 hex)、RGB、HSL、 RGBA、HSLA 等格式表示的值中为 CSS 属性指定颜色。

    实践中，定义 CSS 颜色更常规的方法是使用十六进制格式或 RGB 格式。如果要指定透明度的话，请使用 RGBA。

  7. RGB

    可以通过指定红、绿、蓝(这也是 RGB 这一名称的由来)的量来构建自己的颜色。 可以使用百分数、0 ~ 255 之间的数字来指定这三种颜色的值。 

    1
    color: rgb(0,0,0);

  8. 十六进制数

    1
    color: #FFFFF;

  9. RGBA

    RGBA 在 RGB 的基础上加了一个代表 alpha 透明度(alpha transparency) 的 A。 alpha 透明度的一种常见使用场景是将其用在对元素设置 background-color 或 background 的情况(均用于设置背景)，因为 alpha 透明度允许元素下面的任何东西(如图像、其他颜色、文本等)透过来并与元素混合在一起。 也可以对其他基于颜色的属性使用 alpha 透明度，如 color、border、border-color、box- shadow、text-shadow 等。 

    1
    2
    3
    4
    5
    6
    /* 不透明，和 rgb(89, 0, 127); 效果相同 */ background-color: rgba(89,0,127,1);
    /* 完全透明 */
    background-color: rgba(89,0,127,0);
    /* 25%透明 */
    background-color: rgba(89,0,127,0.75); /* 60%透明 */
    background-color: rgba(89,0,127,0.4);

操作样式表

将 CSS 应用到多个网页(包括整个网站)、单个页面或单独的 HTML 元素 ，有三种方式：外部样式表、嵌入样式表和内联样式表。外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式，然后让网 站上的每个页面加载这个外部样式表，从而确保每个页面都有相同的设置 。

外部样式表是作为操作样式表的最佳实践。

链接到外部样式表

将已经编写好的样式表加载到 HTML 页面中去，最好的方式是链接到样式表。对外部样式表进行修改时，所有引用它的页面也会自动更新 。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> 
<html lang="en"> 
    <head>
	<meta charset="UTF-8" />
	<title>CSS</title> 
    <link rel="stylesheet" href="css/style.css" />
	</head>
	<body>  
    </body> 
</html>

link 元素位于 HTML 文档的 head 部分。 页面可以包含一个以上的 link 元素，但使用它的次数最好尽可能地少，让页面得以更快地加载 。

外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览引用它的页面时，通常无需再向 Web 服务器请求 该文件。浏览器会将它保存到缓存里，也就是保存到用户的计算机里，并使用这个版本的文件。这样做可以加快对页面的加载。如果随后对样式表作了修改，再将它传到 Web 服务器，浏览器就会下载更新后的文件，而不是使用缓存的文件(从技术上讲也有例外，但通常不会遇到这种情况)。

可以在页面中使用多个 link 元素， 从而加载多个样式表文件。如果在不同的文件中有显示声明产生冲突，则后面文件中的规则的优先级更高。

​

嵌入式样式表

嵌入样式表是在页面中应用 CSS 的第二种方式。我们在 HTML 页面的 head 部分创建一个 style 元素，其中包含了我们的样式表。由于这些样式只在一个网页里存在，因此不会像外部样式表中的规则那样应用到其他的页面，同时，缓存的好处也不存在了。如上文所述，对于大多数情况， 我们推荐使用外部样式表，但理解其他的选择以备不时之需也是很重要的。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html> 
<html lang="en"> 
    <head>
	<meta charset="UTF-8" />
	<title>CSS</title> 
    <style>
        img {
            border: 4px solid red;
        }
    </style>
	</head>
	<body>  
    </body> 
</html>

使用嵌入样式表时，style 元素及其包围的样式规则通常位于文档的 head 部分。

当且仅当 style 元素出现在 link 元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式。

​

应用内联样式

内联样式将内容和变现会在一起，严重违背了最佳规范。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> 
<html lang="en"> 
    <head>
	<meta charset="UTF-8" />
	<title>CSS</title> 
	</head>
	<body>  
        <img src="imgs/market.png" width="20" height="20" alt="" style="border: 4px solid red" />1
    </body> 
</html>

更好的做法是通过类名来应用外部样式表中的规则。如果你希望其它元素也是用这种样式，只需为其添加 class=”class-name” 即可。

内联样式的优先级高于其它所有样式，除非其它地方与之冲突的样式标记了 !important。

​

样式的层叠和顺序

将多个样式规则应用于同一元素的情况并不少见，大型网站更是如此，他们需要更多精力维护 CSS。有时候这些规则针对的是 同一条属性。在规则的特殊性相同的情况下，样式的顺序就成为关键。基本规则是:在其他条件相同的情况下， 越晚出现的样式优先级越高 。

以下解释了顺序如何决定样式规则的优先级：

  • 嵌入样式表（位于 style 元素内）与任何链接的外部样式表之间的关系取决于它们在 HTML 中的相对位置。
  • 内联样式(实际上直接应用于元素) 在外部样式表和嵌入样式表之后。由于顺序最靠后，其优先级是最高的。 一旦应用到任何地方，都会覆盖与之冲突的其他样式。
  • 关于相互冲突的样式的顺序对优先级的影响，有一种例外情况，就是标记 !important 的样式总是具有最高的优先级，无论它出现在最前、最后，还是中间。不过，要尽量避免这种用法，极端情况除外。几乎在全部情况下，使用选择器都能达到同样的效果。此外，!important 让声明变得太强，如果要覆盖这样的样式，就不得不借助于更长的规则。

有一种使用 !important 的合理情形。 有时网页会包含一些你无法修改的 HTML， 例如来自第三方服务的新闻源。如果这些 HTML 中有一些内联样式与你的设计不符， 你就可以在自己的样式表中使用 !important 覆盖这些样式。

​

使用与媒体相关的样式表

可以指定一个只用于特定输出的样式表， 如只用于打印，或只用于在浏览器中查看屏幕。 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html> 
<html lang="en"> 
    <head>
	<meta charset="UTF-8" />
	<title>CSS</title> 
    <link rel="stylesheet" href="css/style.css" media="screen" />
    <link rel="stylesheet" href="css/print.css" media="print" />
	</head>
	<body>  
    </body> 
</html>

通过对 link 元素添加 media 属性，可 以将样式表限于特定输出。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 针对所有样式 */
img {
    border: 4px solid red;
}
p {
    color: orange;
    font-style: italic;
}

/* 打印样式表 */
@media print {
    body {
		/* 加大字号 */ 
        font-size: 25pt;
	}
	p{
		/* 黑色的十六进制值 */ 
        color: #000;
	}
	img {
		/* 不显示图像 */ 
        display: none;
	}
}

联合使用 CSS3 引入的媒体查询和这里介绍的媒体输出类型可以形成强大的威力。 通过这些技术，可以根据输出设备的属性确 定需要应用到页面的样式。

​

定义选择器

CSS 样式规则有两个主要部分。选择器决定将格式化应用到哪些元素，而声明则定义要应用的格式化。

构造选择器

选择器可以定义五个不同的标准来选择要进行格式化的元素。

  • 元素的类型和名称

    1
    2
    3
    h1 {
        color: red;
    }

  • 元素所在的上下文

    1
    2
    3
    4
    /* em 为元素名称，这个选择器只应用于 h1 元素中的 em 元素*/
    h1 em {
        color: red;
    }

  • 元素的类或 id

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 选择所有属于 error 类的元素 */
    .error {
        color: red;
    }

    /* 选择 id 为 gaudi 的元素 */
    #gaudi {
        color: red;
    }

    通过在 class 或 id 选择器前面添加目标元素的名称，可以增强选择器的特殊性。

    1
    2
    3
    4
    /* 选择属于 error 的 strong 元素 */
    strong.error {
        color: red;
    }

    如果要定位的元素有多个类名，可以在选择器中将它们连在一起。

  • 元素的伪类或伪元素

    1
    2
    3
    4
    /* 选择属于 link 伪类的 a 元素 */
    a:link {
        color: red;
    }

  • 元素是否有某些属性的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 选择所有 title 属性的 a 元素 */
    a[title] {
        color: red;
    }

    /* 选择指向维基百科的 a 元素 */
    a[href="https://www.wikipedia.ort"] {
        color: red;
    }

编写 CSS 的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器(如类名)，从而可以在全站不同的元素上共享该样式。

​

按照名称选择元素

选择要格式化的元素，最常用的就是按照元素的名称进行选择。比如 ：

1
2
3
h1 {
    color: red;
}

除非指定其它情况，指定类型的所有元素都将被格式化，无论它们出现在文档的什么位置。

通配符 * 匹配代码中的任何元素名称。但是因为匹配范围太广，一般不建议使用，因为这会使得浏览器加载页面变慢。

可以在一个选择器中使用一组元素名称，名称之间用逗号分隔。

1
2
3
h1,h2,h3 {
    color: red;
}

​

按类或 ID 选择元素

如果已经在元素中标识了 class 或 id ，就可以在选择器中使用这个标准，从而只对已标识的元素进行格式化。

可以单独用使用 class 和 id，也可以同其它选择器标准混在一起使用，比如

1
2
3
4
5
6
7
8
// 会影响所有属于 news 类的元素
.news {
    color: red;
}
// 只会影响属于 news 类的 h1 元素
h1.news {
    color: red;
}

除非必须特别针对目标元素，否则不要在 id 或 class 选择器中添加元素名称。

如果要定位的类名有多个，可以在选择器中将它们连在一起

1
2
3
.class-news.class-video {
    color: blue;
}

这里需要主要的是，任何 .class-news 和 .class-video 选择器的规则仍会应用于该元素，但是 .class-news.class-video 的规则的特殊性更高。

​

按上下文选择元素

在 CSS 中，可以根据元素的祖先、父元素或同胞元素来定位它们。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 组合使用了类选择器和类型选择器
// 这将作用于任何作为 class-news 类元素的后代的 p 元素
.class-news p {
    color: red;
}
// 作用于所有以 article 元素为祖先的 p 元素
article p {
    color: red;
}
// 作用于以属于 class-news 类的 article 元素为祖先的任何 p 元素
// 这种类型的选择器的特殊性最高，通常会比实际需要的特殊性更高
article.class-news p {
    color: red;
}

祖先元素是包含目标元素的任何元素，不管它们之间相隔多少代，而父元素是直接包含另一个元素的元素，它们之间只隔一代。

通常将基于祖先元素的选择器成为后代选择器，不过 CSS 3 中将其称为后代结合符。

按照祖先元素选择要格式化的元素

1
2
3
element-ancestor element-target {
    ···
}

按照父元素选择要格式化的元素

1
2
3
element-father > element-target {
    ···
}

按照相邻同胞元素选择要格式化的元素

CSS 相邻同胞结合符可以选择直接跟在指定的同胞元素后面的同胞元素。

1
2
3
.class-news p+p {
    ···
}

​

选择第一个或最后一个子元素

有时候需要选择仅作为某元素第一个或最后一个子元素的元素，这时候就要用到 :first-child 和 :last-child 伪类。

1
2
3
4
5
6
7
8
9
10
11
12
// 选择子元素中的第一个 li 元素
li:first-child {
    color: red;
}
// 选择子元素中的最后一个 li 元素
li:last-child {
    color: red;
}
// 选择任何作为另一个元素的第一个子元素
:first-child {
    color: red;
}

在伪类之前添加其它选择器可以使其特殊性更高

1
2
3
4
// 仅对 class-news 类的第一个 h1 子元素起作用
.class-news h1:first-child {
    color: red;
}

​

选择元素的第一个字母或第一行

使用 :first-letter 和 :first-line 伪元素只选择元素的第一个字母或第一行。

1
2
3
4
5
6
7
8
9
10
// 选择 p 元素的第一个字母
p:first-letter {
    color: red;
    font-size: 1.4em;
    font-weight: bold;
}
// 选择 p 元素的第一行
p:first-line {
    color: red;
}

可以将 :first-letter 和 :first-line 伪元素与其它选择器结合使用

1
2
3
4
// 作用于 class-news 类中每个段落的第一个字母
.class-news p:first-letter {
    color: red;
}

需要注意的是，只有某些特定的 CSS 属性可以应用于 :first-letter 伪元素，包括 font、color、background、text-decoration、vertical-algin、text-transform、line-height、margin、padding、border、float 和 clear。

伪元素、伪类及 CSS 3 语法

在 CSS 3 中

1
2
:first-line -> ::first-line
:first-letter -> ::first-letter

这样是为了将伪类和伪元素进行区分。

​

按照状态选择链接元素

CSS 允许根据链接的当前状态对其进行格式化。

链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 从未被激活或指向，当前也没有被激活或指向的链接
a:link {
    color: red;
}

// 已激活过的链接
a:visited {
    color: orange;
}

// 通过键盘选择并已准备好激活的
a:focus {
    color: purple;
}

// 光标指向连接时
a:hover {
    color: green;
}

// 激活的链接
a:active {
    color: blue;
}

也可以对其它类型的元素使用 :active 和 :hover 伪类

1
2
3
4
// 鼠标停留在任何段落上都会使其显示红色
p:hover {
    color: red;
}

​

按照属性选择元素

可以对具有给定属性或属性值的元素进行格式化。

CSS 提供了多种方式匹配属性和属性值，包括只检查属性名、检查全部或者部分属性值。如果在选择器中呼略了属性值，就可以为具有给定属性的元素应用样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
element[attribute]			// 匹配指定属性，无论属性值是什么
	   [attribute="value"]  // 完全匹配指定属性值
	   [attribute~="value"] // 匹配属性值以空格分隔的多个单词，其中有一个完全匹配指定值
       [attribute|="value"] // 匹配以 value- 打头的属性值
	   [attribute^="value"] // 匹配以 value 开头的属性值，value 为完整的单词或完整的单词的一部分
       [attribute$="value"] // 匹配属性值以 value 结尾，value 为完整的单词或完整的单词的一部分
	   [attribute*="value"] // 属性值为指定值的子字符串


// 选择所有具有 class 属性的段落
p[class] {
    color: red;
}

​

指定元素组

我们经常需要将相同的样式规则应用于多个元素。可以为每个元素重复地设置样式规则，也可以组合选择器，一次性地设置样式规则。

1
2
3
4
5
6
element-1,
element-2,
  ···
element-n {
    ···
}

可以列出任意数量的单独的选择器，无论它们包含的是元素名称、类还是伪元素，只需用逗号将它们隔开。

通过元素组添加样式只是一种简写方式。

有时，为应用于多个选择器的共同样式创建一个样式规则，再为没有共同点的样式分别创建单独的样式规则是很有用的。要记住，在样式表中后指定的规则会覆盖先指定的规则。

​

为文本添加样式

使用 CSS 可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式、添加下划线和删除线等。

选择字体系列

并非所有的系统都支持相同的默认字体，因此应该定义替代字体作为备选。

设置字体的方法

1
2
3
4
5
6
7
body {
    font-family: Geneva;
}

h1，h2 {
    font-family: "Gill Sans";
}

由于 font-family 是继承属性，当我们对 body 元素设置了字体以后，该样式也会应用到其它元素。但是有几个元素不会继承父元素的字体设置，其中有表单的 select、textarea 和 input 元素。不过，可以强制它们继承父元素的字体。

1
2
3
input, select, textarea {
    font-family: inherit;
}

指定替代字体

为了使得文本以你想要呈现的字体来展示，你需要设置替代字体以防止在某些系统上没有安装你指定的字体的情况。

1
2
3
4
5
6
7
8
9
// 浏览器会使用列表中的第一个已安装在访问者系统内的字体
body {
    font-family: Geneva, Tahoma, sans-serif;
}

h1,
h2 {
    font-family: "Gill Sans","Gill Sans MT";
}

OS X 和 Windows 上默认的共有的字体 它们仅包括 Arial、Comic、Sans MS、Courier New、Georgia、Impact、Trebuchet MS、Times New Roman 和 Verdana。

系统通常都有下列表示类属的字体名称对应的字体：serif、sans-serif、cursive、fantasy 和 monospace。因此，标准的做法就是字体栈的末尾指定上述字体名称中的一种。

可以在同一个 font-family 规则中为不同的字母表指定字体，从而对包含不同怨言和书写体系的文本进行格式化。

​

创建斜体

浏览器通常让一些 HTML 元素默认以斜体显示，因此，不比在 CSS 中对这些元素设置斜体。有时，你需要让一些内容以斜体显示，但是用元素却没有合适的语义，这时，使用 CSS 的 font-style 属性就可以让任何元素中的文本以斜体显示。

1
2
3
p {
    font-style: italic;
}

因为 font-style 属性是继承的，如果你想要在某些地方不以斜体显示，则可以取消斜体

1
font-style: normal;

​

创建粗体

粗体格式可能是让文本突出显示的最常见、最有效的方式。

1
2
3
4
em,
a:link {
    font-weight: bold;
}

设置 font-weight 属性的值为 bold，让文本显示为有平均加粗值的字体，或者输入 100 ~ 900 之间的 100 的倍数，其中 400 代表正常粗细，700 代表粗体。

设置 font-weight 为 normal 来取消粗体。

​

设置字体大小

为网页里的文本设置字体大小有两种方式：直接使用像素指定要使用的特定字号或使用百分数、em、rem 指定相对于父元素文本的大小。

1
2
3
4
5
6
7
h1 {
    font-size: 35px;
}

h2 {
    font-size: 28px;
}

使用 em 这样的相对单位有更大的灵活性，而且对定义页面中特定的设计部件的尺寸很有帮助。

1
2
3
4
5
6
7
8
9
10
11
12
// body 中设置的 font-size：100% 声明为 em 字体大小设置了参考的基准。这里的 100% 将被翻译为默认字体大小
body {
    font-size: 100%; /* 16px */
}

h1 {
    font-size: 2.1875em; /* 35px/16px */
}

h2 {
    font-size: 1.75em; /* 28px/16px */
}

使用 rem 设置字体大小

CSS 3 引入了一些新的单位，其中很有意思的一个便是 rem。它同 em 很像，不过它总是以根元素为参照系设置其它元素的字体大小，而不是父元素。这样做字体大小的设置。

​

设置行高

行高指的是段落的行距，即段落内诶航之间的距离。

1
2
3
class-news {
    line-height: 1.5;
}

如果使用数字设定行高，那么所有的子元素都会继承这个因子。因此，如果父元素的字体大小是 16 像素或以 em 表示的等价大小，行高是 1.5 的话，则该元素的行高就是 24 像素。

​

同时设置所有字体值

可以使用 font 简写属性同时设置字体样式，但是需要注意的是 font 简写属性至少应该包括字体系列和字体大小属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
    font: 100% Geneva, Tahoma, Verdana, sans-serif;
}

h1,
h2 {
    /* 这些声明无法使用 font 简记法，除非同时声明字体大小 */
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: bold;
}

.class-news p {
    /* 这些声明无法使用 font 简记法，除非同时声明字体大小 */
    font-size: .9375em;
    ling-height: 1.65;
}

​

设置颜色

1
2
3
4
5
6
7
body {
    color: blue;
}

h2 {
    color: #000;
}

除了 link 元素，其它元素都会继承 body 元素中的 color 属性，你必须显示设置 link 元素的 color 属性。

​

设置背景

设置背景有很多属性可以利用，包括 background-color、background-image、background-repeat、background-attachment 及 background-position 等。

1
2
3
4
5
6
7
8
9
10
11
12
body {
    background-color: #88b2d2;
}

h2 {
    background-color: #eaebef;
}
// 使用背景图像作为背景
h3 {
    background-image: url(bg-pattern.png);
    background-repeat: repeat-x;
}

background-color 的默认值是 transparent，background-image 的默认值是 none，background-repeat 的默认值是 repeat，background-attachment 的默认值是 scroll，background-position 的默认值时 0 0。只有在需要覆盖其它样式规则的时候才会显示的指定默认值。

​

控制间距

可以增加或减少单词之间或字母之间的距离，前者成为字间距，后者称为字偶距。

1
2
3
4
5
// word-spacing 和 letter-spacing 是继承的
body {
    letter-spacing: 1px;
    word-spacing: 2px;
}

单词间距和字母间距还可能受到所选对齐方式的和字体系列的影响。

要将字母间距和单词间距设置为默认值，可使用 normal 或 0 。

​

添加缩进

通过设置 text-indent 属性，可以指定段落第一行前面应该空出多大的空间。

1
2
3
p {
    text-indent: 2em;
}

其实我们也可以为其它元素应用 text-indent 属性，而不仅是段落元素，不过默认情况下对 em、strong、cite 等内联元素没有效果。可以将它们设置为 display：block；或 display: inline-block; 为其添加 text-indent 属性。

​

对齐文本

根据需要，可以让文本左对齐、右对齐、居中对齐或两端对齐。

1
2
3
p {
    text-align: left; // right/center/
}

修改文本的大小写

使用 text-transform 属性，可以为样式定义文本的大小写。通过这种方法，可以将文本显示为首字母大写、全部大写、全部小写或原样显示。

1
2
3
4
5
6
{
    text-transform: uppercase;   // 让所有字母大写
    text-transform：capitalize; 	// 让每个单词的首字母大写
    text-transform：lowercase; 	// 让所有字母小写
    text-transform：none; 		// 让文本保持原来的样子或用来取消继承的值
}

使用小型大写字母

很多字体都有对应的小型大写字母变体， 其中一些字母是大写的，但缩小到了小写字母的大小。可以使用 font-variant 调用小型大写字母变体 。

1
2
3
h2 {
    font-variant: small-caps;
}

装饰文本

可以使用 text-decoration 属性装饰文本，如添加下划线或者其他类型的线条。目前最常用到这个属性的情况是为链接状态添加 样式 。

1
2
3
4
5
6
7
a:link {
    color: #e1000;
    text-decoration: none; 			//	无装饰样式 
    text-decoration: underline; 	//  下划线
    text-decoration: overline; 		//  上划线
    text-decoration: line-through;  //  删除线
}

设置空白属性

默认情况下，HTML 文档里的多个空格和回车会显示为一个空格，或者被忽略。 如果要让浏览器显示这些额外的空格，可以使 用 white-space 属性 ：

1
2
3
4
5
body {
    white-space: nowarp;	// 确保所有空格不断行，也就是文本全部显示在一行
    white-space: pre;		// 显示原文本中的所有空格和回车
    white-space: normal;	// 按正常方式处理空格
}

​

用CSS进行布局

使用 CSS 进行布局的注意事项

  • 内容与显示分离

  • 布局方法

    • 固定布局，真个页面和每一栏都有基于像素的宽度
    • 响应式页面也称为流式页面，使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。

  • 浏览器注意事项

    并非所有的访问者都是用同样的浏览器，同样的操作系统，甚至同样的设备访问你的网站，因此通常在将网站放到服务器上发布之前，尽量在不同的操作系统用不同的浏览器进行充分的测试。

对默认的样式进行重置或标准化

每个浏览器都有内置的默认样式表，HTML 会遵照该样式显示，除非你自己编写的 CSS 覆盖了它们。整体上，不同浏览器提供的默认样式是相似的，但也存在一定的差异，为此，在应用自己的 CSS 之前，应抹平这些差异。

抹平差异的方法主要有两种 ：

  • 使用 CSS 重置开始主样式表
  • 使用 Nicolas Gallagher 和 Jonathan Neal 创建的 normalizes.css 开始主样式表

CSS 重置可以有效地将所有默认样式都设为 ‘零’，而第二种方法，即 normalize.css，则采用了不同的方式，它并非对所有样式进行充值，而是对默认样式进行微调，是它们在不同的浏览器中具有相似的外观。

盒模型

CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区 域周围的空间(内边距，padding)、内边距的外边缘(边框，border)和边框外面将元素与相邻元素隔开的不可见区域(外边距，margin)构成 。

宽度、高度和盒模型

关于 CSS 的 Width 属性对元素所显示宽度的影响，默认的处理方式实际上有悖常理。浏览器中元素的宽度与其 width 属性并不一致。CSS 中的宽度指示的是内边距里内容区域的宽度，而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似，只不过计算的是上下内边距和边框值。

通过对元素设置 box-sizing: border-box ，可以使元素的显示宽度就等于 width 属性的值。

控制元素的显示类型和可见性

每个元素在默认情况下要门显示在单独的行要么显示在行内，造成这种原因的本质是它们的 display 属性，即块级元素被设置为 display：block（对于 li 元素为 display：list-item，而行内元素被设置为 display：inline）。

不过，可以使用 CSS 改变元素的默认显示类型。

指定元素的显示方式 ：

1
2
3
4
5
6
{
    display: block;			// 让元素显示为块级元素，就像开始新的段落
		display: inline;		// 让元素显示为行内元素
    display: inline-block;	// 让元素显示为行内元素，同时具有块级元素的特征
    display: none;			// 隐藏元素
}

控制元素的可见性 ：

使用 visibility 属性可以控制元素是否可见。与 display 不同的是，使用 visibility 隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。

1
2
3
em {
    visibility: hidden;
}

设置为 display：none；或 visibility：hidden；的元素里的所有内容，包括后代都会受到影响。

设置元素的高度和宽度

可以为很多元素设置高度和宽度，如分块内容、段落、列表项、div、图像、video、 表单元素等。

同时，可以为短语内容元素(默认以行内方式显示)设置 display: block; 或 display: inline-block;，再对它们设置宽度 或高度。

1
2
3
4
em {
    width: w;	// w 是元素内容区域的宽度，可以表示为长度或父元素的百分数
    height: h;  // h 是元素内容区域的高度，只能表示为长度
}

需要注意的是，内边距、边框和外边距都不包含在宽度或高度的数值里。

可以使用 * 通配符对所有元素应用 border-box 规则

1
2
3
4
5
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

百分数是相对于父元素的宽度的，而不是相对于元素本身的原始宽度的。

如果不显式设置宽度和高度，浏览器就会使用 auto。对于大多数默认显示为块级元素的元素，width 的 auto 值是由包含块的宽度减去元素的内边距、边框和外边距计算出来的。简单说来， 包含块的宽度指的是父元素给元素留出的宽度。

对于图像这样的元素，auto 宽度等于它们固有的宽度，即外部文件实际尺寸大小。

除非你确定元素的内容不会变的更高，最好避免在样式表中指定高度。大多数情况下，可以让内容和浏览器自动控制高度。

在元素周围添加内边距

内边距就是元素内容周围、 边框以内的空间。 可以改变内边距的厚度，不能改变它的颜色或纹理。

1
2
3
4
.about {
    background-color: #2b2b2b;
    padding: .3125em .625em .625em;
}

同 border 和 margin 属性一样，padding 也可以使用简计法：

1
2
3
padding: 5px;		// 应用于全部四个边距
padding: 5px 10px;	// 前一个应用于上下两边，后一个应用于左右两边
padding: 5px 10px 15px;	// 分别应用于 上边 左右两边 下边

默认的情况下，元素的 width 和 height 不包含 padding 的大小，并且，内边距是不继承的。

当 em 值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。

设置边框

可以在元素周围创建边框，或针对元素的某一边设置边框，并设置它的厚度、风格和颜色。边框可以应用于任何元素，包括图像。 如果希望对一个以上的元素设置相同的边框样式， 最好引入一个类，从而可以复用 。

1
2
3
.em {
    border-top: 5px solid #019443;
}

定义边框的风格 ：

1
2
3
4
5
6
7
8
9
border-style: none;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

定义边框宽度和颜色 ：

1
2
border-width: n;
border-color: color;

border 简写属性及各个边框属性 (border-width、border-style 和 border- color)均可接受一至四个值。如果使用一个值，那么它会应用于全部四个边。如果使用两个值，那么前一个值会应用于上下两边， 后一个值会应用于左右两边。如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。 如果使用四个值，那么它们会按照时钟顺序， 依次应用于上、右、下、左四个边。

设置元素周围的外边距

外边距是元素与相邻元素之间的透明空间。

1
2
3
em {
    margin: 1.25em 0 .8em;
}

如果元素位于另一个元素的上面，对 于相互接触的两个 margin(即元素相互接触的下外边距和上外边距)，仅使用其中较大的一个，另一个外边距会被叠加。左右外边 距不叠加。

使元素浮动

可以通过 float 属性使得元素浮动在文本或其它元素上。可以使用这种技术让文本环绕在图像或者其它元素周围，也可以使用这种技术创建多栏布局。

1
2
3
4
5
{
    float: left;	// 让元素浮动在左边，其它内容环绕在它右边
    float: right;	// 让元素浮动在右边，其它内容环绕在它左边
    float: none;	// 让元素不浮动
}

需要注意的是，float 属性是不继承的。

控制元素浮动的位置

1
2
3
4
5
6
{
    clear: left;
    clear: right;
    clear: both;
    clear: none;
}

使用 clear 属性清除浮动效果。如果对某个元素使用该属性，该元素和它后面的元素就会显示在浮动元素的下面。应该将 clear 属性添加到不希望环绕浮动对象的元素上。

浮动元素的 display 属性会变成 display: block; ，哪怕将其设置为 display: inline;，该属性值依然为 block。

浮动元素并不影响父元素的高度。如果要让浮动元素的祖先元素在高度上包含浮动元素，并消除浮动，可以使用 clearfix 或 overflow 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

对元素进行相对定位

每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。

1
2
3
4
5
6
7
{
    position: relative;
  	top: 16px;
    right: 1em;
    bottom: 16px;
    left: 1em;
}

其它元素不会受到便宜的影响，仍然按照这个元素原来的盒子进行排列。设置了相对定位的内容可能与其它内容重叠。

使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用 z-index 属性指定它们的叠放次序。

对元素设置 position: static，可以覆盖 position: relative 设置。static 是元素的默认值，这就是元素出现在常规文档流中的原因。

而且定位是不继承的。

对元素进行绝对定位

正如前面提到的，网页中的元素通常按照它们在 HTML 源代码中出现的次序进行排列，除非你使用 CSS 规则改变前面的样式。而通过对元素进行绝对定位，即指定它们相对于 body 或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流。这与相对定位不同，绝对定位的元素不会在原先的位置留下空白。这与让元素浮动也不同。对于绝对定位的元素，其他元素不 会环绕在它的周围。事实上，其他内容不知道它的存在，它也不知道其他内容的存在。

1
2
3
4
5
{
    position: absolute;
    top: 32px;
    right: 2em;
}

由于绝对定位的元素脱离了文档流， 因此它们可能会相互重叠，或与其他元素重叠 。如果不为绝对定位的元素指定偏移量，这个元素将显示在它的自然位置上，但不会影响后续元素在文档流中的位置。

还有一种定位类型称为固定定位。 当访问者滚动浏览器窗口时，页面内容通常随之上下移动。如果对元素设置 position: fixed;，它就会固定在浏览器窗口中。当访问者上下滚动浏览器窗口时，该元素不会随之移动，页面的其余部分仍照常滚动。

在栈中定位元素

当你开始使用相对定位、绝对定位和固定定位以后，很可能发现元素相互重叠的情况，这时可以选择哪些元素应该出现在顶层。

1
2
3
{
    z-index: 100;	// z-index 的值越大，元素在堆中就越高。
}

注意，z-index 属性仅对定位过的元素有效且是不继承的。

处理溢出

当元素溢出盒子时，可以使用 overflow 属性控制元素在盒子外面的部分。

1
2
3
4
5
6
{
    overflow: visible;	// 让元素盒子中的所有内容可见，默认项
    overflow: hidden;	// 隐藏盒子容纳不了的内容
    overflow: scroll;	// 无论元素是否需要，都在元素上添加滚动条
    overflow: auto;		// 让滚动条仅在访问者访问溢出内容时出现
}

垂直对齐元素

可以使用除默认对齐方式以外的多种方式对齐元素，让它们在页面上显得较为整齐 。

1
2
3
4
5
6
7
8
9
10
{
    vertical-algin: baseline;	// 使元素的基准线对齐父元素的基准线
	vertical-algin: middle;		// 使元素位于父元素的中央
	vertical-algin: sub;		// 使元素成为父元素的下标
    vertical-algin: super;		// 使元素成为父元素的上标
    vertical-algin: text-top;	// 使元素的顶部对齐父元素的顶部
    vertical-algin: text-bottom;// 使元素的底部对齐父元素的底部
    vertical-algin: top;		// 使元素的顶部对齐当前行里最高元素的顶部
    vertical-algin: bottom;		// 使元素的顶部对齐当前行里最低元素的底部
}

修改鼠标指针

一般情况下，由浏览器负责控制鼠标指针的形状。

1
2
3
4
5
6
7
8
9
10
11
12
{
    cursor: pointer;
    cursor: default;
    cursor: crosshair;
    cursor: move;
    cursor: wait;
    cursor: help;
    cursor: text;
    cursor: progress;
    cursor: auto;
    cursor: e-resize;
}

CSS 基础概览

https://cocoalei.github.io/blogs/2016/02/25/css-summary/

作者

Y2hlbmdsZWk=

发布于

2016-02-25

更新于

2021-09-01

许可协议

归档

目录

分类

最新文章

标签

Git1
GoLang3
JavaScript12
Web3
×