css学习（1）-- 层叠样式表CSS的基础

一、什么是CSS

CSS是Cascading Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。

一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档。

简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。

二、CSS语言语法

格式-->
        属性：值;属性1:值1;属性2.。。。;
        属性和值使用冒号“：”，多个属性之间使用分号“；”
单位-->
        颜色：    #rgb #8fa #aaffaa red green rgb(255,0,10)
        大小：    em 2em px pt % pc cm mm in
        URL ：   (url)
        注释：   /*   */     （注意：在其中不要再包含注释）

三、CSS的四种设置方式

1>. 内联样式表：在HTML元素标签中使用style属性内联。（每个HTML标签都可以加样式）

2>. 嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用。（可以控制当前页面的所有样式）

3>. 外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。（多个页面都可以使用）

4>. 输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到<style>元素中。（ @import url(css文件) ）

他们的优先级别：
内联的高于其它的，其它的和加载的顺序有关

示例：

css.html

 1 <html>
 2     <head>
 3         <title>CSS设置</title>
 4     
 5         <style>
 6             p {
 7                 background-color:green;
 8 
 9 
10             }
11             @import url(import/one.css);
12             @import url(import/two.css);
13         </style>
14         <link rel="stylesheet" type="text/css" href="css/layout.css">    
15     </head>
16 
17     <body>
18         <p>aaaaa</p>
19         <p style="background-color:yellow;">bbbb</p>
20         <p>cccc</p>
21         <b>wwwwwww</b>
22 
23     </body>
24 </html>

四、CSS的多种选择器的使用

1.HTML选择器

HTML有标签， CSS就用选择器，选择符就是赋予内部或外部样式表的名字。HTML的标签，用来改变一个指定标签的样式，任何一个元素都可以是一个CSS选择符。

示例：

<html>
    <head>
        <title>HTML样式选择器</title>

        <style>
            p {
                background-color:yellow;
            }
            p.cla1 {
                color:red;
                font-size:4cm;
            }

            p.cla2 {
                color:green;
                font-size:1cm;
            }

            p.cla3 {
                color:blue;

                font-size:2cm;
                border:1px solid blue;
            }
            
            
        </style>    
    </head>
    <body>
        <p class="cla1">aaaaaaaaaaaa</p>
        <p class="cla2">aaaaaaaaaaaa</p>
        <p class="cla3">aaaaaaaaaaaa</p>
        <p class="cla3">aaaaaaaaaaaa</p>
        <p class="cla2">aaaaaaaaaaaa</p>
        <p class="cla1">aaaaaaaaaaaa</p>
        <p class="cla2">aaaaaaaaaaaa</p>
        <p class="cla3">aaaaaaaaaaaa</p>
    </body>

</html>

如示例，<style>标签中用到了 p 标签来设这<p>标签的样式。这就是任何一个元素都可以是一个CSS选择符。

2.类选择器

同一个选择器能有不同的类，因而允许同一个元素有不同的样式

定的方法： [tag].类名（类名是自定义的,如果不加tag则代表所有HTML元素）

<tag class=“类名类名1 类名2”> （同一个元素可以使用多个类，类名之间使用空格分开）

如上面的示例，<style>标签中用到了 p.cla1，p.cla2......，这些就是类选择器。但是只有<P>标签能用，如果其他标签想用此类，吧p.cla1.....前面的p去掉就OK了。

3.ID选择器

在HTML页面中， ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式一个HTML页面中，ID属性值要唯一

用法：#idname { }(idname是自定义的名称)

示例：

<html>
    <head>
        <title>ID样式选择器</title>

        <style>
            p {
                background-color:yellow;
            }
            #id1 {
                color:red;
                font-size:4cm;
            }

            #id2 {
                color:green;
                font-size:1cm;
            }

            #id3 {
                color:blue;
                font-size:2cm;
                border:1px solid blue;
            }

            #id4 {
                background-color:#ff00ff;
            }
            #id5 {
                border:5px solid red;
            }
            
            
        </style>    
    </head>
    <body>
        <p id="id1">aaaaaaaaaaaa</p>
        <p id="id2">aaaaaaaaaaaa</p>
        <p id="id3">aaaaaaaaaaaa</p>
        <p id="id4">aaaaaaaaaaaa</p>
        <p id="id5">aaaaaaaaaaaa</p>
    </body>

</html>

要注意的是ID必须唯一，即在标签中只能用的一个ID。

4.关联选择器

关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串，因为层叠顺序的规则，它们的优先权比单一的选择符大，必须按关联关系使用，不能有反顺序。

只要能保持关联关系就可以，不管是在多少层。

示例：

 1 <html>
 2     <head>
 3         <title>关联样式选择器</title>
 4 
 5         <style>
 6             div #one .two p {
 7                 color:red;
 8                 font-size:5cm;
 9             }    
10             
11         </style>    
12     </head>
13     <body>
14         <div> 
15             <div id="one">
16                     <div class="two">
17                         <p>wwwwwwwwwwww</p>
18                     </div>    
19             </div>    
20         </div>
21     </body>
22 
23 </html>

要明白的是<div>中必须有<div id="one">,在里面必须要有 <div class="two">，其中的<p>标签才是所设置的样式。

5.组合选择器

为了减少样式表的重复声明，组合是允许的。只要使用英文逗号（,）隔开每个选择符就可以了

6.伪元素选择器

伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式。目前只有a和p两处HTML元素可以使用
使用时的语法：

                 标签：伪元素           标签［.类名］：伪元素
                 a:link            没有任何运作前的状态
                 a:hover         光标移到到超链接上的状态
                 a:active:       选择超链接的状态
                 a:visited        访问过超连接的状态
                 p:first-letter   一个段落中首个字母的状态
                 P:first-line    一个段落中首行的状态

示例：

 1 <html>
 2     <head>
 3         <title>伪元素样式选择器</title>
 4 
 5         <style>
 6             a:link {
 7                 color:green;
 8                 font-size:1cm;
 9             }
10             a:hover {
11                 color:red;
12                 font-size:2cm;
13             }
14             a:active {
15                 color:blue;
16                 font-size:2cm;
17             }
18             a:visited {
19                 color:yellow;
20                 font-size:1cm;
21             }
22         </style>    
23     </head>
24     <body>
25         <a href="http://www.yyyyy.com">yyyyyyyyyy</a><br>
26         <a href="http://www.xxxxx.com">xxxxxxxxxxxx</a><br>
27         <a href="http://www.zzzzz.com">zzzzzzzzzzzzzz</a><br>    
28     </body>
29 
30 </html>

最后需要注意的是：

1.所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

2.样式规则的优先级： 关联>ID选择器>CLASS选择器>HTML标签选择器