【web前端开发】第二周 CSS的基本使用

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

CSS代码结构中的几个特点，具体如下：

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。

（1）行内式 

行内式也称为内联样式，是通过标记的style属性来设置元素的样式，该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

行内样式

（2）内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义.该语法中，标记一般位于标记中标记之后，也可以把它放在HTML文档的任何地方。

（3）链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，该语法中，标记需要放在头部标记中，并且必须指定标记的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。•type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。•rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

（1）标记选择器（标记选择器）

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”。

（2）类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

（3）id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

（4）通配符选择器（全局选择器）

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

（5）标签指定式选择器(交集选择器)

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。

（6）后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

（7）并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。

1）字体样式属性

(1)font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示。                               

相对长度单位

说明

em

相对于当前对象内文本的字体尺寸

px

像素，最常用，推荐使用

绝对长度单位

说明

in

英寸

cm

厘米

mm

毫米

pt

点

（2）font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

使用font-family设置字体时，需要注意以下几点：

•各种字体之间必须使用英文状态下的逗号隔开。

•中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。

•如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:"Times New Roman";。

•尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

（3）font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值如下表所示。                      

值

描述

normal

默认值。定义标准的字符。

bold

定义粗体字符。

bolder

定义更粗的字符。

lighter

定义更细的字符。

100~900（100的整数倍）

定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。

（4）font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

•normal：默认值，浏览器会显示标准的字体样式。•italic：浏览器会显示斜体的字体样式。•oblique：浏览器会显示倾斜的字体样式。

其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic。

（5）font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style font-variant font-weight /line-height font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高，在后面将具体介绍。

（6）@font-face属性

@font-face属性是CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。使用@font-face属性定义服务器字体的基本语法格式如下：

@font-face{

  font-family:字体名称;

  src:字体路径;

  }

在上面的语法格式中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src属性用于指定该字体文件的路径。

（7）word-wrap属性

word-wrap属性用于实现长单词和URL地址的自动换行，其基本语法格式如下：

选择器{word-wrap:属性值;}

在上面的语法格式中，word-wrap属性的取值有两种，如下表所示。           

2)文本外观属性

(1）color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

•预定义的颜色值，如red，green，blue等。•十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。•RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

（2）letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

（3）word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

（4）line-height:行间距

line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。如下图所示，线框的高度即为这段文本的行高。

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

（5）text-transform:文本转换

•text-transform属性用于控制英文字符的大小写，其可用属性值如下：•none：不转换（默认值）。•capitalize：首字母大写。•uppercase：全部字符转换为大写。•lowercase：全部字符转换为小写。

（6）text-decoration:文本装饰

text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：

•none：没有装饰（正常文本默认值）。

•underline：下划线。

•overline：上划线。

•line-through：删除线。

（7）text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

•left：左对齐（默认值）

•right：右对齐。

•center：居中对齐。

（8）text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

（9）white-space:空白符处理

使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：

•normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

•pre：预格式化，按文档的书写格式保留空格、空行原样显示。

•nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

（10）text-shadow:阴影效果

在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法格式如下：

选择器{text-shadow:h-shadow  v-shadow  blur  color;}

在上面的语法格式中，h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。

（11）text-overflow: 标示对象内溢出文本

在CSS中，text-overflow属性用于标示对象内溢出的文本，其基本语法格式如下：

选择器{text-overflow:属性值;}

 在上面的语法格式中，text-overflow属性的常用取值有两个，具体如下：

•clip：修剪溢出文本，不显示省略标记“…”。

•ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符。

（1）层叠性

所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义

标记字号大小为12像素，链入式定义

标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

2）继承性

所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。例如，定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在标记中，是标记的子标记。

并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：

•边框属性

•外边距属性

•内边距属性

•背景属性

•定位属性

•布局属性

•元素宽高属性

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

•行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。

•权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

•CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。