-
1、CSS 指的是( )
A、 B、 C、 D、 -
2、下列选项中,( )是火狐浏览器前缀。
A、 B、 C、 D、 -
3、下列选项中,( )属性可用来定义内联样式。
A、 B、 C、 D、 -
4、下列选项中,( )的CSS语法是正确的。
A、 B、 C、 D、 -
5、在以下的 HTML 中,哪个是正确引用外部样式表的方法?
A、 B、<link rel="stylesheet" type="text/css" href="mystyle.css">
C、<stylesheet>mystyle.css</stylesheet>
D、
第2关:初识CSS
任务描述
本关任务:在指定标签中添加CSS样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>初识CSS样式</title>
</head>
<body>
<div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;">
<!-- ********* Begin ********* -->
<h1 style="font-family:楷体;text-align:center;line-height:2;">静夜思</h1>
<h2 style="font-family:楷体;text-align:center;"> 床前明月光</h2>
<h2 style="font-family:楷体;text-align:center;"> 疑是地上霜</h2>
<h2 style="font-family:楷体;text-align:center;">举头望明月 </h2>
<h2 style="font-family:楷体;text-align:center;"> 低头思故乡 </h2>
<!-- ********* End ********* -->
</div>
</body>
</html>
第3关:用内嵌式引入CSS样式
任务描述
本关任务:采用内嵌式方法为网页元素添加样式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内嵌CSS样式</title>
<style type="text/css">
/* ********** BEGIN ********** */
body {background-image:url(https://www.educoder.net/api/attachments/1427381);
background-size:cover;
}
/* ********** END ********** */
div {
position:fixed;
left:400px;
top:100px;
color:#ffffff;
font-family:黑体;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1>静夜思</h1>
<h2>床前明月光</h2>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>
</div>
</body>
</html>
第4关:用外链式引入CSS样式
任务描述
本关任务:采用外链式方法为网页元素添加样式。 效果如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外链CSS样式</title>
<!-- ********** BEGIN ********** -->
<link href="https://www.educoder.net/api/attachments/1433016" type="text/css"
rel="stylesheet" >
<!-- body {
background-image:url(https://www.educoder.net/api/attachments/1427381);
background-size:cover;
}
div {
position:fixed;
left:400px;
top:100px;
color:#ffffff;
font-family:黑体;
text-align:center;
} >
<!-- ********** END ********** -->
</head>
<body>
<div>
<h1>静夜思</h1>
<h2>床前明月光</h2>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>
</div>
</body>
</html>