【B/S】CSS（2）
分类：
| 结构 | HTML/XML |
| 样式 | CSS |
| 行为 | JS |
CSS：层叠样式表，简称样式表。
网页设计者使用CSS可以定义元素的样式，包括字体，背景灯其它的高级样式。
为什么要使用CSS：
1.符合WEB2.0标准
2.大大缩减页面代码，提高页面浏览速度，缩减带宽成本
3.结构清晰，容易被搜索引擎搜索到，天生优化了seo
4.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有百上千页面的站点
5.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，不再需要用FONT标签或透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等。
体验CSS：
所有标价签都有style属性，style属性负责元素显示的样式。
color：red；文本夜色
font-weight：bold；文本粗细；
font-style:italic；字体的样式：斜体
<span style="color:red;font-weight:bold;font-style:italic;">字体样式</span>
style样式属性：
属性值是由一个或多个样式组成，形成了样式表。
值写法：样式属性名1：样式属性值；样式属性名2：样式属性值；
<div style="color:red;background-color:yellow;">例子</div>
1.属性名称与属性值之间以冒号“：”隔开，属性值不需要使用引号括起来，除非属性值是由多个单词组成。
2.有的属性可以指定多个属性值，多个属性值间以“，”隔开。
3.如果值为若干个单词，则要给值加引号：font-family:'arial black';
4.定义多个值时，浏览器按照从前后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。font-family:枫棂体,微软雅黑;
选择器类型：
CSS中，选择器是一种匹配模式，用于选择那些需要添加样式的元素。一个页面有很多标签，我们需要从很多的标签中选择我们要应用样式的目标标签。
<!--
在HTML中，有个标签叫作style(样式) type="text/css"
在这个标签里面写得所有东西都是CSS样式表，
格式：
选择器(
样式属性名：样式属性值
)
-->
<head>
<style type="text/css">
/*
div代表选择器，{}中代表选择器匹配元素后要应用样式
color:样式选择器
red:样式属性值
*/
div{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>OK</div>
</body>
常用选择器：
通用选择器：* 匹配页面中所有标签
*{
color:blue;
}
标签选择器：tagName 匹配页面中与选择器对应的标签名的标签
span{
font-size:28px;
}
id选择器：id 匹配页面中有id属性并且值与选择器相等标签（页面中所有标签都有id属性，但不同标签的id属性值，不能一样，id的值在同一个页面不能重复）
#mydiv{
background-color:red;
}
<div id="mydiv">太阳</div>
类选择器： .class 匹配页面中有class属性并且值为选择器相等标签（页面中所有标签都有class属性，代表引用一个类样式，跟java中的class没有任何关系）
.myclass{
font-family：宋体
}
<div class="myclass">字体1</div>
<span class="myclass">字体2</span>
选择器用法：
组合选择器：可以把多个选择器统一定义样式。
div,span{
font-size:10px;
}
后代选择器： A B
查找A元素下面的B后代元素标签（查找A内部中的B标签）
#mydiv p,b{
color:red;
}
<p>无色</P>
<div id="mydiv">
<p>红色</p>
<span>无色</span>
<b>红色</b>
</div>
属性选择器：匹配标签有属性名并且值相等
input[type=password]{
color:red;
}
<input type="text"/>
<input type="password" />
伪类选择器：只有元素的某状态下才会选中
div{
width:200px;
height:100px;
background-color:red;
transition:all 1s;
}
/* 伪类选择器 :hover（鼠标移入）*/
div:HOVER{
width:300px;
height:400px;
background-color:green;
}
/* 伪类选择器 :VISITED（超链接被访问过）*/
a:VISITED{
color:yellow;
}
使用CSS方式
1.行内样式：标签中使用style属性设置样式。应用场景：只对某个标签设置简单样式，有的时候值是临时看一下效果而已
<span style="color:red">红的</span>
2.内联样式：样式定义在当前页面的<style>标签中，通过“选择器”应用样式
#mydiv{
background-color:red;
color:white;
}
<div id="mydiv">今天天气很好</div>
3.外联样式：样式定义一个独立CSS文件中，使用<link>引入样式文件使用。应用场景：项目开发中一般都会采用这种方式，因为好维护，我们只需要修改这个CSS文件，就可以把整个网站样式改变。
<style type="text/css">
.mycls{
color:red;
}<!-- 建立一个css后缀的文件，文件里依旧写上如上的样式。如：myc.css -->
</style>
<!--
rel="stylesheet" 引用的是一个样式表
type="text/css" 样式表文本文件
href="myc.css" 外部样式文件的路径
-->
<link rel="stylesheet" type="text/css" href="myc.css" />
<body>
<a class="mycls" href="#">独立</a><!-- #代表当前页面 -->
</body>
CSS继承性：
具有层次关系的元素之间，内层元素将继承外层元素的样式；多个外层元素中定义的样式将叠加到内层元素。div定义一些样式，那么div中后代标签也会拥有div的样式
<!--
具有继承的CSS属性：
文本相关的属性是继承的：
text-align、color、text-indent、font-family、font-size、font-style、font-weight、letter-spacing、word-spacing、text-transform、line-height等
列表相关的属性是继承的（ul，ol，dl）：
list-style、list-style-image、list-style-position、list-style-type
-->
#ha{
width:600px;
height:200px;
border:1px solid red;
}
<!-- CSS虽然有继承性，但并不是所有的样式都会被继承 -->
<div id="ha"> 有红边框
<div>呱</div>无红边框
<div>喵喵</div>无红边框
</div>
CSS优先级：
/*通用选择器*/
*{
color:green;
}
/*标签选择器*/
span{
color:blue;
}
/*类选择器*/
.myspan{
color:orange;
}
/*id选择器*/
#my{
color:yellow!important;
}
<!-- （越精确，越优先）如果采用多种方式应用样式，优先级：!important > 行内样式（标签中直接写style） > id选择器 > 类选择器 > 标签选择器 > 通用选择器 -->
<!-- 更直接强行的方式：!important; -->
<span class="myspan" id="my" style="color:red;">哈</span>
}
css属性：
#mydiv{
color:pink;
font-family:宋体;/* 设置字体 */
font-size:20px;/* 设置大小，px像素单位 */
font-style:italic;/* 设置斜体 */
background-color:red;/* 背景色 */
height:60px;/* 高度 */
line-height:60px;/* 文本的行高，行高与标签的高度设置为一致就可以垂直居中 */
/* border-color:pink; 边框色 */
/* border-style:groove; 边框样式 */
/* border-width:50px; 边框粗细 */
/* 简写方式： border:border-width || border-style || border-color */
border:5px solid black;
/* 标签离上面一个标签的距离 */
margin-top: 50px;
margin-left: 150px;
margin-right: 500px;
margin-bottom: 10px;
margin: auto;自动居中
/* 标签的内边距 */
padding-top: 50px;
padding-left: 100px;
padding-bottom: 100px;
padding-right: 100px;
padding:50px 0px;
