学习CSS选择器的使用方法。
【实验内容】&【实验截图】
1、HSL颜色实验。利用http://172.18.187.11:8080/lab/html5/colorHSL.html滑动hue得到颜色相似的圆形，然后调整saturation、lightness、alpha后，截取圆形并填上hsla值和RGB值：
取色表
说明hue的取值特点：
hue为色相，它的范围为[0, 360),分别代表了大致红橙黄绿青蓝紫极其之间的颜色，下面为具体分布：
0度:红色，RGB:(255,0,0), 255:R, 0:B，G+
60度:黄色，RGB:(255,255,0)，255:G, 0:B, R-
120度:绿色，RGB:(0,255,0)，255:G, 0:R，B+
180度:青色，RGB:(0,255,255)，255:B, 0:R，G-
240度:蓝色，RGB:(0,0,255)，255:B, 0:G，R+
300度:紫色，RGB:(255,0,255)，255:R, 0:G，B-
360度:红色，RGB:(255,0,0)，255:R, 0:B，G+
而saturation称为饱和度，即颜色的纯度：0%-全灰100%-纯色
Lightness代表亮度，0%是全黑，100%是全白
Alpha代表透明度，取值从0到1，0是完全透明，0.5是半透明，1是完全不透明。
RGB中的值则代表三原色红绿蓝所占的比例。
2、(circle.html)分别采用径向渐变、线性渐变、半透明双重阴影实现下面三个类似的圆形：
渐变的学习
样式表：
div {
border: solid 1px black;
width: 80px;
height: 80px;
float:left;
margin:20px;
border-radius: 40px/40px;
}
#test1 {
background:radial-gradient(80px 80px at 20px 40px, white,blue 80%);
}
#test2 {
background: linear-gradient(to right, white,blue 50%);
}
#test3 {
background:radial-gradient(80px 80px at 20px 20px, hsla(340,100%,50%,1) 15%,hsla(340,92%,32%,1) 60%);
box-shadow:10px 10px 30px rgba(0, 0, 0, 0.5);
}
3、通过设置样式实现类似下图的网页（paragraph.html）：
人间词话七则
样式表：
html {
font-size: 20px;
font-family:"宋体";
}
p{
width: 750px;
/*border: 1px solid green;*/
text-indent: 3em;
text-align: left;
padding: 10px;
/*margin-bottom: 20px;*/
margin:0 auto;
}
h1{text-align: center;}
h2{text-align: center;}
4、用white-space实现类似下图的页面（white-space.html）：
诗句
样式表：
p{white-space: pre-wrap;
text-align:center;
}
h1{text-align:center;}
5、用盒模型实现类似下图的页面（box.html）：
盒子模型
样式：
html {font-size: 20px;font-family:"宋体";}
h1{text-align:center;}
div{
margin-top:20px;
margin-bottom:10px;
margin-left:700px;
margin-right:700px;
border-top: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
border-bottom: 3px solid black;
padding-top:0px;
padding-bottom:10px;
padding-left:20px;
padding-right:20px;
}
p:nth-of-type(1){
border:3px solid blue;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}
p:nth-of-type(2){
border:3px dashed red;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}
p:nth-of-type(3){
border:3px dashed red;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}
6、通过设置样式类似下图的网页（font.html）
字体
样式表：
html{font-size: 32px;}
#test1 span:nth-child(1)
{
font-size:120%;
color:rgb(255,0,0);
font-family: 隶书;
}
#test1 span:nth-child(2)
{
font-size:1.2em;
color:rgb(0,180,0);
font-family: 楷体;
}
#test1 span:nth-child(3)
{
font-size:1.2rem;
color:rgb(28,28,255);
font-family: 华文仿宋;
}
#test1 span:nth-child(4)
{
font-size:xx-large;
color:rgb(162,162,162);
font-family:幼圆;
}
#test2 span:nth-child(1)
{
font-style:italic;
color:rgb(74,165,74);
text-decoration:line-through;
}
#test2 span:nth-child(2)
{
font-weight:bold;
color:rgb(138,21,138);
text-decoration:overline;
}
#test2 span:nth-child(3)
{
font-weight:700;
color:rgb(180,77,77);
text-decoration:underline;
}
#test3 span:nth-child(1)
{
color:rgb(19,135,19);
text-shadow:5px 5px 3px rgb(181,181,181);
}
#test3 span:nth-child(2)
{
color:rgb(255,0,0);
text-shadow:5px 5px 3px rgb(181,181,181),-4px -4px 4px rgb(230,0,0);
}
#test3 span:nth-child(3)
{
color:rgb(174,64,64);
letter-spacing:2em;
}
7、为网页overflow.html的前6个p元素设置样式得到类似下图的网页：
增加的前6个p元素的styles属性值分别是：
p:nth-of-type(1){
border:solid 1pxblue;overflow:hidden;width: 40%;white-space:pre-wrap;height:330px;
}
p:nth-of-type(2){
border:solid 1pxblue;width:40%;white-space:nowrap;overflow-x:scroll;height:330px;
}
p:nth-of-type(3){
border:solid 1pxblue;width:40%;overflow-y:scroll;height:200px;
}
p:nth-of-type(4){
border:solid 1pxblue;width:40%;overflow:scroll;height:200px;
}
p:nth-of-type(5){
border:solid 1pxblue;width:40%;overflow:visible;height:150px;
}
p:nth-of-type(6){
border:solid 1pxblue;width:40%;overflow:auto;height:100px;
}
8、把hide.html中的p元素(id=test)分别加上display:none、visibility:hidden后，用浏览器运行并分别保存网页（hide1.html，hide2.html）和截屏。
visibility:hidden
display:none
说明上面两个属性的区别：
有两种隐藏内容的方式，一种是display:none，一种是visibility:hidden。区别是：display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉消失了，可以理解为透明度为0的效果，在文档流中占位，即挤占该元素原来的空间，且浏览器会解析该元素。
9、设置p和div的样式得到类似下图的两个网页（参考网页：background.html;图像:bk1.jpg，bk2.jpg）：
样式（background1.html）：
h1{text-align:center; text-shadow:4px 4px 6px grey;}
p {
text-indent:2em;
}
样式（background2.html）：
h1{text-align:center;text-shadow:4px 4px 5px grey;}
p{
text-indent:2em;
}
10、自己设计一个网页(可以利用box-sizing.html进行修改)，通过设置样式观察box-sizing的两个取值(content-box，border-box)的不同。
[图片上传中。。。（13）]
整个网页源码（box-sizing.html）：
<!DOCTYPE HTML>
<html>
<head>
<title>font</title>
<style>
html {
font-size: 18px;
}
div {
margin: 10px 5px;
}
h1 {
text-align:center;
text-shadow:4px 4px 5px grey;
}
p {
text-indent:2em;
/*box-sizing:content-box;*/
box-sizing:border-box;
border:solid 1px blue;
margin:10%;
padding:10%;
width:500px;
}
</style>
</head>
<body>
<div>
<h1>王国维</h1>
<p>
语言大师王力曾这样描述王国维：“留着辫子，戴着白色棉布瓜皮小帽，穿长袍，勒一条粗布腰带，
一个典型的冬烘先生的模样。”鲁迅先生亦曰：“要谈国学，王国维才算一个研究国学的人物。”同
时他又恨铁不成钢地说：“老实得像火腿一样。”
</p>
<p>然而，就是这样的一位“冬烘先生”，却在短短的二十余年时间里，先后在哲学、史学、美学、文学、
伦理学、文字学、考古学、心理学、词学、曲学、红学、金石学等多个学科领域取得一流的成就，一举
奠定了中国现代学术的基石，成为中国乃至东亚的顶级学术大师。王国维生来就是做学问的料。他天性
忧郁，羸弱多病，少时即沉湎书海。早年留学日本时，一天到晚都在看书、写东西，最要命的是随地吐痰。
他的屋子里除了书，什么也没有。一次，朋友要借便所一用，他大方地指着园子说：“请便。”
</p>
<p>清朝灭亡后，全中国仅剩下两根著名辫子，一根在北大，一根在清华。北大的是辜鸿铭，清华的是王国维。
清廷在的时候，王国维曾将辫子剪去，但清廷亡后，王国维却将辫子留了起来，而且是永远地留着。一次，夫
人替他梳辫子时问他：“都这时候了，你还留这东西做什么？”王国维一本正经地作答：“正是到了这时候了，
我还剪它做什么？”
</p>
</div>
</body>
</html>
说明不同点：
如果希望width包含盒子的宽度 ，就要采用box-sizing。如果box-sizing取值border-box，则width就是盒子的宽度（不含margin）；如果设置为content-box，则width就仅仅是段落内容的宽度。可以直观地从上面两张截图可以看出，Border-box整个内容的宽度比Content-box的宽度小很多，这就是box-sizing属性在起作用。
11、(awe1.html，awe2.html)实现Twitter图标。
说明：
（a）awesome字体库( http://172.18.187.11:8080/lab/html5/fonts )可以通过外部css文件http://172.18.187.11:8080/lab/html5/css/font-awesome.css引入。
（b）需要的图标在http://fontawesome.io/icons/中查找（包含字体库地址）。
（c）例子参考：http://fontawesome.io/examples/
要求：
（1）显示6级苹果图标：
苹果图标
awe1.html的完整内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Twitter Icons</title>
<link rel="stylesheet" type="text/css"
href="css/font-awesome.css" />
<style>
.fa-6x { font-size: 6em; }
.fa-7x { font-size: 7em; }
</style>
</head>
<body>
<i class="fa fa-apple fa-6x" aria-hidden="true"></i>
<i class="fa fa-apple fa-5x" aria-hidden="true"></i>
<i class="fa fa-apple fa-4x" aria-hidden="true"></i>
<i class="fa fa-apple fa-3x" aria-hidden="true"></i>
<i class="fa fa-apple fa-2x" aria-hidden="true"></i>
<i class="fa fa-apple" aria-hidden="true"></i>
</body>
</html>
上面的图标如何可以任意调试大小？
先在body中添加图标的时候在class中规定好一种属性，然后在样式中添加相应的属性选择器，再利用font-size即可保证相应的图标大小任意改变。
由于字体库中自带2x~5x的大小，利用.fa-6x { font-size: 6em; }语句设置了一个相对于原始图标6倍大小的图标。
11.实现类似下面的设计（要求绿色块级元素在浏览器窗口变宽变窄时保持水平对中）：
awe2.html的完整内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Twitter Icons</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<style>
html {
font-size: 20px;
}
div{
padding:0 2em 2em 2em;
width :13em;
height:4em;
margin:auto;
margin-top:5%;
border:solid 3px gray;
background-color:rgb(181,253,181);
box-shadow:0.1em 0.1em 0.1em gray;
border-radius:0.4em;
}
input {
border:hidden 1px gray;
width: 14em;
height: 1em;
background-color: rgb(181,253,181);
border-radius: 0.3rem;
box-shadow:0.2em 0.2em 0.1em gray,0.1em -0.1em 0.1em gray;
}
.fa {
width: 1em;
margin: auto;
margin-left: 0.5em;
color:blue;
}
</style>
</head>
<body>
<div>
<p class="field">
<i class="fa fa-user" aria-hidden="true"></i>
<input type="text" name="login" placeholder=" 用户名" />
</p>
<p class="field">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" name="password" placeholder=" 密码" />
</p>
</div>
</body>
</html>
【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√] 7[√] 8[√] 9[√] 10[√] 11[ √]
【实验体会】
fontawesome字体库上有那么多简约精致的图标与字体可以使用，仿佛发现了神器啊！！
每次做实验，都觉得自己理论学的不好，上课听懂了实验也不知道该如何下手。不能灵活应用老师上课文档中提到的相关属性。我最感兴趣的就是用到font awesome，它是一款可缩放的矢量图标字库，你可以利用CSS将Font Awesome发挥到极致，包括：大小、颜色、阴影或者其它任何支持的效果。不仅很多精美图标与字库，还有各式各样的界面样例设计可供参考，开启了新的大门，感觉很多元素不需要自己一步一步的搞出来，而可以站在巨人的肩膀上。
网友评论