Whirlwind Tour of CSS

Table of Contents

1 CSS简介

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

CSS的中文可称为:层叠样式表,或者级联样式表。

Home page: http://www.w3.org/Style/CSS/
CSS Specifications: http://www.w3.org/Style/CSS/specs
CSS Level 2 Revision 1 (CSS 2.1) Specification: http://www.w3.org/TR/CSS21/
CSS简明教程:http://www.w3school.com.cn/css/index.asp

2 CSS基本语法

CSS由选择器和声明(用花括号包围)组成,其基本语法如下所示:

css_selector.gif

Figure 1: CSS basic syntax

多个声明之间用分号分开,选择器也可以指定多个,用逗号分开即可。如:

h1, h2 {
   color: red;
}

CSS中的注释用 /**/ 包围。
CSS大小写不敏感。

2.1 CSS出现位置

CSS样式可以出现在单个HTML元素中,出现在HTML文件的<head>标记中,出现在外部的CSS文件中。

出现在单个HTML元素中,如:

<p style="color: red"> this is red </p>

出现在HTML文件的<head>标记中,如:

<head>
<style type="text/css">
 .font40 { font-size: 40px; }
</style>
</head>

出现在外部的CSS文件中,如:

<head>
<link rel="stylesheet" type="text/css" href="external.css" />
</head>

3 CSS选择器

选择器决定了其后面的规则应用于哪些内容上。

3.1 CSS元素选择器实例

可直接对html中的元素进行选择。

<style type="text/css">
  html {color:black;}
  h1 {color:blue;}
  h2 {color:silver;}
</style>

3.2 CSS ID选择器实例(井号)

html中的id用来唯一标记一个元素,一个页面中只能出现一次。常用来标记页面中唯一的内容,如main navigation,footer等。

<p id="intro"> This is a paragraph of introduction. </p>

ID选择器以‘#’号开头,如:

<style type="text/css">
  #intro {font-weight:bold;}  /* 相当于 *#intro {font-weight:bold;}  */
</style>

3.3 CSS类选择器实例(点号)

html中的类用来标记一类元素,常出现多次。

<p class="important"> This paragraph is very important. </p>
<p class="important"> This paragraph is also very important. </p>

类选择器以‘.’号开头,如:

<style type="text/css">
  .important {color:red;}  /* 相当于 *.important {color:red;}  */
</style>

3.4 CSS 2.1选择器

Table 1: CSS 2.1 selector syntax
Pattern Meaning Described in section
* Matches any element. Universal selector
E Matches any E element (i.e., an element of type E). Type selectors
E F Matches any F element that is a descendant of an E element. Descendant selectors
E > F Matches any F element that is a child of an element E. Child selectors
E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class
E:link, E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active, E:hover, E:focus Matches E during certain user actions. The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class
E + F Matches any F element immediately preceded by a sibling element E. Adjacent selectors
E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selectors
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors
E[lang \vert="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors
DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].) Class selectors
E#myid Matches any E element with ID equal to "myid". ID selectors

参考:http://www.w3.org/TR/CSS21/selector.html#pattern-matching

4 CSS常用属性

4.1 CSS背景属性

CSS背景属性如表 2 所示。

Table 2: CSS背景属性
属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

4.2 CSS文本属性

CSS文本属性如表 3 所示。

Table 3: CSS文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

4.3 CSS字体属性

CSS字体属性如表 4 所示。

Table 4: CSS字体属性
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

4.4 CSS列表属性

CSS列表属性如表 5 所示。

Table 5: CSS列表属性
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

4.5 CSS表格属性

CSS表格属性如表 6 所示。

Table 6: CSS表格属性
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

4.6 CSS大纲属性

CSS大纲属性如表 7 所示。

Table 7: CSS大纲属性
属性 描述
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

4.7 CSS定位属性

CSS定位属性如表 8 所示。

Table 8: CSS定位属性
属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
display 定义建立布局时元素生成的显示框类型。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

利用相对定位的实例:

