CSS 基本知识_html/css_WEB-ITnose

1、CSS 简介

　　CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

　　HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。

　　CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。

2、CSS 语法

　　CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。如下：

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

　　选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。

　　CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。如下：

1 p{2     color:red;3     text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */4 }

3、创建 CSS

　　当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。

　　(1)、内联样式

　　内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：

　　由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。

　　(2)、内部样式

　　内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 如下：

 1  2 17 

　　当单个文档需要特殊的样式时，就应该使用内部样式表。

　　(3)、外部样式

　　外部样式也叫做外联样式，即使用 标签链接到外部样式表，如下：

1 2 3 

　　当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意： 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。

　　外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。

　　(4)、样式优先级

　　样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：

　　内联样式 > 内部样式 > 外部样式

　　内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。

　　优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。

　　但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。如下：

1 2 

　　(5)、多重样式

　　样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的 元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。那就意味着：如果你使用了外部文件的样式，在 中也定义了该样式，那么内部样式会取代外部文件中的样式。

4、id 和 class 选择器

　　如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。

　　(1)、id 选择器

　　id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。

 1  2  8  9 10 
CSS 选择器
11 

　　(2)、class 选择器

　　class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。

　　实例：所有拥有 center 类的 HTML 元素均为居中显示。

 1  2 14 15 16 
class 选择器
17 
我是一个段落。
18 
我是另一个段落。
19 

　　实例：所有的 p 元素使用 class="center"，让该元素的文本居中。

 1  2 18 19 20 
class 选择器
21 
我是一个段落。
22 
我是另一个段落。
23 
h2 标题
24 

　　(3)、ID 选择器和类（class）选择器的区别

　　相同点：可以应用于任何元素。

　　不同点：

　　①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

　　②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 文本，而 ID 只能指定一个。

5、CSS 元素选择器

　　最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。

　　如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。

　　在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如 h1{color:red;}，他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。

6、CSS 背景

　　background 属性用于定义 HTML 元素的背景。

　　定义元素背景效果的 CSS 属性有以下五种：

　　　　①：background-color

　　　　②：background-image

　　　　③：background-repeat

　　　　④：background-position

　　　　⑤：background-attachment

　　(1)、background-color：背景颜色

　　background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义：

1 body{2     background-color:gray;3 }

　　CSS 中，颜色值通常使用以下方式定义：

　　　　①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。

　　　　②：RGB，如："rgb(255,0,0)"。

　　　　③：颜色名称，如："red"。

　　(2)、background-image：背景图像

　　background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：

1 body{2     background-image:url('images/wallpaper.jpg');3 }

　　(3)、background-repeat：背景图像设置水平或垂直平铺或不平铺

　　默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。

　　在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。

 1  2  8  9 10 
class 选择器
11 
我是一个段落。
12 
我是另一个段落。
13 
h2 标题
14 

　　(4)、background-position：背景图像设置定位

　　在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：

1 body{2     background-image:url('images/wallpaper.jpg');3     background-repeat:no-repeat;4     background-position:right top;5 }

　　此时，背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置，如果背景图像要重复，也将从这一点开始。

　　background-position 属性值可以使用关键字表示：left | right | center，如果仅指定一个关键字，其他值将会是 "center"。该方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。

　　background-position 属性值也可以使用百分比表示：x％y％，默认值为：0％0％，第一个值是水平位置，第二个值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。

　　background-position 属性值还可以使用长度单位精确表示，单位可以是像素或任何其他 CSS 单位，通常都使用像素。第一个值是水平位置，第二个值是垂直位置，左上角是 0 0，两个数值之间用空格隔开，例如：background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px，垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作 CSS 雪碧图（即 CSS Sprite，也叫做 CSS 精灵）时，将十分重要。

　　(5)、background-attachment：背景图像设置固定或滚动

　　background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：

 1  2 10 11 12 
我是一个段落,我是一个段落
13 
我是一个段落,我是一个段落
14 
我是一个段落,我是一个段落
15 
我是一个段落,我是一个段落
16 
我是一个段落,我是一个段落
17 
我是一个段落,我是一个段落
18 
我是一个段落,我是一个段落
19 
我是一个段落,我是一个段落
20 
我是一个段落,我是一个段落
21 
我是一个段落,我是一个段落
22 
我是一个段落,我是一个段落
23 
我是一个段落,我是一个段落
24 
我是一个段落,我是一个段落
25 
我是一个段落,我是一个段落
26 
我是一个段落,我是一个段落
27 
我是一个段落,我是一个段落
28 
我是一个段落,我是一个段落
29 
我是一个段落,我是一个段落
30 
我是一个段落,我是一个段落
31 
我是一个段落,我是一个段落
32 
我是一个段落,我是一个段落
33 

