分题型基础补全计划（二）—— CSS 篇

样式表的嵌入

题型 1：在以下的 HTML 中，哪个是正确引用外部样式表的方法？

A <style src="mystyle.css">
B <link rel="stylesheet" type="text/css" href="mystyle.css">
C <stylesheet>mystyle.css</stylesheet>
D <stylesheet>src=mystyle.css</stylesheet>

我的答案: B

外部样式表

适用场景：样式需应用到多个页面时，可通过引入同一个外部样式表来改变整个网页站点的外观
过程：浏览器从外部样式表中逐一读取样式声明，并藉此格式化文档

<head>
    <!--1、链接式-->
    <link rel="stylesheet" type="text/css" href="sample_style1.css">
    <!--2、导入式-->
    <style type="text/css">
        @import url(sample_style2.css);
    </style>
</head>

题型 2：哪个 HTML 标签用于定义内部样式表？

A <style>
B <script>
C <css>
D <html>

我的答案: A

内部样式表（内嵌样式）

适用场景：单个文档需要应用某特殊样式时

<head>
    <style type="text/css">
        p{
            text-align: right;  /*文本右侧对齐*/
            font-size: 12px;  /*字体大小 12 像素, 注意这里12与像素px之间不要有空格*/
            line-height: 20px;  /*行高 20 像素*/
            text-indent: 2em;  /*首行缩进2个文字大小空间*/
            width: 200px;  /*段落宽度 200 像素*/
            margin: 0 auto;  /*浏览器下居中*/
            margin-bottom: 10px;  /*段落下边距 10 像素*/
        }
    </style>
</head>

内联样式（行内样式）

适用场景：单个元素需要应用某特殊样式时

<body>
    <p style="background-color: #666666">
        this is a sample text
    </p>
</body>

注释的使用

题型：如何在 CSS 文件中插入注释？

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

我的答案: C

注：实际 CSS 中的注释不区分单行与多行，所有被放在 `/` 和 `/` 分隔符之间的文本信息都被称为注释

选择器的使用

题型：如何为所有的 <h1> 元素添加背景颜色？

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

我的答案: B

/*1、通用元素选择器，匹配任何元素*/
* { margin:0; padding:0; }
/*2、标签选择器，匹配所有使用p标签的元素*/
p { font-weight:bold; }
/*3、class选择器，匹配所有class属性中包含info的元素*/
.info { background:#ff0; }
/*4、id选择器，匹配所有id属性等于sample的元素*/
#sample { background:#ff0; }

进阶内容见：CSS 选择器笔记 - 阮一峰的网络日志 (ruanyifeng.com)，总结的很全面了

文本样式的控制

题型 1：在以下的 CSS 中，可使所有 <p> 元素变为粗体的正确语法是？

A <p style="font-size:bold">
B <p style="text-size:bold">
C p {font-weight:bold}
D p {text-size:bold}

我的答案: C

font-weight

默认为 normal，可能值如下：
- bold（粗体）
- bolder（顾名思义，更粗的粗体）
- lighter（细体）
- 100~900 的数值：400=normal，700=bold，粗细程度随数值递增

列表的使用

题型：如何产生带有正方形项目的列表？

A list-type: square
B type: 2
C type: square
D list-style-type: square

我的答案: D

list-style-type

具体的值有很多，常用 disc（默认，实心圆）none（无） decimal（数字） lower-roman（小写罗马数字）

四种定位方式

题型：HTML 元素默认情况下的定位方式为

A static
B relative
C fixed
D absolute

我的答案: A

静态定位 static

相当于没有定位，元素正常出现在文档流中

相对定位 relative

应用此定位的元素会脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动

绝对定位 absolute

相对于 static 定位以外的首个父元素进行定位，脱离正常的文档流，且不再占据文档流中的位置

固定定位 fixed

相对于浏览器窗口进行定位

边框与浮动

题型 1：如何显示这样一个边框：上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素？

A border-width:10px 5px 20px 1px
B border-width:10px 20px 5px 1px
C border-width:5px 20px 10px 1px
D border-width:10px 1px 5px 20px