css样式基本知识练习题

一、CSS核心基础

如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。

1.    CSS样式规则

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

在上面的样式规则中，        用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。

2.    引入CSS样式表的方式有哪些？

(1)行内式

也称为内联样式，是通过        的        属性来设置元素的样式。

语法格式

<                    ="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 

并没有做到结构与表现的分离，所以一般很少使用。通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

(2)内嵌式

内嵌式是将CSS代码集中写在HTML文档的        头部标记中，并且用         标记定义。

语法格式

<        >

<          type="text/css">

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

内嵌式CSS样式只对其所在的HTML页面生效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。

(3)链入式

链入式是将所有的样式放在一个或多个以         为扩展名的外部样式表文件中，

通过<         />标记将外部样式表文件链接到HTML文档中。

语法格式

<                  ="CSS文件的路径"           ="text/css"           ="stylesheet" />

链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<        />标记链接多个CSS样式表。

链入式是使用频率最高，也最实用的CSS样式表。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，使得网页的前期制作和后期维护都十分方便。

3.什么是CSS基础选择器？

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

(1)标记选择器

标记选择器是指用HTML        称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。

语法格式

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

标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。

(2) 类选择器

类选择器使用“        ”（英文        ）进行标识，后面紧跟类名。

语法格式

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

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

多个标记可以使用同一个类名，这样可以为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式。类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。

(3)id选择器

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

语法格式

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

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

同一个id可以应用于多个标记，浏览器并不报错，但是这种做法是不被允许的，因为JavaScript等脚本语言调用id时会出错。但是，最后一行没有应用任何CSS样式，这意味着id选择器不支持像类选择器那样定义多个值，类似“id="bold font22"”的写法是完全错误的。

(4)通配符选择器

通配符选择器用“        ”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

语法格式

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

二、CSS控制文本样式

学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本样式属性。

1.    CSS字体样式属性

为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。

                属性用于设置字号。

                属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

                属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

注意：

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

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

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

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

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

                属性用于定义字体的粗细。

属性值 为：

normal：默认值，浏览器会显示标准的字体;

small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写;但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

                属性用于定义字体风格。如设置斜体、倾斜或正常字体。

属性值 为：

normal：默认值，浏览器会显示标准的字体样式;

          ：浏览器会显示斜体的字体样式;

oblique：浏览器会显示倾斜的字体样式;

                属性用于对字体样式进行综合设置。

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

使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。

其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2.    CSS文本外观属性

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

•预定义的颜色值，如red，green，blue等。

•               ，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

•RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

                属性用于定义字间距，所谓字间距就是字符与字符之间的空白。

•               属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。

                属性用于定义英文单词之间的间距，对中文字符无效。

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

                属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。

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

                属性用于设置文本内容水平对齐，相当于html中的align对齐属性。

其可用属性值如下：

•          ：左对齐（默认值）

•          ：右对齐。

•          ：居中对齐。

                属性用于控制英文字符的大小写。

其可用属性值如下：

•none：不转换（默认值）。

•               ：首字母大写。

•uppercase：全部字符转换为大写。

•lowercase：全部字符转换为小写。

                属性用于设置文本的下划线，上划线，删除线等装饰效果。

其可用属性值如下：

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

•               ：下划线。

•overline：上划线。

•line-through：删除线。

•另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。

                属性用于设置首行文本的缩进。

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

通过                属性可以设置文本不同单位的首行缩进效果，而与字号大小无关。

注意:

                属性仅适用于块级元素，对行内元素无效。

                属性可设置空白符的处理方式。

其属性值如下：

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

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

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

css颜色值的缩写

十六进制颜色值是由#开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都各自相同时，可使用CSS缩写，例如#FF6600可缩写为        ，#FF0000可缩写为        ，#FFFFFF可缩写为        。使用颜色值的缩写可简化CSS代码。

CSS定义背景颜色

                :背景颜色属性

•颜色值，例：red、yellow

•               ，例：#ccc

•rgb(r,g,b)，例：rgb(30,0,0)

                的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。

三、CSS高级特性

仅仅学习CSS基础选择器、CSS控制文本样式，并不能良好地控制网页中元素的显示样式。想要使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，就需要学习CSS高级特性。

1.    CSS复合选择器

标签指定选择器

标签指定式选择器又称交集选择器，由                构成，其中第一个为                ，第二个为                或                ，两个选择器之间不能有空格，如h3.special或p#one。

后代选择器

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

后代选择器不限于使用两个元素，如果需要加入更多的元素，只需在元素之间加上空格即可。

并集选择器

并集选择器是各个选择器通过        连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

使用并集选择器定义样式与对各个基础选择器单独定义样式效果完全相同，而且这种方式书写的CSS代码更简洁、直观。

2.    CSS层叠性与继承性

所谓层叠性是指多种CSS样式的叠加。

所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。

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

边框属性、定位属性、内/外边距属性、布局属性、背景属性、元素宽高属性

3.    CSS优先级

思考：网页制作时，对统一元素，应用不同的背景，会出现什么情况？

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

 文本的颜色

对应的权重值：

p权重为:1+1*/

s权重为:1+10*/

.权重为:     +     */

p权重为:     +     +     */

p权重为:     +     +     */ 

#权重为:100+1*/ 

#权重为:     +     +     */

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

•继承样式的权重为0。

•行内样式优先。

•权重相同时，CSS遵循就近原则。

•CSS定义了一个!important命令，该命令被赋予最大的优先级。

复合选择器权重叠加问题。

•复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。

复合选择器的权重无论为多少个标记选择器的叠加，其权重都不会高于类选择器。同理，复合选择器的权重无论为多少个类选择器和标记选择器的叠加，其权重都不会高于id选择器。