　　(6)、背景属性简写

　　在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：

1 body{2     background:green url('images/fix.gif') no-repeat fixed 12px 24px;3 }

　　background 属于复合属性，也叫快捷属性，他可以简化代码，提高页面的运行效率，但是在使用 JS 时却不能使用复合属性来获取元素的样式，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用复合属性获取，浏览器并不知道你到底需要哪个样式，就出错了。类似这样的复合属性还有：font、border、padding 和 margin 等。

　　当使用简写属性时，属性值的顺序依次为：

　　　　background-color --> background-image --> background-repeat --> background-attachment --> background-position

　　以上属性无需全部使用，可以按照页面的实际需要使用，比如只定义背景颜色，就可以这样设置：background:#90C;

7、CSS 文本格式

　　(1)、文本颜色

　　color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。

 1  2 10 11 12 
文字颜色
13 
可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。
14 

　　(2)、文本对齐方式

　　text-align 文本排列属性可以用来设置文本的水平对齐方式，文本可以居中或对齐到左或右，两端对齐。

　　该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。center 则为文本居中，right 为文本对齐到右边。

 1  2 10 11 12 
标题 1 居中显示
13 
标题 2 居左默认显示
14 
标题 3 居右显示
15 

　　当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。实例：

 1  2 21 22 23 
text-align 实例
24 
当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。
25 
当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左,右外边距是对齐的,即文本两端对齐,如杂志和报纸那样.在两端对齐文本中,文本行的左右两端都放在父元素的内边界上.然后,调整单词和字母间的间隔,使各行的长度恰好相等.也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的.解决办法就是使用 text-justify 属性.
26 
当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。
27 
当属性的值设置为时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用属性。
28 

　　上面的实例，有4段文本，都设置了两端对齐，前2段的宽度都为300像素，第一段使用全角的标点符号，而第二段使用了半角的标点符号，可以看到，标点符号会对布局对齐造成影响，2段文本的显示长度不一样，在 IE 中第一段显示为9行，而在 Chrome 和 FireFox 中第一段显示为10行，第二段均显示为9行，并且第二段使用半角标点符号，布局显得非常紧凑，毫无美感，不易阅读，而且可以很明显看到，这2段文本的字间距问题还是比较突出的，有的字之间相距很远，而有的字之间间隔很小，主要是因为使用了中英文混合文本，空格也会造成影响。默认情况下，大部分主流浏览器会避免让标点符号占据行首，这也是导致文本间间隔不均的原因，这些问题要想控制还是较为复杂的。第3段文本将宽度设置为400像素，文本两端对齐效果相对来说比较理想。最后一段文本宽度仍为300像素，但是将文本设置为纯中文，文本两端对齐效果很好。

　　综上所述，如果文本是中文，文本两端的对齐效果十分理想。如果文本是中英文混合的，通过适当的调整宽度，文本两端对齐效果相对来说比较理想，但对于宽度的调整可能会影响到整体布局，其实不调整宽度，显示效果也无伤大雅。如果文本的标点符号使用半角，或者半角和全角混合使用，那么文本两端对齐效果则相当糟糕。

　　text-justify 属性是 CSS3 版本中定义的属性，用于规定当 text-align 被设置为 justify 时的齐行方法，该属性指定如何对齐文本以及对齐间距，目前只有 IE 支持该属性，其他主流浏览器都不支持，如果不设置该属性，在 IE 中两端对齐则无效果，但是对于其他浏览器则无影响。该属性有多个值，除了上面提到的2个值之外，还有 none 禁用齐行。inter-word 通过增加/减少单词间的间隔对齐文本。inter-cluster 只对不包含内部单词间隔的内容进行排齐，比如亚洲语系。distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。kashida 通过拉伸字符来排齐内容。

　　(3)、文本修饰

　　text-decoration 属性用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线，如下：

 1  2  7  8  9 默认带有下划线的超链接

