CSS 基本知识_html/css_WEB-ITnose

程序员文章站 2024-01-18 18:40:22

...

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

我是一个段落,我是一个段落

　　(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

文字颜色

可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。

　　(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 实例

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

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

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

　　上面的实例，有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; 定义文本上的一条线。

text-decoration:line-through; 定义穿过文本的一条线。

text-decoration:underline; 定义文本下的一条线。

21 22

23 设置文本下的一条线，会被混淆为超链接。24 25

设置穿过文本和文本下的一条线，类似于 HTML 标签， ~~del 元素定义已删除的文本~~ 和！

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

　　①、文本阴影

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

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

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

1 2 23 24 25

基本文字阴影效果

只定义2个必需值

文字阴影模糊效果

白色文本上的阴影

霓虹灯效果

　　(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 指定文本不换行，直到遇到 标签。。1—— 指定文本不换行，直到遇到 标签。。2—— 指定文本不换行，直到遇到 标签。。3—— 指定文本不换行，直到遇到 标签。。4—— 指定文本不换行，直到遇到 标签。。
5—— 指定文本不换行，直到遇到 标签。。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

　　(5)、文本转换

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

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

1 2 13 14 15

this is some text. 单词以大写字母开头。

this is some text. 仅有大写字母。

This IS SOme Text. 仅有小写字母。

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

我是第一个段落

我是第二个段落

我是最后一个段落

18 19

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

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

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

1 2 16 17 18

我是第一个段落

我是第二个段落

我是最后一个段落

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 ?

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

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

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

 1  2 10 11 12

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

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

　　(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

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

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

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

 1  2 14 15 16

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

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

　　在上面例子中，使用了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

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

　　注意，这样设置的表格具有双线条边框，这是由于 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

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

　　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

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

　　(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

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

专题推荐

独孤九贱-php全栈开发教程
全栈 170W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程
入门 80W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程
实战 120W+

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

作者信息

认证0级讲师

发布技术文章

最新文章
热门排行

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

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

CSS 基本知识_html/css_WEB-ITnose

CSS 选择器

class 选择器

class 选择器

h2 标题

class 选择器

h2 标题

文字颜色

标题 1 居中显示

标题 2 居左默认显示

标题 3 居右显示

text-align 实例

匆匆

作者: 朱自清

-
表示标题，

表示标题，

专题推荐

CSS+DIV的简单处理导航条_html/css_WEB-ITnose