CSS--头歌（educoder）实训作业题目及答案
目录
CSS——基础知识
第1关: 初识CSS：丰富多彩的网页样式
第2关: CSS样式引入方式
CSS——基础选择器
第1关: CSS 元素选择器
第2关: CSS 类选择器
第3关: CSS id选择器
CSS——文本与字体样式
第1关: 字体颜色、类型与大小
第2关: 字体粗细与风格
第3关: 文本装饰与文本布局
CSS——背景样式
第1关: 背景颜色
第2关: 背景图片
第3关: 背景定位与背景关联
CSS——表格样式
第1关: 表格边框
第2关: 表格颜色、文字与大小
CSS从入门到精通——基础知识
第1关: 初识CSS：丰富多彩的网页样式
Hello World
CSS让网页样式更丰富
使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。
第2关: CSS样式引入方式
style.css
```CSS
body {
font-family: 'Times New Roman', Times, serif;
}
div {
border: 1px solid #000;
overflow: hidden;
padding: 0 1em .25em;
}
h1 {
color: green;
}
p {
/* ********** BEGIN ********** */
font-weight: bold;
/* ********** END ********** */
}
```
index.html
```html
O Captain! My Captain!
O Captain! My Captain!
O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the steady keel, the vessel grim and daring;
© Walt Whitman
CSS从入门到精通——基础选择器
第1关: CSS 元素选择器
类选择器
第2关: CSS 类选择器
类选择器
第3关: CSS id选择器
类选择器
CSS从入门到精通——文本与字体样式
第1关: 字体颜色、类型与大小
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
/* ********** BEGIN ***********/
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/* ********** END ***********/
}
h1 {
/* ********** BEGIN ***********/
font-size: 2.1875em;
/* 35px/16px */
/* ********** END ************/
}
h2 {
background-color: #eaebef;
/* ********** BEGIN ***********/
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
/* ********** END ************/
}
h3 {
background-color: white;
/* ********** BEGIN ***********/
font-size: 1.25em;
color: green;
/* ********** END ************/
padding-left: 10px;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
footer {
margin: 10px auto;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* ********** BEGIN ***********/
color: #fefefe;
/* ********** END ************/
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* ********** BEGIN ***********/
font-size: 1.125em;
/* ********** END ************/
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
a:link {
color: #e10000;
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}
第2关: 字体粗细与风格
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
/* 设置h1, h2 的font-family*/
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/* ********** BEGIN ***********/
font-weight: normal;
/* ********** END ***********/
}
h1 {
/* 设置h1元素为 35px 的字体大小 */
font-size: 2.1875em;
/* 35px/16px */
}
h2 {
background-color: #eaebef;
/* 设置h2元素的字体颜色为：#7d717c */
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
}
h3 {
background-color: white;
/* 使用em的方式设置h3元素为 20px 的字体大小 */
font-size: 1.25em;
/* 设置h3元素的字体颜色为：green */
color: green;
padding-left: 10px;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
/* 子选择器 */
em,
a:link,
.intro .subhead {
font-weight: bold;
}
footer {
/* ********** BEGIN ***********/
font-weight: light;
font-style: italic;
/* ********** END ***********/
margin: 10px auto;
}
footer a {
font-style: normal;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* 设置 .intro 类元素的字体颜色为 #fefefe */
color: #fefefe;
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
font-size: 1.125em;
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
a:link {
/* 设置 a:link 元素的字体颜色为 #b44f4f */
color: #e10000;
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}第3关: 文本装饰与文本布局
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
font-weight: normal;
/*********** BEGIN ***********/
text-align: center;
/************ END ************/
}
h1 {
/* 设置h1元素为 35px 的字体大小 */
font-size: 2.1875em;
/* 35px/16px */
}
h2 {
background-color: #eaebef;
/* 设置h2元素的字体颜色为：#7d717c */
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
}
h3 {
background-color: white;
/* 使用em的方式设置h3元素为 20px 的字体大小 */
font-size: 1.25em;
/* 设置h3元素的字体颜色为：green */
color: green;
padding-left: 10px;
/*********** BEGIN ***********/
text-align: left;
/************ END ************/
}
p {
/*********** BEGIN ***********/
text-align: justify;
/************ END ************/
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
/* 子选择器 */
em,
a:link,
.intro .subhead {
font-weight: bold;
}
footer {
font-weight: light;
font-style: italic;
/* ********** BEGIN ***********/
text-align: center;
/* ********** END ***********/
margin: 10px auto;
}
footer a {
font-style: normal;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* 设置 .intro 类元素的字体颜色为 #fefefe */
color: #fefefe;
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
font-size: 1.125em;
text-align: center;
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
.photos {
/*********** BEGIN ***********/
text-align: center;
/*********** END *************/
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
/* 默认显示样式 */
a:link {
color: #e10000;
/*********** BEGIN ***********/
text-decoration: none;
/*********** END *************/
}
a:visited {
color: #b44f4f;
}
/* 鼠标放在上面的显示样式 */
a:hover {
color: #f00;
/*********** BEGIN ***********/
text-decoration: underline;
/*********** END *************/
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}CSS从入门到精通——背景样式
第1关: 背景颜色
/* ********** BEGIN ********** */
body {
background-color: ivory;
}
/* ********** END ********** */
h1 {
font-size: 40px;
text-align: center;
}
p {
font-size: 18px;
color:grey;
/* ********** BEGIN ********** */
background-color: lightblue;
/* ********** END ********** */
}第2关: 背景图片
body {
/* ********** BEGIN ********** */
/*设置背景图片*/
background-image: url("https://www.educoder.net/attachments/download/211106")
/*设置背景图片模式*/
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}第3关: 背景定位与背景关联
body {
margin-right: 200px;
/* ********** BEGIN ********** */
/*设置背景图片*/
background: url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top;
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}CSS入门到精通——表格样式
第1关: 表格边框
table {
/* ********** BEGIN ********** */
border-collapse: collapse;
border: 2px solid black;
/* ********** END ********** */
}
th, td {
padding: .5em .75em;
}
th {
/* ********** BEGIN ********** */
border: 1px solid grey;
/* ********** END ********** */
}
td {
/* ********** BEGIN ********** */
border: 1px dotted grey ;
/* ********** END ********** */
}第2关: 表格颜色、文字与大小
table {
border-collapse: collapse;
border: 2px solid black;
}
caption {
/* ********** BEGIN ********** */
font-weight: bold;
font-size: 20px;
height: 40px;
/* ********** END ********** */
}
th,
td {
/* ********** BEGIN ********** */
width: 100px;
height: 50px;
text-align: center;
/* ********** END ********** */
}
th {
/* ********** BEGIN ********** */
border: 1px solid white;
background: lightseagreen;
color: white;
/* ********** END ********** */
}
td {
border: 1px solid grey;
}