10 text-decoration:none; 删除超链接下划线11 

　　也可以使用其他值来设置文本的修饰，text-decoration:overline; 设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。该属性还有一个值为 blink 定义闪烁的文本，但是所有浏览器都不支持。

 1  2 16 17 18 
text-decoration:overline; 定义文本上的一条线。
19 
text-decoration:line-through; 定义穿过文本的一条线。
20 
text-decoration:underline; 定义文本下的一条线。
21 22 


23 设置文本下的一条线，会被混淆为超链接。24 25 
设置穿过文本 和 文本下的一条线，类似于 HTML 标签， del 元素定义已删除的文本 和 ！
26 

　　注意：给文本添加修饰，会给用户带来困扰，因此建议只将文本修饰属性用于清除超链接的下划线，其余值要慎用，特别是添加文本下的一条线，用户会误认为超链接，所以不要强调指出不是链接的文本，设置穿过文本和文本上的一条线，也常常会混淆用户，不明就里。

　　①、文本阴影

　　文本阴影是在 CSS3 中定义的一个文本修饰效果，text-shadow 属性应用于阴影文本。该属性有两个作用，产生阴影和模糊主体。

　　语法：text-shadow: x y shadow color;

　　该属性可以有4个值，其中前2个是必需的值，用来指定阴影的延伸距离，值为长度值，并且允许负值，其中 x 是水平阴影的偏移值，y 是垂直阴影的偏移值。最后2个值都是可选的，shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。color 指定阴影的颜色。

 1  2 23 24 25 
基本文字阴影效果
26 
只定义2个必需值
27 
文字阴影模糊效果
28 
白色文本上的阴影
29 
霓虹灯效果
30 
霓虹灯效果
31 

　　(4)、文本格式

　　①、文本缩进

　　文本缩进属性是用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。从小学写作文写日记时，我们都知道每个段落的首行都必须空2个字的大小，也就是缩进2个字，那么在 CSS 中表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。也可以使用 % 定义基于父元素宽度的百分比的缩进，还可以以像素为单位设置缩进。

　　②、文本间距

　　文本间距即行高，就是文本行的高度。line-height 属性用于设置行高，不允许负值。属性值可以是长度单位，设置固定的行间距。也可以是数字，此数字会与当前的字体尺寸相乘来设置行间距。还可以用 % 设置基于当前字体尺寸的百分比行间距。

　　③、字间距

　　letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。不同的是：letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。属性值都为长度单位，定义文本间的固定间距，并允许负值。注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。

　　需要注意：letter-spacing 和 text-align:justify 是两个冲突的属性，不能同时使用，text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，而 letter-spacing 是指定一个固定的字间距，比如字与字之间相隔 8px，如果这两个属性同时使用，那么既要自动调整字间距，又要按指定的字间距排列，这就相互矛盾了，好比一个人既向左看的同时又向右看，那就神奇了，会出事的。

　　综合实例：

 1  2  3  4      5      6 30 31 32 
33 
匆匆
34 
作者: 朱自清
35 
燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？

36 
我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。

37 
去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。

38 
在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？

39 
你聪明的，告诉我，我们的日子为什么一去不复返呢？
40 
41 42 

　　④、文本空白处理

　　white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。该属性还有4个值，nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到
标签为止。pre 空白会被浏览器保留，这种方式类似 HTML 中的

 标签，用于定义预格式文本。pre-wrap 指定保留空白符序列，但是正常地进行换行。pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。

 1  2 13 14 15 
white-space:nowrap 指定文本不换行，直到遇到 <br> 标签。。1—— 指定文本不换行，直到遇到 <br> 标签。。2—— 指定文本不换行，直到遇到 <br> 标签。。3—— 指定文本不换行，直到遇到 <br> 标签。。4—— 指定文本不换行，直到遇到 <br> 标签。。
5—— 指定文本不换行，直到遇到 <br> 标签。。16 
17 18 
19   white-space:pre20     空白会被浏览器保留，该方式类似 HTML 中的 <pre> 标签。21 white-space:pre            空白会被浏览器保留，该方式22         类似 HTML 中的 <pre> 标签。23 
24 25 
26 white-space:pre-wrap 保留空白符序列，但是正常地进行换行。1—— 保 留   空 白 符 序 列，但 是   正 常 地    进 行 换 行。2—— 保留 空白   符序列，但是    正常地      进行换行。3—— 保 留  空  白   符  序  列，但  是  正  常  地    进行换行。27 
28 

