Educoder -- Web程序设计基础2021秋--CSS3语法_hannah2233

网络 02-07 2242

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

文章标题一、 CSS3选择器-属性选择器第1关：CSS3-属性选择器相关概念1、题目2、知识点补充第2关：CSS3-属性选择器编程要求代码展示第3关：CSS3-包含及连字符选择器编程要求代码展示第4关：CSS3-前缀后缀选择器变成要求代码展示二、 CSS3-文本外观样式第1关：文本外观样式相关的概念第2关：CSS-文本空间的设置一、编程要求二、代码展示第3关：搜索页面的结构设计代码展示第4关：搜索页面的样式设计-文本外观样式的应用代码展示三、 CSS3-文本字体样式第1关：字体样式属性相关的概念第2关：美食专栏网页的结构设置代码展示第3关：美食专栏网页的样式设置代码展示四、 CSS样式规则第1关：CSS基础知识第2关：初识CSS代码展示第3关：用内嵌式引入CSS样式代码展示第4关：用外链式引入CSS样式代码展示五、 CSS3选择器-组合选择器第1关：组合选择器相关的概念第2关：群组选择器代码展示第3关：后代选择器代码展示第4关：子元素选择器代码展示第5关：相邻兄弟选择器代码展示第6关：普通兄弟选择器代码展示六、CSS3选择器-基础选择器第1关：CSS基础选择器相关概念第2关：通用选择器代码展示第3关：标签选择器代码展示第4关：文字Google结构设计代码展示第5关代码展示七、 CSS3背景样式第1关：CSS背景相关的概念第2关：CSS-背景色的设置代码展示第3关：CSS-背景图的设置代码展示

一、 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 =value] 属性的后几个字母是 value 就可以，例如：`a[src =value]属性的后几个字母是value就可以，例如：‘a[src=".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>  <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>  </head> <body> <img src="https://·/css/wh...</em><em class="gray">百度快照</em><em class="gray">85%好评</em> </p>  </body> </html> 第4关：搜索页面的样式设计-文本外观样式的应用代码展示 <!doctype html> <html> <head> <meta charset="utf-8"> <title>搜索页面</title>  <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>  </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">·/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://`/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>  <style type="text/css"> p{ font-size: 16px; font-family: 微软雅黑; } .blue{ color: #33F; } .red{ color: #F00; } .money { font-size:16px; } </style>  </head> <body> <img src="https://`/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://`/api/attachments/1426624);width:360px;height:260px;">  <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>  </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://`/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>  <link href="https://`/api/attachments/1433016" type="text/css" rel="stylesheet"></link>  </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>  <style type="text/css"> h1,h2,h3{ color: green; } </style>  </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> </body> </html> 第3关：后代选择器代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>后代选择器</title>  <style type="text/css"> div p{ color:blue; font-size: 16px; } </style>  </head> <body> <div> <p>我的颜色是蓝色，我的字体大小是16px</p> </div> </body> </html> 第4关：子元素选择器代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>子元素选择器</title>  <style type="text/css"> div>p{ color: green; font-size: 20px; } </style>  </head> <body> <div> <p>我的颜色是绿色，我的字体大小是20px</p> </div> </body> </html> 第5关：相邻兄弟选择器代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>相邻兄弟选择器</title>  <style type="text/css"> h1+ p{ background-color: red; } </style>  </head> <body> <div> <h1>我是兄长</h1> <p>我是弟弟</p> <p>我是小弟</p> </div> </body> </html> 第6关：普通兄弟选择器代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>普通兄弟选择器</title>  <style type="text/css"> h1 ~ p { color: blue; font-size: 36px; } </style>  </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"/>  <style type="text/css"> *{ font-size: 100px; color: #D33E2A; } </style>  </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"/>  <style> strong{ font-size: 100px; color: #D33E2A; } </style>  </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>  <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> 第5关代码展示 <!doctype html> <html><head> <meta charset="utf-8"> <title>文字Logo</title> <style type="text/css">  strong{ font-size:100px;} .blue { color: #2B75F5; } .red { color: #D33E2A; } #orange { color:#FFC609; } #green { color: #00A45D; }  </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://`/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>