CSS ---基础篇

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
一、初识CSS
1、基本语法
（1）CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。
选择器名{
属性 : 属性值;
......
}
例如：设置div元素的背景色为红色。
div{
background-color : red;
}
注意：
css声明要以分号;结束，声明以{}括起来
建议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family: "agency fb";
如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到js时就会有所了解)。
（2）注释
多行注释：/*这里的内容就是注释*/
2、三种方式
创建 CSS 样式表有三种方式：1.内联样式；2.内部样式表；3.外联样式表。
内联样式
内联样式就是将样式定义在具体html元素的style属性中。
<p style="color:red;font-size:50px;">这是一段文本</p>
说明：
在当前元素使用 style 属性的声明方式。
style 是行内样式属性； color 是颜色属性；
red 是颜色属性值； font-size是字体大小属性；
50px 是字体大小属性值。


（2）内部样式表
通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套<style>标签，在<style>中通过选择器的方式调用指定的元素并设置相关 CSS。
<style type="text/css">
p {
color: blue;
font-size: 40px;
}
</style>
<p>这是一段文本</p>
外联样式表
//style.css文件
p {
color: green;
font-size: 30px;
}
//引入：link
<link rel="stylesheet" type="text/css" href="style.css">
说明：
很多时候，大量的 HTML 页面使用了同一个CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过<link>元素去引入它。
@charset "utf-8"表明设置 CSS 的字符编码，如果不写默认就是 utf-8。
3、多重样式
（1）多重样式
当同一个HTML元素被不止一个样式定义时，多重样式将层叠为一个。 
（2）优先级
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字越大拥有越高的优先权。
以下优先级从低到高：
1）外联样式表（使用<link>引入的样式）；
2）内部样式表（使用<style>元素设置）；
3）内联样式（使用 style 属性设置）。
//内部样式
<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>
//内部样式表
<style type="text/css">
p {
color:blue;
font-weight: bold; 
}
</style>
//外联样式表，以下是css文件内容
p {
color: green;
font-style: italic;
}
当设置了相同css属性样式时，按照优先级进行覆盖；而不同属性样式会同时保留。
（3）强制优先
如果某一个样式被优先级高的给替换掉了， 却又想执行这个样式方案， 可以将这个方案标记成重要样式（important）。
//强行设置最高优先级
color: green !important;
二、基本选择器
1、通用选择器
* {......}
* {
color: orange;
}
2、类选择器
.class属性值{......}
.hidden {
display: none;
}
3、id选择器
#id属性值{......}
#p1 {
font-weight: bold;
}
4、元素选择器
元素名称{......}
p{
color: red;
font-size: 20px;
}
5、属性选择器
（1）[属性名]{......}
用于选取带有指定属性的元素
[id]{
color: red;
font-size: 20px;
}
（2）[属性名=属性值]{……}
用于选取带有指定属性和值的元素
[id=div3]{
color: green;
font-family: "微软雅黑";
}
（3）[attribute~=value]
用于选取属性值中包含指定词汇的元素，通常是以空格分隔的多个词汇。
[title~=flower]{
border: 5px solid yellowgreen;
}
//html代码
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="../img/eg_tulip.jpg" title="tulip flower" />
<br />
<img src="../img/shanghai_lupu_bridge.jpg"title="lupu bridge" />
（4）[attribute|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，通常是一中划线分割的一个单词。
[lang|=en]{
border: 5px solid yellowgreen;
}
//html代码
<p class="en">Hello!</p> <!--英文-->
<p class="en-us">Hi!</p> <!--美式英文-->
<p class="en-gb">Ello!</p>
<p class="zh">nihao!</p>
（5）[attribute^=value]
匹配属性值以指定值开头的每个元素。
[class^=test]{
background:#ffff00;
}
//html代码
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<div class="test">这是段落中的文本。</div>
（6）[attribute$=value]
匹配属性值以指定值结尾的每个元素。
[class$=test]{
background:#ffff00;
}
//html代码
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
（7）[attribute*=value]
匹配属性值中包含指定值的每个元素。
[class*=test]{
background:#ffff00;
}
//html代码
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<div class="last-test-example">第四个 div 元素</div>


6、分组选择器（群组选择器）
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
选择器1,选择器2,...{......}
h2 , #pre1 {
color: orange;
font-style: italic;
}