5.html&css实验5. 颜色、字体、文本格式化和盒模型的样式定义

1.HSL颜色实验：

<style>
#test1
{
border-radius:40px;
background:radial-gradient(80px 80px at 20px 40px,white,blue)
<!-- 径向渐变：     范围:width height 中心： x，y，中心颜色---中间颜色--最外颜色 -->
}

#test2
{
border-radius:40px;
background:linear-gradient(to right,white,blue);
<!-- 线性渐变 -->
}

#test3 {
border-radius:40px;
background-color: hsla(340,100%,50%,0.5);
<!-- h-hue(色调) 0~360 红橙黄绿青蓝紫 0-红 50-橙 100-黄 150-绿… (每51一级， 0和360都表示红色)
s-saturation(饱和度) 即颜色的纯度 0%-全灰 100%-纯色
l-lightness(亮度) 0%全黑 100% 全白
a-alpha (透明度) 取值0~1 . 0-完全透明， 0.5-半透明， 1-完全不透明 -->
box-shadow:inset -20px -20px 40px hsla(340,100%,50%,1),10px 10px 40px grey;
<!-- inset:嵌入式阴影, 水平偏移量 垂直偏移量,模糊半径(模糊度，可选),阴影颜色,  多重阴影 -->
opacity:0.5;
<!--  opacity用来设置整个元素(文字和背景)的透明度,alpha值设置各种带颜色属性的透明度 -->
}
</style>

2.

<style>
h1,h2 {text-align:center;} <!-- 居中 -->
p{text-indent:3em;} <!-- 首行缩进 -->
div{margin:0 10%;}  <!-- margin 首先是上下，其次左右 -->
</style>

3.

<style>
div{text-align:center;margin:0 10% ;}
p{white-space:pre;}<!-- 保存源码中的空白和回车 -->
<!-- P元素和div元素会自动删除文本前后的空白，并把文本中间连续多个空白合并为一个。 -->
</style>

4.盒子模型

<style>
h1{text-align:center}
div{border:outset 2px black;margin:0 10%;}<!-- 外嵌,边界宽度-->
p:first-of-type{border:outset 2px blue;margin:5% 10%;padding:5%;}
<!-- p的双亲的第一个子女 padding 4个方向均为5%-->
div>p{border:dashed 2px red;margin:5% 10%;padding:5%;}
</style>

5.CSS得到对应的字体：

<style>
html {
font-size:  32px;
}
#test1 span{font-family:微软雅黑;} <!-- font-family 规定文本的字体系列。依次选择，直到支持的一个。 -->
#test1 span:first-child{font-size:120%;color:red;}
#test1 span:nth-child(2){font-size:1.2em;color:green;}
#test1 span:nth-child(3){font-size:1.2rem;color:blue;}
#test1 span:nth-child(4){font-size:xx-large;color:grey;}
#test2 span{font-family: 宋体；}
#test2 span:first-child{font-style: italic;color:green;text-decoration: line-through;}
#test2 span:nth-child(2){font-weight:bolder;color:purple;text-decoration: overline;}
#test2 span:nth-child(3){font-weight: 700;color:brown;text-decoration: underline;}
#test3 span{font-family:华文楷体;}
#test3 span:first-child{color:green;text-shadow: 3px 3px 3px #555555;}
#test3 span:nth-child(2){font-size:1.2em;color:red;text-shadow:-3px -3px 3px red,3px 3px 3px #555555;}
#test3 span:nth-child(3){color:brown;letter-spacing: 2em;} <!-- letter-spacing 设置字符间距 -->
</style>

6.学习浮动：

<style>
<p style="border:3px solid blue; overflow:hidden;float:left;width:300px;height:300px;">
<!-- 非浮动元素增加一个overflow:hidden样式，即让溢出部分看不见 -->
<!-- 要让非浮动元素的内容与浮动元素隔离，并且渗透的背景颜色不会影响布局效果,这是其中一种方法-->
<p style="border:3px solid blue;overflow-x:scroll;float:right;width:300px;height:300px;white-space:nowrap;">
<!-- overflow:scroll 显示滚动条, nowrap不换行 -->
<p style="border:3px solid blue;float:left;width:300px;height:180px;overflow-y:scroll;">
<p style="border:3px solid blue;overflow:scroll;float:right;width:300px;height:180px;">
<p style="border:3px solid blue;float:left;width:300px;height:200px;">
<!-- overflow默认值是visible-->
<p  style="border:3px solid blue;float:right;width:300px;height:150px;overflow-y:scroll;">
</style>

7.布局设计：

（1）

<style>
div{border:solid 1px blue;}
#container{width: 800px;margin:0 auto;}
#first,#fifth{width:790px;margin:4px;}
#second,#fourth{float:left;width:240px;margin:8px 4px;}
#third{float:left;width:290px;margin:8px 4px;}
#fifth{clear:both;width:790px;margin:4px;}
</style>

（2）

<style>
div{border:solid 1px blue;}
#container{width: 800px;margin:0 auto;}
#first,#fifth{width:790px;margin:4px;}
#sthird{float:left;width:246px;margin:8px 4px;}
#second,#fourth{float:left;width:240px;margin:3px 2px;}
#third{float:right;width:530px;margin:8px 4px;}
#fifth{clear:both;width:790px;margin:4px;}
</style>

（3）

<style>
div{border:solid 1px blue;}
#container{width: 800px;margin:0 auto;}
#first,#fifth{width:790px;margin:4px;}
#sthird{float:left;width:246px;margin:8px 4px;}
#second,#fourth{float:left;width:240px;margin:3px 2px;}
#second1{float: left;width: 88px;margin:2px;}
#second2{float: right;width:140px;margin: 2px;}
#third{float:right;width:530px;margin:8px 4px;}
#fifth{clear:both;width:790px;margin:4px;}
</style>

8.

（1）接下来的html代码是生成了5个大小不一样的苹果图标，是通过外部文件css/font-awesome.css引入的

<!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>
</style>
</head>
<body>
<i class="fa fa-apple fa-5x"></i>
<i class="fa fa-apple fa-4x"></i>
<i class="fa fa-apple fa-3x"></i>
<i class="fa fa-apple fa-2x"></i>
<i class="fa fa-apple fa-1x"></i>
</body>
</html>

（2）实现一个简单的登陆界面,同样，引入了外部css文件

<!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>
#main{  width:800px;height:400px;background-color:#b4fbb9;box-shadow:5px 5px 20px #808080,-5px -5px 20px #808080;
margin-left:auto;margin-right:auto;margin-top:150px; border-radius:20px; }
<!-- box-shadow设置阴影，（水平偏移，垂直偏移，半径，颜色） -->
#USER{padding:150px 0px 10px 150px;}
#user{margin-left:10px;}
i {color:blue;}
input {	border-left:none;background-color:#b4fbb4;border-radius:10px;width:350px;height:40px;height:40px;font-size:20px;
border:2px solid gray; border-left:hidden;  }
</style>
</head>
<body>
<div id="main">
<div id="USER">
<i class="fa fa-user fa-2x"></i>
<input type="text" id="user" value="用户名"/>
</div>
<div id="PASSWORD">
<i class="fa fa-key fa-2x" style="margin-left:152px"></i>
<input type="text" id="password" value="密码"/>
</div>
</div>
</body>
</html>