HTML第四章：初始css

CSS样式：
                 一、为什么要使用CSS;可以让页面更美观.有利于开发速度.
                 二、什么是CSS；全称cascading style sheet层叠样式表.（级联样式表）.
       简称css，css主要负责页面美化、负责样式，html负责内容.

在html开发中内容和美化应该尽可能实现分离.

三、css使用场景.在html开发中尽可能都会用到css样式.比如.
                        京东.淘宝.以及各大小网络都在用.是最普及的html页面美化语言

四、怎么使用css.
                        优势：1. 内容和表现分离.
                                  2.页面表现统一.容易修改.
                                  3.丰富的样式使页面更加灵活.
                                  4.减少了页面代码量.增加里浏览速度和节省网络带宽.
                                  5.使用独立于页面的css. 有利于搜索引擎收录.
    
                        基本结构：
                              选择器名称{     
                                          样式1:值:
                                          样式2:值: 
                                          }

引用方式：
                               1.行内样式：在标签中设置style属性.
                               例子：<p style="color:red;">内容</p>

2.内部样式：在head标签中设置style属性.
                                例子：< style="text/css">  </style>
 
                                3.外部样式：在head标签中设置link标签.
                                   链接式：在head标签中使用link标签.
                                例子：<link href="css文件路径" rel="stylesheet"  type="text/css"/>

4.注意：使用外部css样式必须要把css代码放在css文件里，这样才可以被html引用.
                                  导入式:在style标签里面声明导入式.
                                例子：<style="text/css">
                                              @import url(css文件路径.)
                                           </style>
                        链接式和导入式的区别：
                               （1）link属于xhtml, import属于css2.1
                               （2）link先加载css到页面里.在编译显示.
                                        import先显示页面结构.在加载css到页面里.
                               （3）对于不兼容css2.1的浏览器. import无效.

ps：样式优先级：遵循就近原则，离标签越近越优先
                                                   行内>内部>外部

五、选择器：
                       1、基本选择器.
                          a.标签选择器.
                          b.类选择器.
                          c.id选择器.
                      例子：标签选择器就是选择器名称是标签名.
                                h1{}  p{}

类选择器就是选择器名称以.开头，并且标签设置了class属性.
                           <p class="p1"></p>   #p1{}
                           <p class="p2"></p>   #p2{}

一个id选择器只能被一个标签设置，可以有多个id选择器

选择器优先级：id选择器>类选择器>标签选择器.
   
                      2、层次选择器：
                         a：后代选择器. body p{}设置body里面所有P标签
                               不管是儿子辈还是孙子辈都被设置
                               注意body和p之间用空格隔开.

b：子选择器.body>p{}//设置body里面儿子辈的p标签
                                 body和p之间用>
                          c：相邻兄弟选择器：p+ol{}//设置p标签后面的一个ol标签，必须是同辈元素，不能是子孙及以及下辈分.
                                p和ol用+

d：通用兄弟选择器：p~ol{}//设置p标签后面所有的ol标签。
                                必须是同辈元素.不能是孙子及以下辈分.p和ol用~