CSS(一)基础

为什么使用CSS样式表？

样式表能实现内容与样式的分离，方便团队开发，形成内容与样式和谐统一的完整网页
样式复用、方便网站的后期维护，同一网站共用同一样式，确保网站统一的风格
页面的精确控制，实现精美、复杂页面

CSS的用途

外观、美化
布局、定位

CSS基本语法

<head>
<style type="text/css">  /*<style>标签声明标签内为CSS*/
    选择器（即修饰对象）{
    
    
    /*
    多条样式规则
1.多个属性间用分号分隔
2.用冒号声明对应属性值
    */
    对象的属性1: 属性值1; 
    对象的属性2: 属性值2;
  }
</style>
</head>

一、选择器的分类

标签选择器

/*
标签选择器：用于修饰同类HTML标签的共性风格,作用范围是全局;
记住标签(li)是可变的^_^;
标签选择器直接应用于HTML标签;
*/
<style type="text/css">
   li {
    
    
     color:red; 
     font-size:30px;
     font-family:黑体; 
   }
</style>

类选择器

 /*  类选择器 可在页面中多次使用
 定义样式，注意类名有点号
*/
    .red {
    
    
        color: red;
    }

<!-- class=""只要是在标签（任何个）内即可 
应用类样式，其他元素也可以使用
 -->
<li class="red">家用电器</li>

ID选择器

 /* ID选择器 同一个页面只能用一次*/
    #gray {
    
    
        background: lightgray;      /*设置背景色*/
    }

二、应用样式的方式

1. 内部样式表

HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用

<head>
<style type="text/css">
  …..  //样式定义 
</style >
</head>

2. 外部样式表（建议采用）

分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS

CSS代码保存在扩展名为.css的样式表中

.blue{
    
    color:blue;}  
…..  //CSS样式定义

HTML文件引用扩展名为.css的样式表，有两种方式

（1）链接式（常用）

<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

(2) 导入式

<head>
……
<style type="text/css">

@import url("style.css");

</style>
</head>

注：二者的区别

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

3.行内样式表

单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用

<li>
  <a href=""#" style="color:red;font-size:10px;">日用百货</a>
</li>

三、CSS的复合选择器

1.后代选择器（常用）

在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明

外层的标签写在前面，内层的标签写在后面，之间用空格分隔

标签嵌套时，内层的标签成为外层标签的后代；

不只是两个，可以多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    /* 选择的是多层标签共同控制的内容 */  
   p .lala {
     
     
    color:blue;
   }
   
</style>
</head>
<body>
    <p>
       啦啦啦啦
       <span class="lala">后代选择器</span>
    </p>
</body>
</html>

2.交集选择器

由两个选择器直接连接构成，选中二者各自元素范围的交集

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

选择器之间不能有空格，必须连续书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    
/* 选择是p标签元素里的且是类名为txt的元素*/
   p.txt {
     
     
    color:red;
   }
   
</style>
</head>
<body>
    <p class="txt">交集选择器</p>
</body>
</html>

3.并集选择器

多个选择器通过逗号连接而成

利用并集选择器同时声明风格相同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

  h2,.one,.two ,#three {
     
           并集选择器
    color:blue;
 } 

</style>
</head>
<body>
   <h3>庭院深深深几许，杨柳堆烟，帘幕无重数。</h3>
   <p class="one">玉勒雕鞍游冶处，楼高不见章台路。</p>
   <p class="two">雨横风狂三月幕，门掩黄昏，无计留春住。</p>
   <p id="three">泪眼问花花不语，乱红飞过秋千去。</p> -->
</body>
</html>

四、其他

1.通配符选择器

特点

设置页面中所有标签为统一的样式
通配符选择器选中的是所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

* {
     
               通配符选择器(一般用于初始化，加载速度慢)
    color:red;
 }
 
</style>
</head>
<body>
    ....
</body>
</html>

2.多类名（类选择器）

可以给一个标签指定多个类名，从而达到更多的选择目的。

<div class="red font20">亚瑟</div>

在标签class 属性中写 多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

五、CSS的高级选择器

1.层次选择器

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>层次选择器</title>
    <style type="text/css">

  /* 层次选择器 */