　　(5)、文本转换

　　text-transform 属性控制文本中的字母。文本转换属性是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。

　　text-transform:capitalize; 定义文本中的每个单词以大写字母开头。text-transform:uppercase; 定义文本仅有大写字母。text-transform:lowercase; 定义文本仅有小写字母。

 1  2 13 14 15 
this is some text. 单词以大写字母开头。
16 
this is some text. 仅有大写字母。
17 
This IS SOme Text. 仅有小写字母。
18 

8、CSS 字体

　　font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性，可以在一个声明中设置所有字体属性。

　　当使用简写属性时，属性值的顺序依次为：

　　　　font-style --> font-variant --> font-weight --> font-size/line-height --> font-family

　　注意，font-size 和 font-family 的值是必需的，否则无效。如果缺少了其他值，浏览器将使用默认值。如下：

font:12px/1.5 Tahoma,Arial,Helvetica,"宋体",sans-serif;font:bold 14px/1.5 "Microsoft YaHei",Arial,Tahoma,sans-serif;

　　font:12px/1.5 表示：font-size:12px，line-height:1.5，即行高为 12px 的 1.5 倍，也就是 150%。

　　(1)、CSS 字体系列

　　font-family 属性设置文本的字体系列。应该始终为 font-family 属性设置多个字体名称作为一种 "后备" 机制，如果浏览器不支持第一种字体，则会尝试下一种字体。注意：如果字体系列的名称超过一个字，他必须用引号，如 font-family:"黑体"，中文是也需要加引号，如 font-family:"微软雅黑" font-family:"宋体"，英文字体名称可以不用加，如 font-family:Arial，但是如果字体名称为多个单词组合，避免浏览器解析时候把它解析成多个词汇，因此也需要加引号，如 font-family:"Microsoft YaHei"。引号可以是单引号，也可以是双引号。如下：

font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif;font-family:Helvetica,'Microsoft Yahei','微软雅黑',Arial,sans-serif;

　　(2)、字体大小

　　font-size 属性用于设置文本的大小。文字的大小在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。因此必须规范使 HTML 标签，如

-

表示标题，

表示段落。

如果不指定一个字体的大小，那么默认大小和普通文本段落一样，是 16 像素，即 1个汉字 = 16px = 1em。

　　字体大小的值可以是绝对或相对的大小：

　　　　绝对大小：①：指定文字大小。②：不允许用户在所有浏览器中改变文字大小。③：确定了输出的物理尺寸时绝对大小很有用。

　　　　相对大小：①：相对于周围的元素来设置大小。②：允许用户在浏览器中改变文字大小。

　　字体的大小可以使用 px、em，% 和 em 组合来设置。

　　①、使用 px 设置字体大小

　　通过像素设置文本大小，可以对字体大小进行完全控制，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。

　　②、使用 em 设置字体大小

　　em 是 W3C 推荐使用的尺寸单位，可以使用 em 代替 px。1em 等于当前的字体尺寸，在浏览器中默认的文字大小是 16px，因此，1em 的默认大小是 16px。可以通过下面这个公式将像素转换为 em：px/16=em

　　实例：

 1  2 13 14 15 
我是第一个段落
16 
我是第二个段落
17 
我是最后一个段落
18 19 

　　上面的例子，文字大小设置为 em， 注释中是像素的转换，使用 em 单位，可以在所有浏览器中调整文本大小。

　　③、使用 % 和 em 组合设置字体大小

　　在所有浏览器的解决方案中，设置 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

 1  2 16 17 18 
我是第一个段落
19 
我是第二个段落
20 
我是最后一个段落
21 22 

　　(3)、字体样式

　　CSS 的 font-style 属性主要用于指定斜体文字。

　　这个属性有三个值：

　　　　①：font-style:normal; 该值是默认值，浏览器显示一个标准的字体样式，正常正常显示文本。

　　　　②：font-style:italic; 定义斜体，浏览器斜体的字体样式。

　　　　③：font-style:oblique; 定义倾斜的文字，和斜体非常类似。

　　italic 和 oblique 区别：