<html>
<head>
<style type="text/css">
h4.pos_left {
position: relative;
left: -10px;
}
h4.pos_right {
position: relative;
left: 10px;
}
</style>
</head>

<body>
<h4>正常位置的标题</h4>
<h4 class="pos_left">这个标题相对正常位置靠左10px</h4>
<h4 class="pos_right">这个标题相对正常位置靠右10px</h4>
</body>
</html>

4.7.1 display属性

display属性用于定义建立布局时元素生成的显示框类型。 display属性的可能值及其含义如表 9 所示。

Table 9: display属性的可能值及其含义
display可能值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
flex Displays an element as a block-level flex container. New in CSS3
inline-flex Displays an element as an inline-level flex container. New in CSS3
grid Displays an element as a block-level grid container. New in CSS3
inline-grid Displays an element as a inline-level grid container. New in CSS3

一般地,HTML元素可以分为两大类: Block-level元素Inline元素默认地,Block-level元素从一个新行开始,且会充满整个容器(即充满它的父元素),比如div,table,p,form等等都是Block-level元素。Inline元素,不会从换行符开始,而且它仅占据足够显示它自己的大小(不会充满整个容器),比如img,button,a,span等等都是Inline元素。

Block-level元素的display属性默认为block,Inline元素的display属性默认为inline。

比如,table元素默认为Block-level元素,从而表格前后都会换行,若代码中有连续两个表格则会上下显示;但如果设置表格的display为inline,这时,表格前后不会换行了,两个表格会并排显示。如下面代码中的两个表格会并排显示:

<table style="display: inline">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

<table style="display: inline">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

参考:http://www.w3schools.com/css/css_display_visibility.asp

4.7.2 CSS3新布局:Flexbox

要使用Flexbox布局,你首先要声明一个Flex容器(Flex Container)。声明Flex容器的办法是显式地设置其 display 属性为 display: flex 或者 display: inline-flex 。这样就可以对Flex容器内的子元素(称为flex item)进行布局了。

参考:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

4.7.3 CSS3新布局:Grid

要使用Grid布局,你首先要声明一个Grid容器(Grid Container)。声明Grid容器的办法是显式地设置其 display 属性为 display: grid 或者 display: inline-grid 。这样就可以对Grid容器内的子元素进行布局了。

参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

5 CSS Box model

CSS框模型(Box Model)规定了元素框处理元素内容、内边距(padding)、边框(border)和外边距(margin)的方式,如图 2 所示。

css_boxdim.png

Figure 2: Box model in CSS, “TM” stands for top margin, etc.

内边距、边框和外边距都是可选的,默认值是零。但浏览器的默认样式(default style sheet)常常会设置这些值。
参考:http://www.w3.org/TR/CSS21/box.html

5.1 CSS内边距(padding)属性

CSS内边距(padding)属性如表 10 所示。

Table 10: CSS内边距(padding)属性
属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

5.2 CSS边框(border)属性

CSS边框(border)属性如表 11 所示。

Table 11: CSS边框(border)属性
属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

5.3 CSS外边距(margin)属性

CSS外边距(margin)属性如表 12 所示。

Table 12: CSS外边距(margin)属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

6 CSS长度单位

CSS绝对长度单位如表 13 所示,相对长度单位如表 14 所示。

Table 13: CSS绝对长度单位
绝对长度单位 描述
in 英寸(1 in= 2.54cm)
cm 厘米
mm 毫米
pt 磅(1 pt = 1/72 in = 0.3527mm)
pc pica. 12点活字(1 pc = 12 pt)
Table 14: CSS相对长度单位
相对长度单位 描述
em 1em等于当前的字体尺寸。em可以自动适应用户所使用的字体。
ex 1ex是一个字体的x-height(x-height通常是字体尺寸的一半)
px pixel. 像素(计算机屏幕上的一个点)

Author: cig01

Created: <2010-05-23 Sun 00:00>

Last updated: <2018-01-26 Fri 21:44>

Creator: Emacs 25.3.1 (Org mode 9.1.4)