Educoder -- Web程序设计基础2021秋--CSS3语法-CSDN博客

本文链接：https://blog.csdn.net/hannah2233/article/details/121968309

Educoder – Web程序设计基础2021秋 --实训作业全总结
 web程序设计基础R实验报告 2021年 —太原理工大学

文章标题

一、 CSS3选择器-属性选择器

第1关：CSS3-属性选择器相关概念

1、题目

1、以下选项中，属于属性选择器的是（）
C、span[id]{color:red;}

2、样式规则如下：
p[class $= en]{font-weight:bold;}
该样式规则将对选项（）产生效果。
B、<p class="ten">...</p>
3、样式规则如下：
div[name ~= ten]{border:1px solid blue;}
该样式规则将对选项（）产生效果。
A、<div name="ten a1">...</div>

4、样式规则如下：
p[class |= en]{font-size:20px;}
该样式规则将对选项（）产生效果。
D、<p class = "en-able">...</p>

2、知识点补充

1、 attribute 属性中包含 value:

[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2、 attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">[ attribute^=value]
属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">

3、attribute 属性以 value 结尾:

[attribute $= v a l u e] 属性的后几个字母是 v a l u e 就可以，例如： ‘ a [s r c$ =".pdf"]`

第2关：CSS3-属性选择器

编程要求

请在右侧编辑器的Begin - End区域内使用属性选择器对含有title属性的

标签中的文本进行样式设置，具体要求是：

先将文本字号大小值设置为25px
再将文本的水平对齐方式设置为居中。

代码展示

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
         li{list-style:none;}
         /* ********* Begin ******* */
          div[title]{
            font-size: 25px;
            text-align: center;
          }    
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

第3关：CSS3-包含及连字符选择器

编程要求

编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是：

将class属性取值为b的
标签中的文本加粗效果设置为bold
将name属性取值中含有词汇a的
标签添加背景色，颜色值设为pink。
将name属性取值中前缀为b的
标签添加背景色，颜色值设为orange。

代码展示

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
        li{list-style:none;} 
        div[title]{ 
            font-size:25px; 
            text-align:center;
            }  
        /* ********* Begin ******* */ 
        .b{
          font-weight: bold;
        }
        div[name ~= a]{
          background-color: pink;
        }
        div[name^=b]{
          background-color: orange;
        }
	    
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

第4关：CSS3-前缀后缀选择器

变成要求

编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是：

将title属性取值中以n开头的
标签中的文本颜色设置为blue
将title属性取值中含有o的
标签添中的文本颜色设置为red。
将title属性取值中结尾为t的
标签中的文本颜色设置为green。

代码展示

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
        li{list-style:none;} 
        div[title]{ 
            font-size:25px; 
            text-align:center;
            }  
        div[class="b"]{ font-weight:bold; }
	      div[name~="a"]{ background-color:pink; }
        div[name|="b"]{ background-color:orange; }
        /* ********* Begin ******* */ 
        div[title^=n]{
          color: blue;
        }
        div[title*=o]{
          color: red;
        }
        div[title$=t]{
          color: green;
        }
	      
	      
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

二、 CSS3-文本外观样式

第1关：文本外观样式相关的概念

1、下列选项中，用于设置文本行高的属性是（）
B、line-height
2、下列选项中，可以设置文本上划线的属性是（）
D、text-decoration
3、下列选项中，可使文本字母全部改为大写的属性设置是（）
B、text-transform:uppercase

第2关：CSS-文本空间的设置

一、编程要求

补充p标签样式，将标签内文字首行缩进为2em，行高设置为28px
补充类名为blue的样式，将对应文字的颜色添加下划线的效果。

二、代码展示

 <!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<!-- ********* Begin ********* -->
<style type="text/css">
p{ 
	font-size:16px;
	font-family:微软雅黑;
	text-indent: 2em;
	line-height: 28px;
	}
.blue{color:#33F;
     text-decoration: underline;
     
     }
.red{color:#F00;}
.money{font-size:16px;}

</style>
<!-- ********* End ********* -->
</head>
<body>
<img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />

<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>

</body>
</html>

第3关：搜索页面的结构设计

代码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页面</title>
</head>
<body>
<!-- ********* Begin ********* -->
<h2 class="header">
	什么是CSS?<em>—CSS教程</em>
</h2>
<p>
    猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...
</p>
<p>
	<em class="green">www.dreamdu.com/css/wh...</em><em class="gray">百度快照</em><em class="gray">85%好评</em>
</p>
<!-- ********* End ********* -->
</body>
</html>

第4关：搜索页面的样式设计-文本外观样式的应用

代码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页面</title>
<!-- ********* Begin ********* -->
<style type="text/css">
  body{
        font-size: 14px;
      color: #333;
      font-family: 微软雅黑;
      }   
    em{
      font-style: normal;
      }                                    
.header{                
	font-size: 18px;
      color: #D52D2D;
	font-weight: normal;
      text-decoration: underline;
      }
.header em{          
	color: #2525D3;
	text-decoration: underline;
      }
  .red{
      color: #D52D2D;
      }
.green{
      color: #167A16;
      }
 .gray{
	color: #595959;
	text-decoration: underline;
	
      }
                                    
</style>
<!-- ********* End ********* -->
</head>
<body>
<h2 class="header">
	什么是CSS?<em>—CSS教程</em>
</h2>
<p>
    猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...
</p>
<p>
	<em class="green">www.dreamdu.com/css/wh...</em>-<em class="gray">百度快照</em>-<em class="gray">85%好评</em>
</p>
</body>
</html>

三、 CSS3-文本字体样式

第1关：字体样式属性相关的概念

1、下列选项中，用于设置文本字体的属性名是（）
B、font-family
2、下列选项中，用于定义服务器字体的是（）
D、@font-face
3、对段落p中的文本字体、字号及字体风格样式进行综合设置，其样式代码可写为:
p{font:隶书 20px italic;}
A、错误

第2关：美食专栏网页的结构设置

代码展示

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
</head>
<body>
<img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<!-- ********* Begin ********* -->
<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>
<!-- ********* End ********* -->
</body>
</html>

第3关：美食专栏网页的样式设置

代码展示

 <!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<!-- ********* Begin ********* -->
<style type="text/css">
p{
	font-size: 16px;
	font-family: 微软雅黑;
}
.blue{
	color: #33F;
}
.red{
	color: #F00;
}
.money {
	font-size:16px;
}


</style>
<!-- ********* End ********* -->
</head>
<body>
<img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>
</body>
</html>

四、 CSS样式规则

第1关：CSS基础知识

1、CSS 指的是（ )
B、Cascading Style Sheets
2、下列选项中，（）是火狐浏览器前缀。
D、-moz-

3、下列选项中，（）属性可用来定义内联样式。
C、style
4/ 下列选项中，（）的CSS语法是正确的。
A、body{color:black;}
5、在以下的 HTML 中，哪个是正确引用外部样式表的方法？
B、<link rel="stylesheet" type="text/css" href="mystyle.css">

第2关：初识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"></link>

     <!-- ********** END ********** -->
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>

五、 CSS3选择器-组合选择器

第1关：组合选择器相关的概念

1、当几个元素样式属性一样时，可以共同调用一个样式声明，元素之间用逗号隔开
A、
正确
2、阅读下面的HTML代码

<div>
  <em>大家好</em>
  <p>今天天气很好</p>
  <p>适合去郊游</p>
</div>

若对<em>标签和<p>标签中的文字设置同样的字号大小，下面的选项正确的是（）
C、em , p{font-size:14px}
3、阅读下面的HTML代码

<div>
  <em>大家好</em>
  <p>今天天气很好</p>
  <p>适合去郊游</p>
</div>

若对<div>标签中<p>标签的文字设置同样的颜色，下面的选项正确的是（）
A、div p{color:red;}

第2关：群组选择器

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>群组选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
   h1,h2,h3{
       color: green;
   }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

第3关：后代选择器

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后代选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
        div p{
            color:blue;
            font-size: 16px;
        }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是蓝色，我的字体大小是16px</p>
</div>
</body>
</html>

第4关：子元素选择器

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>子元素选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
        div>p{
            color: green;
            font-size: 20px;
        }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是绿色，我的字体大小是20px</p>
</div>
</body>
</html>

第5关：相邻兄弟选择器

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>相邻兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
      h1+ p{
          background-color: red; 
      }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

第6关：普通兄弟选择器

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>普通兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
       h1 ~ p {
           color: blue;
           font-size: 36px;
       }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

六、CSS3选择器-基础选择器

第1关：CSS基础选择器相关概念

1、id选择器使用（）进行标识，后面紧跟id名
D、#

2、类选择器使用（）进行标识，后面紧跟class名。 C、.

3、CSS选择器的优先级从高到低分别为，通用选择器、标签选择器、类选择器、ID选择器。
B、错

第2关：通用选择器

代码展示

 <!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>
   <!--------- Begin-------->
   <style type="text/css">
   
*{
  font-size: 100px;
  color: #D33E2A;
}
   
   </style>
   <!--------- End-------->
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>

第3关：标签选择器

代码展示

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>  
   <!--------- Begin-------->
   <style>
strong{
  font-size: 100px;
  color: #D33E2A;
}
   </style>
   <!--------- End-------->
   
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>

第4关：文字Google结构设计

代码展示

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
</head>
<body>
<!--------- Begin-------->
 <strong class="blue">G</strong>
 <strong class="red">o</strong>
 <strong id="orange">o</strong>
 <strong class="blue">g</strong>
 <strong id="green">l</strong>
 <strong class="red">e</strong>
 <!--------- End-------->
</body>
</html>

第5关

代码展示

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>

<style type="text/css">
<!--------- Begin-------->
strong{ font-size:100px;}
.blue {
    color: #2B75F5;
}
.red {
    color: #D33E2A;
}
#orange {
    color:#FFC609;
}
#green {
    color: #00A45D;
}
<!--------- End-------->
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>

七、 CSS3背景样式

第1关：CSS背景相关的概念

1、下列选项中，可用于设置背景颜色的属性是（）
D、background-color

2、将背景的绘制区设置到内容区，应使用background-clip属性中的（）值。

A、content-box

3、在CSS3背景图属性中，可以设置背景图的平铺是（）。
C、background-repeat
4、在CSS3新增的background-size属性中，（）是参考父元素宽高来设置图像宽度和高度的。
A、50% 50%
5、CSS样式background-position:-5px 10px代表的意义是（）。
D、背景图片向左偏移5px,向下偏移10px

第2关：CSS-背景色的设置

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
               text-align:center;
             }	
        #p1{font-size:13px;
                color:#979797;
                text-align:center;
             }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{
        /* ********* Begin ********* */	
        background-color: #add;
        
        /* ********* End ********* */
            }
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>

第3关：CSS-背景图的设置

代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
           text-align:center;
          }	
        #p1{font-size:13px;
            color:#979797;
            text-align:center;
          }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{background-color:#add;}
        .backgroundImage{
	        width:360px;
	        height:240px;
            overflow:scroll;
	        padding:30px;
	        border:3px solid #30F;
          /* ********* Begin ********* */
            background-image:	url(https://www.educoder.net/api/attachments/2478800);
            background-attachment:scroll;
            background-size: cover;
            background-position: -260px 0px;    
          /* ********* End ********* */          
	     }
 
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>