　　这两个值都可以设置文本向右倾斜显示。一种字体有粗体、斜体、划线等多种字体属性，但是一些字体，或许只有正常体，并没有斜体，这时候就可以用 oblique 定义，他可以让没有斜体属性的文字倾斜，从 CSS 规范中就可以看出，italic 定义的是斜体，而 oblique 定义的是倾斜的文字，注意是倾斜的文字，而不是斜体字，这就是他们的区别。那么，如果一种字库中没有提供斜体字，当使用 italic 时，浏览器实际上是按 oblique 显示的。

　　(4)、字体加粗

　　font-weight 属性可用来设置字体的粗细，默认值为 normal 定义标准的字体。最常用的的值是 bold 定义粗体字体。bolder 定义更粗的字体。lighter 定义更细的字体。也可以使用数值指定，从 100 - 900 定义由细到粗的字体，100 对应最细的字体，900 对应最粗的字体，数值 400 等同于 normal，而 700 等同于 bold。

　　(5)、字体变形

　　font-variant 属性设置以小型大写字体或者正常字体显示文本。这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。该属性主要用于定义小型大写字母文本。默认值为 normal 浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。

 1  2 10 11 12 
Why are you so diao ?
13 
Why are you so diao ?
14 
Why are you so diao ?
15 

9、CSS 链接

　　不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

　　在所有浏览器中，链接的默认外观如下：

　　　　①：未被访问的链接带有下划线而且是蓝色的。

　　　　②：已被访问的链接带有下划线而且是紫色的。

　　　　③：活动链接带有下划线而且是红色的。

　　文本修饰属性 text-decoration:none 可用于删除链接中的下划线。

　　链接的四种状态是：

　　　　①：a:link - 正常，未访问过的链接。

　　　　②：a:visited - 已访问过的链接。

　　　　③：a:hover - 当鼠标滑动到链接上时。

　　　　④：a:active - 链接被点击的那一刻。

　　当为链接的不同状态设置样式时，必须遵循以下顺序规则：

　　　　①：a:hover 必须跟在 a:link 和 a:visited 后面。

　　　　②：a:active 必须跟在 a:hover后面。

　　在这四种状态中，最常被应用到的状态是 a:hover，:hvoer 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。

　　实例创建链接框：

 1  2 20 21 22 CSS 基础知识23 

10、CSS 列表

　　从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表：①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。②：有序列表 - 列表项的标记默认以数字样式显示。

　　CSS 列表属性作用如下：①：设置不同的列表项标记。②：设置列表项标记为图像。

　　通过 CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

　　(1)、无序列表项标记

　　无序列表可被用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。

 1  2  7  8  9 

10
• HTML 超文本标记语言
11
• CSS 层叠样式表
12
• JavaScript 赋予 HTML 动态交互
13
• jQuery 最好用的JS库
14
• Bootstrap 前端开发框架
15

16

　　无序列表除了可以无标记之外，还可以修改标记类型，如 circle 空心圆，square 实心方块。实例：

 1  2 10 11 12 

13
• HTML 超文本标记语言
14
• CSS 层叠样式表
15
• JavaScript 赋予 HTML 动态交互
16

17

18
• jQuery 最好用的JS库
19
• Zepto 兼容 jQuery 语法的移动端JS库
20
• Bootstrap 前端开发框架
21

22

　　(2)、有序列表项标记

　　有序列表项标记默认使用数字样式显示，即 list-style-type:decimal，也可以将标记项修改为其他类型，cjk-ideographic 则指定汉语数字(表意数字)作为标记。decimal-leading-zero 指定以0开头的数字作为标记，如 01, 02, 03, 等。lower-roman 指定以小写罗马数字作为标记，如 i, ii, iii, iv, v, 等。upper-roman 指定以大写罗马数字作为标记，如 I, II, III, IV, V, 等。lower-alpha 指定以小写英文字母作为标记。upper-alpha 指定以大写英文字母作为标记。

　　(3)、图像作为列表项标记

　　要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。

 1  2  7  8  9 

10
• HTML 超文本标记语言
11
• CSS 层叠样式表
12
• JavaScript 赋予 HTML 动态交互
13
• jQuery 最好用的JS库
14
• Bootstrap 前端开发框架
15

16

　　(4)、列表项标记的位置

　　list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内，且环绕文本根据标记对齐。如下：

 1  2 14 15 16 