/* p{
    border:1px solid red;  给元素设置边框,1px是边框的宽度,
    solid是边框的样式 (solid:实线,dotted:点线,dashed:虚线,
    double:双线),red是边框的颜色

} */

/* 后代的 */
/* body p{
   background:red;   背景色`
} */


/* 子选择  E>F 选择匹配的F元素，
且匹配的F元素是匹配的E元素的子元素 */
p>a {
     
     
    background:red;
}


/* 相邻兄弟   E+F 选择匹配的F元素，
且匹配的F元素紧位于匹配的E元素后面*/
/* .demo+p {
     background:red;
} */


/* 通用兄弟   E~F 选择匹配的F元素，
且位于匹配的E元素后的所有匹配的F元素*/
/* .demo~p {
     background:red;
} */

</style>
</head>
<body>
   <!--     <h1>00</h1>
 -->     <!-- 缩写语法  p{$}*10+ul>li*3>p{$@11} -->
    <p>1</p>
    <p class="demo">2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>
      <a href="#">啦啦啦</a>
     </p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <ul>
        <li>
            <p>11</p>
        </li>
        <li>
            <p>12</p>
        </li>
        <li>
            <p>13</p>
        </li>
    </ul>

</body>
</html>

后代选择器和子选择器的区别

子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。
而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

2.结构伪类选择器

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的高级选择器</title>
    <style type="text/css">

       /* 结构伪类选择器 */

       /* 第一个 */
/*
       body>p:first-child {
        background:red;
       } */

        /* 最后一个 */
      /*  p:last-child {
        background:red;
       } */



       /* 指定位置 */
      /*  body>p:nth-child(10) {
            background: red;
       } */

    /* odd奇数位置  even偶数位置 */
     /*   body>p:nth-child(even) {
        background:red;
    } */


 /*     body>p:first-of-type {
        background:red;
    }
 */

     /* body>p:last-of-type {
        background:red;
    } */


/*        body>p:nth-of-type(4) {
        background:red;
    }

    body>p:nth-child(1) {
            background: red;
        } */
</style>
</head>
<body>
<!--     <h1>00</h1>
 -->     <!-- 缩写语法  p{$}*10+ul>li*3>p{$@11} -->
    <p>1</p>
    <p class="demo">2</p>
    <p>
      <a href="#">啦啦啦</a>
     </p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <ul>
        <li>
            <p>11</p>
        </li>
        <li>
            <p>12</p>
        </li>
        <li>
            <p>13</p>
        </li>
    </ul>
</body>
</html>

注：使用E F:nth-child(n)和E F:nth-of-type(n)的区别：

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
:first-child()和 :first-of-type()的区别

3.属性选择器

在这里插入图片描述

六、CSS的三大特性

1.层叠性

标签必须使用同一类型的选择器，最后定义的样式会将前面定义的样式冲突部分覆盖掉。
（长江后浪推前浪，前浪死在沙滩上。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的三大特性</title>

    <style type="text/css">
    /* 重叠性 */
   div {
     
     
        color:red;
}

    div {
     
     
        color:blue;
} 

 
</style>

</head>
<body>
     <div>
 层叠性-标签必须使用同一类型的选择器，最后定义的样式会  
 将前面定义的样式冲突部分覆盖掉。（长江后浪推前浪，前浪死在沙滩上。）
    </div> 

</body>
</html>

2.继承性

继承性必须在嵌套结构中才会有；
该子元素标签会受父元素样式影响（子承父业；
继承性属性总结：
✔能被继承的属性：
1. color 2.text-，font-，line-这些元素开头的
X不能被继承的属性：
1. width 2. height 3. background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>css的三大特性</title>

    <style type="text/css">


  /* 继承性 */
   div {
     
     
    color:blue;
    font-size:100px;
    text-decoration:underline;   /*下划线*/
    line-height: 80px;         /*行高*/

    /*不能继承*/
    background:#666;
    width:800px;
    height:700px;
  } 

  

</style>

</head>
<body>
   <div>
    <p>
继承性-该子元素标签会受父元素样式影响（子承父业）
</p>
</div> 

</body>
</html>

3.优先级

总结：
 1.  优先级是使用了不同的选择器给同一个标签设置样式
 2.  权重叠加
 3.  继承的权重是0
 4. 从左到右，左面的最大，一级大于一级，数位之间没有进制，
    级别之间不可超越