2018.03.27****************************Day27****************************
author：wills
上一篇文章中对HTML中常见的标签，进行了了解，但是仅仅只是了解哪些标签是不够的，我们如果需要对网页进一步进行更高级的渲染，就需要用到层叠样式表。下面是一些粗浅的层叠样式表的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*样式表，行内的 内嵌的，外部的*/
/*border表示边界，solid表示颜色*/
/* {border:1px solid blue;}*/
/*rgb使用三原色，rgba的a表示透明度，0表示透明，1表示不透明*/
/*设置字体时，给上备选项防止客户端没有相应字体*/
@font-face{
/*强行让客户端使用服务器的漂亮字体*/
font-family: '字体名'
src:url(字体文件的路径);
}
.fee{
/* 类选择器*/
}
#f{
/* id选择器 还有标签选择器什么都不加就用标签名*/
/* 在优先级相同的时候就近原则，当id选择器与类选择器冲突时id优先级高此外还有！important表示最重要，优先级更高*/
}
*fkj{
color: green !important
}
.foo {
color:rgba(255,0,0,0.5);
height: 200px;
width:1000px;
background-color: lightgray;
}
.bar{
/*当字母和汉字在同一行时，一般设置两种字体选择*/
/* font-family:Courier,宋体;
font-size:300%;
font-weight: bold;
font-style: italic;*/
/*写到一起必须注意顺序：斜体否-变体否-粗体否-大小/行高-字体*/
font:italic small-caps bold 300%/200px Courier,黑体;
/*line-height: 300px;*/
/*10px表示10个像素的距离*/
letter-spacing: 10px;/*字符空格*/
word-spacing: 50px; /*单词间隔*/
text-align: center; /*文本居中*/
/*overflow:scroll;*/
text-decoration: line-through;/*文本装饰，下划线，删除线*/
}
/*对p标签写一个样式first line表示第一行生效*/
p:first-line{
font-size: 36px;
font-weight: bolder;
/*text-transform: capitalize（首字母大写）;*/
text-transform: uppercase（所有字母大写）;
}
</style>
//上面所有包含于<style></style>之中的内容都可以拿出来单独放到一个文本文件中器后缀名为.css然后使用link来进行链接调用。
<link rel="stylesheet" type="text/css" href="css/styl.css">
</head>
<body>
<p >niha1 adhfjs kha sj kbr!<br>
slkd jgs lj lalk ajlfal<br>
lsdjl sjdgls ajg dlsjal
</p>
<h1 class="foo bar">Hello world 时间是永恒的!</h1><br>
I will become a great programmer<br>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<img src="1.jpg" alt="美女" width="400">
<img src="1.jpg" alt="美女" width="300">
<img src="1.jpg" alt="美女" width="200">
<h1 style="color:cyan">美女漂亮吧，想不想嫖啊，只要998额</h1>
</body>
</html>以上只是一些粗浅应用，如要更近一步的了解学习，推荐runoob进行系统全面的学习，所有层次样式表的用法都有，并且可以马上呈现出来。