17
• HTML 超文本标记语言
18
• CSS 层叠样式表
19
• JavaScript 赋予 HTML 动态交互
20
• jQuery 最好用的JS库
21
• Bootstrap 前端开发框架
22

23

24
• HTML 超文本标记语言
25
• CSS 层叠样式表
26
• JavaScript 赋予 HTML 动态交互
27
• jQuery 最好用的JS库
28
• Bootstrap 前端开发框架
29

30

　　在上面例子中，使用了2个无序列表，第一个列表项标记位置为默认，第二个列表项标记被放置在文本以内，为了增强演示效果，给每个列表项都设置外边距和边框，在浏览器中可以很直观的看到二者的不同，默认值的标记在边框外，而 inside 则在边框内，还有一点需要注意：在 Chrome 和 Firefox 中这两个值的标记位置与列表项之间的空白都是相等的，而在 IE 中可以很明显的看到，使用 inside 值后，标记位置与列表项之间的空白比默认值宽。

　　(5)、列表属性简写

　　在单个属性中可以指定所有的列表属性，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。

　　当使用简写属性时，属性值的顺序依次为：

　　　　list-style-type --> list-style-position --> list-style-image

　　可以不设置其中的某个值，比如 list-style:square inside 也是允许的，未设置的属性将使用默认值。

　　无序列表项的标记在隐藏时，使用简写属性，且考虑到浏览器的兼容性，可以定义为：list-style:none outside none; 或者不设置第三个值也好。

11、CSS 表格

　　使用 CSS 可以大大的提高 HTML 表格的外观。

　　(1)、表格边框

　　给表格设置边框，可以使用 CSS 的 border 属性定义，也可以使用表格标签的 border 属性定义。如下：

 1  2  7  8  9 

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

粗粮	蔬菜	水果
大豆	黄瓜	香蕉
高粱	菠菜	柠檬

26

　　

　　注意，这样设置的表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格，就使用 border-collapse 属性。

　　(2)、折叠边框

　　border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示，不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框，该值会忽略 border-spacing 和 empty-cells 属性，即设置这两个属性无效。如下：

 1  2 10 11 12 

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

粗粮	蔬菜	水果
大豆	黄瓜	香蕉
高粱	菠菜	柠檬

29

　　border-spacing 属性用于设置相邻单元格的边框间的距离，仅用于边框分离模式，即双线条边框表格。使用 px、cm 等单位指定距离，不允许使用负值。如果定义一个参数，那么定义的是水平和垂直间距。如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。

　　empty-cells 属性设置是否显示表格中的空单元格，仅用于边框分离模式，即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示，如果显示，就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框，hide 不在单元格周围绘制边框。

　　除非表格的边框显示为双线条边框，否则这两个属性都无效。

 1  2 12 13 14 

15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

粗粮	蔬菜	水果
	黄瓜
高粱		柠檬

31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

粗粮	蔬菜	水果
	黄瓜
高粱		柠檬

48

　　(3)、表格宽度和高度

　　width 和 height 属性定义表格的宽度和高度。

　　(4)、表格对齐

　　text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。

　　①、text-align 属性设置水平对齐方式，比如左对齐，右对齐和居中。

　　②、vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或中间对齐。

　　　　vertical-align:top; 顶部对齐。vertical-align:middle; 中间对齐。vertical-align:bottom; 底部对齐。

　　caption-side 属性可以设置表格标题的位置，默认值为 top 将标题定位在表格之上，bottom 可以把表格标题定位在表格之下。

　　(5)、表格内边距

　　如果需要控制表格中内容与边框的距离，就应该增加内容的内边距，即为 td 和 th 元素设置 padding 属性。

　　(6)、表格颜色

　　可以为表格的边框指定边颜色，也可以为表头以及单元格指定背景颜色，还可以设置文本的颜色。

　　综合实例：

 1  2 30 31 32 

33 34 35 36

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• CSS 基本知识_html/css_WEB-ITn...

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• html中怎么清除li黑点
• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html的name和value是什么意思
• html如何给背景图片设置透明度
• html中怎么让列表横向排列
• html5怎么创建跳转页尾超链接
• 十分钟搞懂form标签中的GET和POST提交方式

• 404 not found是什么意思
• DOM是什么意思
• url是什么意思？
• 如何改变图片大小
• html是什么
• html如何创建电子邮件链接
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
• 如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作

  

食物类别