初始CSS

一、CSS的优势。

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使得页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS ，有利于网页被搜索引擎收录

二丶Style标签

Style 标签在HTML文档中的位置，在 <head> 和 </head> 之间。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         h1{
 8             font-size: 50px;
 9             color: aqua;
10         }
11 
12     </style>
13 
14 </head>
15 <body>
16 <h1>
17     爱你三千遍
18 </h1>
19 
20 </body>
21 </html>

三、引入CSS的方式

行内样式：

使用style属性引入CSS样式

内部样式表：

CSS代码写在<head>的<style>标签中

外部样式表：

链接式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--导入的链接通过link标签href：路径-->
 7     <link rel="stylesheet" href="./css/a.css">
 8 </head>
 9 <body>
10 <h1>
11     爱你三千遍
12 </h1>
13 </body>
14 </html>

导入式

链接式与导入式的区别：

使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级（就近原则）

行内样式 > 内部样式表 > 外部样式表

四丶CSS选择器

基础选择器

HTML标签作为标签选择器的名称

 <style>
        h1{
            color: blue;
        }
    </style>

类选择器

<标签名 class= "类名称">标签内容</标签名>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .feng{
 8             color: blue;
 9         }
10     </style>
11 
12 </head>
13 <body>
14 <p class="feng">
15     七月的风，八月的雨
16 </p>
17 </body>
18 </html>

ID选择器

<标签名 id= "id名称">标签内容</标签名>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #a881{
 8             color: blue;
 9         }
10     </style>
11 
12 </head>
13 <body>
14 <p id="a881">
15     七月的风，八月的雨
16 </p>
17 </body>
18 </html>

注意所有标签只能id是唯一的不能重复。

ID选择器在同一个页面中只能使用一次

ID选择器>类选择器>标签选择器

五、CSS高级选择器

后代选择器（两个选择符之间用空格隔开）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*
 8         后代选择器： ul下的所有p标签
 9         */
10         ul p{
11             background: aquamarine;
12         }
13     </style>
14 </head>
15 <body>
16 <p>1</p>
17 <p>2</p>
18 <p>3</p>
19 <ul>
20     <li><p>4</p></li>
21     <li><p>5</p></li>
22     <li><p>6</p></li>
23 </ul>
24 </body>
25 </html>

子选择器：

body>p{ background: pink; }

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*
 8      子选择器：匹配ul下的子元素li元素
 9         */
10         ul>li{
11             background: aquamarine;
12         }
13     </style>
14 </head>
15 <body>
16 <p>1</p>
17 <p>2</p>
18 <p>3</p>
19 <ul>
20     <li><p>4</p></li>
21     <li><p>5</p></li>
22     <li><p>6</p></li>
23 </ul>
24 </body>
25 </html>

相邻兄弟选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*
 8     相邻兄弟选择器
 9         */
10        .aaa+p{
11            background: blue;
12        }
13     </style>
14 </head>
15 <body>
16 <p class="aaa">1</p>
17 <p>2</p>
18 <p>3</p>
19 <ul>
20     <li><p>4</p></li>
21     <li><p>5</p></li>
22     <li><p>6</p></li>
23 </ul>
24 </body>
25 </html>