CSS--头歌（educoder）实训作业题目及答案
时间：2024-04-04 20:25:43 来源：网络cs 作者：胡椒 栏目：跨境风云 阅读：
阅读本书更多章节>>>>
目录
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：丰富多彩的网页样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> body { text-align: center; } h1 { /* ********** BEGIN ********** */ text-align: center; font-size: 40px; color: #62A8CB; /* ********** END ********** */ } img { height: 250px; } p { /* ********** BEGIN ********** */ color: grey; font-size: 18px; /* ********** END ********** */ } </style> </head> <body> <h1>CSS让网页样式更丰富</h1> <img src="https://www.educoder.net/attachments/download/189467"> <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p> </body></html>第2关: CSS样式引入方式
style.css```CSSbody { 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<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>O Captain! My Captain!</title><!-- ********** BEGIN ********** --> <link rel="stylesheet" href="step2/CSS/style.css"><!-- ********** END ********** --> <style type="text/css"> h1 { color:darkblue; } img { float: left; margin-right: 1em; } </style></head><body> <div><!-- ********** BEGIN ********** --> <h1 style="color:cornflowerblue">O Captain! My Captain!</h1> <!-- ********** END ********** --> <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>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 <em>steady keel</em>, the vessel grim and daring;</p><!-- ********** BEGIN ********** --> <p><small style="font-size:10px;color:lightslategray;">© Walt Whitman</small></p><!-- ********** END ********** --> </div></body></html>CSS从入门到精通——基础选择器
第1关: 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>类选择器</title> <style type="text/css">/* ********** BEGIN ********** */ /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; }/* ********** END ********** */ </style></head><body><div> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div> <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>第2关: 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>类选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; }/* ********** BEGIN ********** */.newsSection{ margin-top: 20px; padding: 20px; background-color: white; } /* ********** END ********** */ </style></head><body><div class="main"> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <!-- ********** BEGIN ********** --> <div class = "newsSection"> <!-- ********** END ********** --> <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>第3关: CSS id选择器
<!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>类选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } .newsSection { margin-top: 20px; padding: 20px; background-color: white; }/* ********** BEIGN ********** */ /*选择menu元素下的li子元素*/ #menu li { float: left; width: 70px; font-size: 1.2em; font-weight: lighter; } #menu li, li a { list-style: none; text-decoration: none; } #chosen { color: red; } #news { color:blue; } #finance { color:olive; } #think { color:green; } #life { color:orange; } /* ********** END ********** */ </style></head><body><div class="main"> <!-- ********** BEGIN ********** --> <header id="menu"> <!-- ********** END ********** --> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div class="newsSection"> <section> <h2 id="chosen">精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2 id="news">时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2 id="finance">财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2 id="think">思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2 id="life">生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer></div></body></html>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;}本文链接：https://www.kjpai.cn/fengyun/2024-04-04/154174.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
下一篇：返回列表