书签分享收藏举报版权申诉 / 18

立即下载加入VIP,免费下载

当前位置：首页 > 总结汇报 > 学习总结 > CSS样式习题.docx

CSS样式习题.docx

文档编号：26801845
上传时间：2023-06-22
格式：DOCX
页数：18
大小：29.91KB

CSS样式习题.docx

《CSS样式习题.docx》由会员分享，可在线阅读，更多相关《CSS样式习题.docx（18页珍藏版）》请在冰豆网上搜索。

CSS样式习题.docx

CSS样式习题

一、选择题

1．CSS是（）的缩写。

A．ColorfulStyleSheets

B．ComputerStyleSheets

C．CascadingStyleSheets

D．CreativeStyleSheets

2．引用外部样式表的格式是（）。

A．

B．

C．mystyle.css

3．引用外部样式表的元素应该放在（）。

A．HTML文档的开始的位置

B．HTML文档的结束的位置

C．在head元素中

D．在body元素中

4．内部样式表的元素是（）。

A．标记进行声明。

例如：

p{color:

#0000ff}

6、举例说明什么是链接式CSS样式。

链接式CSS样式表是通过使用html链接文件标签link将外部CSS应用到本页面的样式使用方法。

例如：

7、举例说明什么是导入式CSS样式。

采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。

例如：

@importurl（sheet.css）;

8、什么是交集选择器，并举例说明。

交集选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。

其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器。

例如：

p.special{color:

red}

9、什么是并集选择器，并举例说明。

并集选择器或者称为“集体声明”，它的结果是同时选中各个基本选择器所选择的范围。

例如：

h1,h2,p{color:

purple;font-size:

15px}

10、什么是后代选择器，并举例说明。

后代选择器的写法就是把外层的选择器名字写在前面，内层的选择器名字写在后面，之间用空格分隔。

例如：

pspan{color:

red}

11、在CSS中一个独立的盒子模型有哪几部分组成？

content（内容）、border（边框）、padding（内边距）和margin（外边距）

12、举例说明什么是块级元素和行内元素？

块级元素总是占据一个矩型区域，并且同级兄弟块依次竖直排列，左右撑满。

例如：

行内元素不占有独立的区域，并且同级元素之间横向排列，到最右端自动这行。

例如：

13、解释一下div标签的作用

是一个区块容器标记，即

与

之间相当于一个容器，可以容纳段落、标题、表格、图片等各种html元素。

14、解释一下span标签的作用

标记和

一样，作为容器可以容纳各种html元素，但它是一个行内元素，在它的前后不会换行。

15、解释盒子模型的float属性。

float属性默认为none，也就是标准流通常的情况。

如果将float属性的值设置为left或right，元素会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。

16、解释盒子模型的display属性。

display属性用于确定盒子的类型。

display属性设为inline，即为“行内”；设为block，即为“块级”；设为none，即为“无”，也就是隐藏盒子。

17、圆角框主要有哪几种制作方法？

两背景图像法、四图像不固定宽度圆角框、五图像二维滑动门圆角框。

18、使用CSS主要有哪几种布局方式？

两列布局、三列布局、多列布局。

19、CSS布局方法与表格布局方法相比，有哪些优势？

（1）页面载入更快；

（2）降低网站流量费用；（3）易于修改；

（4）视觉一致（5）更易于被搜索引擎找到。

20、使用CSS布局的网页应实现哪些要求？

（1）宽度使用多列布局，并保证页头和页脚正确显示；

（2）可以指定列宽度固定，其余列宽度自适应；

（3）在html中，个列可以任意顺序排列，最终效果都正确显示。

三、案例分析题

1、解释以下CSS样式的含义。

table{

border:

1px#333solid;

font:

12pxarial;

width:

500px

}

td,th{

padding:

5px;

border:

1pxsolid#EEE;

border-bottom-color:

#666;

border-right-color:

#666;

}

将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。

设置单元格和表头部分的样式：

内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#666

2、解释以下CSS样式的含义。

form{

border:

1pxdotted#AAAAAA;

padding:

3px6px3px6px;

margin:

0px;

font:

14pxArial;

}

select{

width:

80px;

background-color:

#ADD8E6;

}

设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：

3px6px3px6px，外边距为0px，字体为14px大小的Arial字体。

设置选择框宽度为80px，背景颜色为#ADD8E6

3、解释以下CSS样式的含义。

input{

color:

#00008B;

}

input.btn{

background-color:

#ADD8E6;

padding:

1px2px1px2px;

}

设置input标签中字体颜色为#00008B；

input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px

4、解释以下CSS样式的含义。

.rounded{

background:

url（images-notebook/left-top.gif）topleftno-repeat;

}

.roundedh2{

background:

url（images-notebook/right-top.gif）toprightno-repeat;

padding:

20px20px10px;

margin:

0;

}

定义类选择器.rounded：

背景图像为left-top.gif，从左上角开始，不平铺

定义后代选择器.roundedh2：

背景图像为right-top.gif，从右上角开始，不平铺；内上、左右、下边距分别是20px20px10px，外边距为0

5、画出一个1-（（1-2）+1）-1的布局结构示意图。

6、画出一个1-（（1+（3-1-2））-1的布局结构示意图。

7、解释以下CSS样式的含义。

#header,#pagefooter,#container{

margin:

0auto;

width:

85%;

}

#content{

position:

absolute;

width:

300px;

}

设置id属性为header、pagefooter、container的div层上下外边框为0，左右外边框为auto，宽度为相对于父元素宽度的85%

设置id属性为content的div层为绝对定位，宽度为固定宽度300px

8、解释以下CSS样式的含义。

A:

link{COLOR:

#3333cc;TEXT-DECORATION:

none}

A:

visited{COLOR:

#990099;TEXT-DECORATION:

none}

A:

active{COLOR:

#ff0000;TEXT-DECORATION:

underline}

A:

hover{COLOR:

#3333cc;TEXT-DECORATION:

underline}

设置超链接样式：

未操作时：

颜色为#3333cc，无下划线；

单击过后：

颜色为#990099，无下划线；

单击时：

颜色为#ff0000，有下划线；

悬停时：

颜色为#3333cc，有下划线；

9、写出下列要求的CSS样式表

（1）设置页面背景图像为login_back.gif，并且背景图像垂直平铺。

（2）使用类选择器，设置按钮的样式，按钮背景图像：

login_submit.gif；字体颜色：

#FFFFFFF；字体大小：

14px；字体粗细：

bold；按钮的边界、边框和填充均为0px。

body{

background-image:

url（img/login_back.gif）;

background-repeat:

repeat-y;}

.picButton{

background-image:

url（img/login_submit.gif）;

color:

#FFFFFF;

font-size:

14px;

font-weight:

bold;

margin:

0px;

border:

0px;

padding:

0px;}

10、写出下列要求的CSS样式表

（1）使用标签样式，设置字体颜色：

#2A1FFF；字体大小：

14px。

内容与边框之间的距离：

5px。

（2）使用超链接伪类：

不带下划线；颜色：

#333333；鼠标悬停在超链接上方时，显示下划线；颜色：

#FF5500。

td{

color:

#2A1FFF;

font-size:

14px;

padding:

5px;

}

A{

color:

#333333;

text-decoration:

none;

}

A:

hover

{

color:

#FF5500;

text-decoration:

underline;

}

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: CSS 样式习题

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：CSS样式习题.docx
链接地址：https://www.bdocx.com/doc/26801845.html

CSS样式习题.docx

热门标签