【Educoder】CSS答案(CSS——基础知识、CSS——基础选择器、CSS——文本与字体样式、CSS——背景样式、CSS——表格样式)

最新推荐文章于 2023-01-19 20:59:17 发布

eeenkidu

最新推荐文章于 2023-01-19 20:59:17 发布

阅读量7.6k

点赞数 16

分类专栏： Educoder 文章标签： css educoder

本文链接：https://blog.csdn.net/qq_37746855/article/details/124169729

版权

Educoder 专栏收录该内容

5 篇文章 44 订阅

订阅专栏

CSS——基础知识

初识CSS：丰富多彩的网页样式

编程要求
在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：

修改h1标题的text-align为居中显示，字体大小为40px；
p段落的颜色为灰色:grey,字体大小为18px。

<!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;
        /************ END ********** */
        color: #62A8CB;
      }

      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>

CSS样式引入方式

编程要求

选择index.html文件，完成：
1. 引入外部样式表 style.css，引入的路径为step2/CSS/style.css；(注意路径中CSS是大写)
2. 设置 h1 元素内联样式的字体颜色(color)为cornflowerblue；
3. 修改 samll 元素内联样式：设置字体大小(font-size)为10px; 颜色(color)为lightslategray。
选择style.css 文件，完成：
1. 设置 p 元素的 font-weight 为粗体(bold)；

index.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;
		}

		p {
			font-weight: bold;
		}
	</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="color:lightslategray;font-size:10px;">&copy; Walt Whitman</small></p>

		<!-- ********** END ********** -->
	</div>
</body>

</html>

style.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 ********** */
}

CSS——基础选择器

CSS 元素选择器

编程要求
使用元素选择器修改页面样式，要求如下：

设定html元素的background-color为#F0F0F0；
设定header元素的padding为40px，background-color为白色；
添加footer元素的font-size为0.6em，字体颜色为灰色(grey)。

<!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;
      color:grey;
	    font-size:0.6em;
    }
    /* ********** 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>

CSS 类选择器

编程要求
使用类选择器修改页面样式，具体要求入下：

给第43行的div元素添加名字为newsSection的类；
在第27行添加newsSection类的样式：外边距为20（margin-top: 20px;）内边距为20（padding: 20px;）和背景颜色白色（background-color: white;）。

<!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>

CSS id选择器

编程要求
为header元素添加名为menu的id；

使用id选择器，设置精选(#chosen)标题为红色(red)，时事( #news)标题为蓝色(blue)，财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green)，生活(#life)标题为橘色(orange)。

<!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>ID选择器</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 ********** */
   #chosen{
	   color:red;
   }
   #news{
	   color:blue;
   } 
   #finance{
	   color:olive;
   } 
   #think{
	   color:green;
   } 
   #life{
	   color:orange;
   } 
   
    /*选择menu元素下的li子元素*/
    #menu li {
      float: left;
      width: 70px;
      font-size: 1.2em;
      font-weight: lighter;
    }
    /*选择menu元素下的li子元素和li下得a子元素*/
    #menu li, li a {
      list-style: none;
      text-decoration: none;
    }
    /* ********** 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——文本与字体样式

字体颜色、类型与大小

编程要求
学习了字体的颜色、大小和类型之后，让我们来使用CSS丰富九寨沟介绍页面吧，请在右侧的编辑框中修改style.css文件。
设置 h1， h2 的font-family 为： PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
字体大小：
使用em的方式设置（需要转换px与em单位）：

h1元素为 35px 的字体大小；
h2元素为 28px 的字体大小；
h3元素为 20px 的字体大小；
.intro .subhead （intro类下的subhead子类）为 18px 的字体大小。

字体颜色：

设置h2元素的字体颜色为：#7d717c；
设置h3元素的字体颜色为：green；
设置 .intro 类元素的字体颜色为 #fefefe。

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;
    /* ********** END ************/
}

