css基本题目

来源：互联网发布：windows loader 8.1 编辑：程序博客网时间：2024/06/01 21:11

1、CSS是什么的缩写？（ B ）
A. Colorful Style Sheets
B. Cascading Style Sheets
C. Creative Style Sheets
D. Computer Style Sheets

2、访问外部样式表的正确的HTML代码是（ B ）
A. <style src="mystyle.css" />
B. <link rel="stylesheet" type="text/css" href="mystyle.css">
C. <stylesheet>mystyle.css</stylesheet />
D. <usecss file="mystyle.css" />
3、HTML文档中什么位置比较适合于引用外部样式表？（ A ）
A. 在<head>部分
B. 文档结尾
C. 文档开始
D. 在<body>中

4、哪个HTML标签定义内部的样式表？（ A ）
A. <style>
B. <css>
C. <script>
D. <cssStyle>

5、哪个HTML属性定义内嵌的样式表？（ A ）

A. style
B. font
C. styles
D. class

6、哪个是正确的CSS语法？（ D ）
A. {body;color:black}
B. body:color=black
C. {body:color=black(body}
D. body {color: black}

7、CSS中如何插入注释？（ C ）

A. // this is a comment //
B. ' this is a comment
C. /* this is a comment */
D. // this is a comment

8、哪个属性用来改变背景颜色？（ A ）
A. background-color:
B. color:
C. bgcolor:
D. set-Color:

9、如何为<h1>元素添加背景颜色？（ C ）

A. h1.all {background-color:#FFFFFF}
B. all.h1 {background-color:#FFFFFF}
C. h1 {background-color:#FFFFFF}
D. h1+all {background-color:#FFFFFF}

10、如何改变一个元素中的文本的颜色？（ A ）

A. color:
B. text-color=
C. text-color:
D. fgcolor:

11、哪个CSS属性控制文字大小？（ B ）

A. font-style
B. font-size
C. text-size
D. text-style

12、将所有的<p>元素全部加粗的CSS( A )
A. p {font-weight:bold}
B. p {text-size:bold}
C. <p style="font-size:bold">
D. <p style="text-size:bold">

13、如何让超链接不显示下划线？（ D ）
A. a {text-decoration:no underline}
B. a {decoration:no underline}
C. a {underline:none}
D. a {text-decoration:none}

14、如何让文本中每个单词都是大写字母开头进行显示？（ C ）
A. text-transform:uppercase
B. text-transform:smart
C. text-transform:capitalize
D. 无法用CSS做到这点

15、如何改变一个元素的字体？（ C ）
A. font=
B. f:
C. font-family:
D. text-name:

16、如何将文本加粗显示？（ D ）
A. font:b
B. font:bold
C. style:bold
D. font-weight:bold

17、边框样式设定如下:上边框10像素、底边框5像素、左边框20像素、右边框1像素，如何显示该样式（ D ）
A. border-width:5px 20px 10px 1px
B. border-width:10px 20px 5px 1px
C. border-width:10px 5px 20px 1px
D. border-width:10px 1px 5px 20px

18、如何改变一个元素的左页边距？（ B ）
A. margin:
B. margin-left:
C. text-indent:
D. indent:

19、为了定义元素与其边框直接的空白区域，可以使用padding属性，但是是否可以将padding设为负值呢？（ B ）
A. 可以
B. 不可以
C. 标准中没有规定
D. 不同浏览器是不同的

20、如何让一个列表中各个项之前显示实心的正方形(square)？（ c ）
A. type: square
B. type: 2
C. list-style-type: square
D. list-type: square

21、文本的white-space属性：规定如何处理元素中的空白。

<html>
<head>
<style type="text/css">
p {white-space: pre;}
</style>
</head>

<body>

<p>This paragraph has many
spaces in it.</p>

<p>注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。</p>

</body>

</html>
结果：

This paragraph has many spaces in it.

注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。

22、文本的text-decoration属性

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>

</html>

23、链接样式的正确次序：

a:link, a:visitied, a:hover, a:focus, a:active

比如说这样写是对的：

a:link, a:visitied{ text-decoration: none; }

a:hover, a:focus, a:active{ text-decoration: underline; }

而这样写，鼠标悬停和激活样式就不起作用：

a:hover, a:focus, a:active{ text-decoration: underline; }

a:link, a:visitied{ text-decoration: none; }

24、css选择器的优先级：

行内样式（比如说：<p style=""/>）》 id选择器》类选择器、伪类选择器、属性选择器》标签选择器、伪元素选择器

25、border: none; 与 border : 0; 的区别

border: none;是border-style的简写 border : 0; 是border-width的简写

体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

性能差异：

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，

【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，

26、css中用来隐藏元素的属性display:none和visibility:hidden的区别：

display:none; 隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；

visibility:hidden; 隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。

1.空间占据
2.回流与渲染：display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；
3.株连性：所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。

display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见，但是如果子孙元素应用了visibility:visible，那么这个子孙元素又显现出来。

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
/*******************************************************************

27、回流和重绘

http://blog.csdn.net/ClaireKe/article/details/51375622

浏览器解析大概的工作流程大致可归纳为四个步骤：
1. 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 – 内容树。
2. 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式）成样式结构体，根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树（render tree）。
注：在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。
3. 布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4. 绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制。

比较：

render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。

定义

我们可以看到Repain 和 Reflow 分别出现在了第三和第四步。因此我们给出下面的定义：
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

回流与重绘总结：

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为repaint重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。

引起Repain和Reflow的一些操作

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。
当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
当你移动 DOM 的位置，或是搞个动画的时候。
当你修改 /删除CSS 样式的时候。
当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
当你修改网页的默认字体时。
当你设置 style 属性的值（Setting a property of the style attribute）。
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

如何减少Repain和Reflow?

Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：
1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className，即将多次改变样式属性的操作合并成一次操作：

    // 不好的写法    var left = 10,    top = 10;    el.style.left = left + "px";    el.style.top  = top  + "px";    el.style.background = '#eee';     // 比较好的写法    el.className += " theclassname";

2. 让要操作的元素进行”离线处理”，处理完后一起更新
- 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
- 使用display:none技术，只引发两次回流和重绘;

原理：由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
- 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4. 尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
因为改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面
5. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素为动画的 HTML 元素，例如动画，那么修改他们的 CSS 是会大大减小 reflow 。因为,它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
6. 。不要用tables布局的一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
7. 避免使用CSS的JavaScript表达式，如果css里有expression，每次都会重新计算一遍。

0 0