CSS3

一.CSS
Cascading Style Sheet 级联样式表

1.表现HTML或XHTML文件样式的计算机语言
2.包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二.css的优势：

   1.内容与表现分离
   2.网页的表现统一，容易修改
   3.丰富的样式，使得页面布局更加灵活
   4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
   5.运用独立于页面的CSS，有利于网页被搜索引擎收录

三.css语法基本结构：
选择器{

声明1;

声明2;
}

h1 {

    font-size:12px;
    color:#F00;
   }

四.三种样式：
1.行内样式
<h1 style="color:blue;font-size: 10px;">今天可能下冰雹，大家每人回家准备一口锅，盖头上</h1>

行内样式有style属性控制，双引号中间的内容就是样式列表，且内个样式用分号分割

2.内部样式表

在<head></head>标签中写<style type="text/css"></style>

      <head lang="en">
          <meta charset="UTF-8">
          <title>内部样式效果</title>
          <style type="text/css">
              h1{
                  color: green;
                  font-size: 100px;
              }
          </style>
      </head>

注意：将全部符合条件的标签全部变样式

    3.外部样式表
      需要创建.css文件
      style.css
        h1{
             color: aqua;
             font-size: 15px;
         }
      在HTML文件当中引用样式
       链接式：<link href="文件路径" rel="stylesheet" type="text/css"/>
       导入式：<style type="text/css">

               @import "文件路径";

</style>

4.链接式和导入式的区别

     4.1<link/>标签属于XHTML，@import是属于CSS2.1
     4.2使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
     4.3使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
     4.4@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

    5.样式优先级
      1.行内样式>内部样式表>外部样式表
      2.就近原则

6.三种基本选择器

6.1 标签

      <h1>支佳宁说p和h1有什么区别</h1>
       h1 {
                color: green;
            }

        6.2 class选择器
          <h1 class="ZJN">支佳宁说p和h1有什么区别</h1>
          .ZJN{
           color:yellow;
          }
        6.3 id选择器
          <h1 id="ZJNHH">支佳宁说p和h1有什么区别</h1>
          #ZJNHH{
           color：black;
          }
        遵循id>class>标签，注意，id不能重复

7.层次选择器

     7.1 /*后代选择器*/
             body p{
                 background: yellow;
             }
         body标签下的所有p标签都要变

     7.2 /*子类选择器*/
             body>p{
                 background: blue;
             }
         只有body下的p变，其他包含p的不变

7.3/*相邻兄弟选择器*/

             .active+p{
                 background: green;
             }
         定位class为active相邻的第一个p变

     7.4/*通用选择器*/
             .active~p{
                 background: red;
             }

    8.结构伪类选择器
      <style type="text/css">
         /*定位ul下的第一个li*/
               ul li:first-child{
                   background: yellow;
               }
               /*定位ul下的最后一个li*/
               ul li:last-child{
                   background: blue;
               }
               /*定位第三个p*/
               p:nth-child(3){
                   background: green;
               }
               /*定位第一个p*/
               p:first-of-type{
                   background: red;
               }
               /*定位指定位置的p*/
               p:nth-of-type(2){
                      background: blueviolet;
               }
      </style>

          E:first-child 作为父元素的第一个子元素的元素E
       E:last-child 作为父元素的最后一个子元素的元素E
       E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
       E:first-of-type 选择父元素内具有指定类型的第一个E元素
       E:last-of-type 选择父元素内具有指定类型的最后一个E元素
       E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

    9.属性选择器
      <style type="text/css">
             .demo a {
                 float: left;
                 display: block;
                 height: 50px;
                 50px;
                 border-radius: 10px;
                 text-align: center;
                 background: #aac;
                 color: blue;
                 font: bold 20px/50px Arial;
                 margin-right: 5px;
                 text-decoration: none;
                 margin: 5px;
             }
             /*属性*/
             a[id]{
                 background: red;
             }
             /*属性值*/
             a[href=efc]{
                 background: yellow;
             }
             /*属性开头*/
             a[href^=s]{
                 background: orange;
             }
             /*属性结尾*/
             a[target$=k]{
                 background: palevioletred;
             }
             /*属性包含*/
             a[href*=a]{
                     background: purple;
             }
         </style>

        E[attr] 选择匹配具有属性attr的E元素
     E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
     E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
     E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
     E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配