CSS入门
今天整理一些针对css入门相关的知识，一说到css，大家的第一反应应该是层叠样式表，是的，所谓CSS（cascading Style Sheet 的缩写），可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制 web 页面的外观。
当然这只是它广义上的理解，我们可以把CSS说的更加的通俗化一点，它就是可以帮助你的网页显示出不同的效果，它是一种用来表现HTML等文件样式的计算机语言。
CSS有以下几个特点：
1、页面内容与表现形式分离；
2、可很好的控制页面的布局 ；
3、提高网页加载速度 ；
4、降低服务器的成本 ；
5、呈现一致的效果 。
CSS有三种引入方式：
1、外部引入
在head部分加入link标签，引入外部css文件。
<head>
<title>CSS入门</css>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
2、头部引入
在head部分加入<style>标签。
<head>
<title>CSS入门</css>
<style>
p
{
font-size:12px;
color:black;
}
</style>
</head>
3、在标签内引入
直接在标签里面加 style 样式
<body>
<h2>CSS入门</h2>
<p style="color:red;">用于控制web页面的外观</p>
</body>
下面总结一下三种引入各自的特点：
外部引入的特点：
一个CSS文件可控制多个页面 易改版、便于维护 减少代码量、代码简洁规范易于分工协作 有效利用缓存机制
相对于单页有垃圾代码 外部引入中的href属性会给服务器造成请求的压力
适用范围：常应用于访问量巨大的网页
head 头部引入的特点：
速度快，没有服务器请求压力 相对于外部引入单页代码量少
不易改版与维护 代码较乱不易前后台沟通
适用范围：常见于大型互联网首页 如：网易、新浪等
标签内引入的特点：
优先级最高
冗余代码多，代码量大 不利于维护
适用范围：个别特殊效果的使用
下面我们介绍一下CSS的基础语法
选择器｛属性：值；属性：值；｝
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成，每个属性有一个值。
属性和值用冒号分开，分号结束
p {color:red;border:1px black solid;}
CSS常用选择器分为一下五种:
ID选择器
类选择器
标签名选择器
群组选择器
后代选择器
ID 选择器的优先级最高，页面中不能有同名的 ID
<style>
#one{
border:1px red solid;
}
</style>
<body>
<p id="one">CSS入门</p>
</body>
类选择器优先级仅次于ID选择器，可以有相同的类名
<style>
.two{
border:1px green solid;
}
</style>
<body>
<p class="two">CSS入门</p>
<p class="two">CSS选择器</p>
</body>
标签名选择器优先级与ID选择器与class选择器相比最低
<style>
p {
color:red;
border:1px black solid;
}
</style>
<div>
<p>CSS入门</p>
<span>CSS选择器</span>
<p>CSS优先级</p>
</div>
群组选择器是把几个 ID、class 或者标签名中具有相同的CSS取出，来减少代码的冗余。
<style>
#one, .two,span{
border:1px green solid;
}
</style>
<div id="one">
<p class="two">CSS入门</p>
<span>CSS选择器</span>
</div>
后代选择器是使用多个选择器的组合来找到具体要控制的标签。
<style>
#one p{
border:1px green solid;
}
</style>
<div id="one">
<p>CSS入门</p>
<span>CSS选择器</span>
</div>
使用 CSS 选择器的优点
准确的控制内容的样式；
代码优化，争取最少的代码量；
代码美观、易读；
利用样式优先级的区别实现样式的覆盖。
各类选择器优先级快速运算
标签内引入的样式高于一切选择器
ID选择器权重值 100
类选择器权重值 10
标签选择器权重值 1
p {color:red;border:1px black solid;} 权值 1
div p {color:red;border:1px black solid;} 权值 2
如权重相同优先级后发出的有效
一个ID选择器的权重值大于十一个类选择器的权重值！
CSS入门的知识就是以上这些！
