目录
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
```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
<!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;
}