h2 {
    background-color: #eaebef;
    /* ********** BEGIN ***********/
font-size: 1.75em;
    color: #7d717c;
    /* ********** 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;
}

字体粗细与风格

编程要求
学习了字体的风格和粗细之后，让我们来使用这些样式使九寨沟介绍页面细节更完善吧，请在再右侧的编辑框中修改style.css文件。

同时设置 h1, h2 的font-weight为normal；
设置footer的字体粗细为light；显示效果为斜体(italic)。

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;
}

文本装饰与文本布局

编程要求
学习完本关的知识，现在到你实践巩固的时候了，来完成下面的任务吧。请在右侧的编辑框中修改style.css文件。

同时设置 h1, h2 文字居中对齐；
设置footer, photos居中对齐；
设置h3文字左对齐；
设置a:link元素的text-decoration属性为none；
设置a:hover元素的text-decoration属性为underline。

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 {
    text-align: justify;
}

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——背景样式

背景颜色

编程要求
学会了基本设置背景颜色的方式，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成如下要求：

设置body的背景颜色(background)为象牙色(ivory)；
设置段落p的背景颜色(background)为浅蓝色(lightblue)。

/* ********** BEGIN ********** */
body{
    background-color:ivory;
}      
/* ********** END ********** */

h1 {
    font-size: 40px;
    text-align: center;
}

p {
    font-size: 18px;
    color: grey;
    /* ********** BEGIN ********** */
    background-color:lightblue;
    /* ********** END ********** */
}

背景图片

任务要求
请在右侧的编辑框中修改style.css文件，完成如下要求：

设置背景图片，图标url地址为https://www.educoder.net/attachments/download/211106；

body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/
	background-image: url("https://www.educoder.net/attachments/download/211106")  
    /* ********** END ********** */
}

div {
    width: 90%;
    height: 100%;
    margin: auto;
}

背景定位与背景关联

编程要求
请在右侧的编辑框中修改style.css文件，以简写背景的方式，设置背景图片，满足如下要求：

图片地址: https://www.educoder.net/attachments/download/211104；
图片模式:no-repeat；
背景图片定位: right top；
设置背景关联: fixed。

 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——表格样式

表格边框

编程要求
学会了基本表格样式修改，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成index.html中表格样式。要求如下：

设置表格为折叠边框；
设置 Table属性边框为2px粗的黑色(black)实线；
设置th属性边框为1px粗的灰色(grey)实线；
设置td属性边框为1px粗的灰色(grey)点线。

注意：本关中，使用单词的方式指定颜色。

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 ********** */
}

表格颜色、文字与大小

任务要求
学会了基本表格样式修改，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成index.html中表格的样式。要求如下：

设置标题(caption)字体为20px大小的粗体，高度为40px；
设置th、td 共同属性。单元格大小的高度为50px，宽度为100px；字体样式设置为居中；
修改th边框为白色；
设置th背景色为lightseagreen，设置th字体颜色为白色。

table {
    border-collapse: collapse;
    border: 2px solid black;
}

caption {
    /* ********** BEGIN ********** */
	font-size:20px;
	height: 40px;
	font-weight: bold;
    /* ********** END ********** */
}

th,
td {
    /* ********** BEGIN ********** */
    height: 50px;
    width: 100px;
    text-align: center; 
    /* ********** END ********** */
}

th {
    /* ********** BEGIN ********** */
    border: 1px solid white;
    color: white;
    background-color:lightseagreen;    /*表格头部背景颜色*/  
    /* ********** END ********** */
}

td {
    border: 1px solid grey;
}

eeenkidu

关注

16
点赞
踩
102

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Educoder】CSS答案(CSS——基础知识、CSS——基础选择器、CSS——文本与字体样式、CSS——背景样式、CSS——表格样式)

文章目录CSS——基础知识初识CSS：丰富多彩的网页样式CSS样式引入方式index.htmlstyle.cssCSS——基础选择器CSS 元素选择器CSS 类选择器CSS id选择器CSS——文本与字体样式字体颜色、类型与大小字体粗细与风格文本装饰与文本布局CSS——背景样式背景颜色背景图片背景定位与背景关联CSS——表格样式表格边框表格颜色、文字与大小CSS——基础知识初识CSS：丰富多彩的网页样式编程要求在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其C
复制链接

扫一扫