NO.6 样式表、选择器

样式表：
1.内联的，写在标签里面
style="样式"
控制精确，乱，代码冗余

<body>
    <div style="color:#F00">测试文字</div>　　<!--style属性写在div里面-->
</body>

选择器：
样式表里面使用的，能够找到标签的
#代表通过ID选择，只能选一个
.代表通过CLASS选择，选取N个
直接写标签名，标签名选择器，选取N个
*代表网页里面所有的元素
优先级：ID>Class>标签名>*

组合选择器：
#a,#c 逗号代表并列关系
#diqu li 空格代表后代关系
div.b .代表用class名筛选

!important 写在样式后面，用于打破优先级

2.内嵌的，嵌入在网页里面
在head里面
<style type="text/css">写样式表</style>
控制不如内联的精确，代码重用性较高

<title>无标题文档</title>
    <style type="text/css">
        #a,#q{ color:#F00}
        .b{ color:#00F}
        .c{ color:#0F0}
    </style>
</head>

<body>
    <div id="a">测试文字</div>
    <div id="q">测试文字</div>
    <div class="b">测试文字</div>
    <div class="b">测试文字</div>
    <div class="c">测试文字</div>
</body>

3.外部样式表，一个单独的样式文件
将外部样式表拿到当前页面使用：
<link href="test.css" rel="stylesheet" type="text/css" />
控制不如内联的精确，代码重用性最高

<title>无标题文档</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="a">测试文字</div>
    <div id="q">测试文字</div>
       <div class="b">测试文字</div>
    <div class="b">测试文字</div>
    <div class="c">测试文字</div>
</body>

@charset "utf-8";
/* CSS Document */

#a{ color:#F00;}
#q{ color:#00C;}
.b{ color:#0F0;}
.c{ color:#FF0;}

优先级：
内联的高于内嵌的和外部的