003.前端开发知识，前端基础CSS（2020-01-07）

一、CSS初识

　　CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

　　CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二、引入CSS样式表

1.行内式（内联样式）

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

2.内部样式表

<head>
<style type="text/CSS">

    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

3.外部样式表（外链式）

<head>

  <link href="CSS文件的路径"  rel="stylesheet" />

</head>

三、CSS基础选择器

1.标签选择器

　　标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

2.类选择器　　

　　类选择器使用“.”（英文点号）进行标识，后面紧跟类名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style> /*千万别忘了它*/

             /*上面点声明 ，下面class调用*/

        span {  /*标签选择器 让所有的span 都变成 150 */

            font-size: 150px;

        }

        .g {

            color: skyblue;

        }

        .o {

            color: red;

        }

        .oo {

            color: orange;

        }

        .l {

            color: green;

        }

    /* 类选择器  可以选择 一个 或者 多个 标签*/

    </style>

</head>

<body>

    <span class="g">G</span>

    <span class="o">o</span>

    <span class="oo">o</span>

    <span class="g">g</span>

    <span class="l">l</span>

    <span class="o">e</span>

    <div class="nav"></div>  <!-- 导航 我们习惯性的约定 -->

    <div class="banner"></div>  <!-- 导航 我们习惯性的约定 -->

</body>

</html>

3.多类名选择器

　　给同一标签指定多个类名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>.red{

         color: red;

     }.font20{

         font-size: 20px;

         color: blue;

     }

    </style>

</head>

<body>

    <div class="font20 red">多类名</div>

    <div>多类名</div>

    <p class="red">多类名</p>

</body>

</html>

4.id选择器

　　id选择器使用“#”进行标识，后面紧跟id名。

<!DOCTYPE html>

<head>

    <style>#last{

        color: pink;

    }

    </style>

</head>

<body>

    <div>id选择器</div>

    <div id="last">id选择器</div>

</body>

</html>

id选择器和类选择器区别：

　　类选择器（class）好比人的名字，是可以多次重复使用； id选择器好比人的身份证号码，全中国是唯一的，不得重复。

　　id选择器和类选择器最大的不同在于使用次数上。

5.通配符选择器

　　用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器基本用不到。

     * {  /** 代表所有标签的意思 使用较少 */

        color: pink;

     }

四、复合选择器

1.父代选择器

　　后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

<head>

    <style>

    /*需求 把所有的王思聪选出来*/

    div p  {  /*河北  邯郸   后代选择器*/

        color: pink;

    }

　　　 .jianlin p { /*中间用空格隔开*/
　　　　　　color: purple;
　　　　}

</style>

</head>

<body>

    <div> 王者荣耀 </div>

    <div> 王者荣耀 </div>

    <div>

        <p>王思聪</p>

    </div>

    <div class="jianlin">

        <p>王思聪</p>

    </div>

</body>

</html>

2.子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

     /*1. 需求  要一级菜单改为蓝色 */

    ul li  a  {   /*后代选择器  ul li下所有 a 标签内容变为红色*/

        color: red;

    }

    ul li > a {  /*子代选择器 子 指的是 亲儿子(即最近层级)  大于号分割，仅设定 ul li下一层 a 标签内容变为绿色

*/ 
　　　　　color: green;

    }    </style>

</head>

<body>

    <ul>

        <li>

            <a href="#">一级菜单</a>

            <div>

                <a href="#">二级菜单</a>

                <a href="#">二级菜单</a>

                <a href="#">二级菜单</a>

            </div>

        </li>

    </ul>

</body>

3.交集选择器

　　交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间用 . 连接。

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div.red {  /*交集选择器  选择div下面，class="red"  */

            color: red;

        }

    </style>

</head>

<body>

    <div>交集选择器</div>

    <div class="red">交集选择器</div>

    <p>交集选择器</p>

    <p class="red">交集选择器</p>

</body>

4.并集选择器

　　选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*1. 需求 吧 div p span 改为红色*/

    div, p, span {   /*并集选择器  用逗号隔开  , 代表  和  集体声明 适合于相同样式   */

        color: red;

    }

    </style>

</head>

<body>

    <div>并集选择器</div>

    <div>并集选择器</div>

    <div>并集选择器</div>

    <p>并集选择器</p>

    <p>并集选择器</p>

    <p>并集选择器</p>

    <span>并集选择器</span>

    <span>并集选择器</span>

    <span>并集选择器</span>

    <span>并集选择器</span>

    <h1>并集选择器</h1>

    <a href="#">并集选择器</a>

</body>

</html>

5.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

6.链接伪类选择器

- :link      /* 未访问的链接 */

- :visited   /* 已访问的链接 */

- :hover     /* 鼠标移动到链接上 */

- :active    /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    a:link {  /* 未访问过的连接状态*/

        color: #3c3c3c;

        font-size: 25px;

        text-decoration: none;  /*取消下划线*/

        font-weight: 700;

    }

    a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

        color: orange;

    }

    a:hover {  /*鼠标经过连接时候的样子*/

        color: #f10215;

    }

    a:active {  /*鼠标按下时候的样子*/

        color: green;

    }

    </style>

</head>

<body>

    <a href="http://www.asdf12312312312312.com">秒杀</a>

</body>

</html>

实际开发中的伪类链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

     a {

         color: #333;

         text-decoration: none;

         font-size: 25px;

         font-weight: 700;

     }

     a:hover {  /*鼠标经过*/

        color: #f10215;;

     }

    </style>

</head>

<body>

    <a href="http://www.asdf12312312312312.com">秒杀</a>

</body>

</html>

五、综合测试题（1）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

       .site-r a {

             color: red;

       }

       .nav a {  /*后代选择器*/

             color: orange;

       }

       .nav, .sitenav {   /*并集选择器*/

               font: 14px "微软雅黑";

       }

       .nav> ul > li > a {  /*子代选择器*/

           color: green;   /*123123123  */

       }

    </style>

</head>

<body>

<div class="nav">    <!-- 主导航栏 -->

      <ul>

        <li><a href="#">公司首页</a></li>

        <li><a href="#">公司简介</a></li>

        <li><a href="#">公司产品</a></li>

        <li>

             <a href="#">联系我们</a>

             <ul>

                        <li><a href="#">公司邮箱</a></li>

                        <li><a href="#">公司电话</a></li>

             </ul>

        </li>

      </ul>

</div>

<div class="sitenav">    <!-- 侧导航栏 -->

      <div class="site-l">左侧侧导航栏</div>

      <div class="site-r"><a href="#">登录</a></div>

</div>

</body>

</html>

六、综合测试题（2）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .nav {

        text-align: center;

    }

    .nav a{  /*后代选择器 限定范围  */

        width: 120px;

        height: 50px;

        /*background-color: pink;*/

        /*因为a是行内元素， 没有大小，我们需要转换  inline-block */

        display: inline-block;

        background-image: url(images/bg.png);

        text-align: center;  /*让盒子内的文字居中对齐*/

        /*1. 行内元素  行内块元素  我们可以看做文本 */

        color: #fff;

        text-decoration: none; /*取消下划线*/

        /*2. 行高等于盒子的高度，可以让 单行文本垂直居中*/

        line-height: 50px;

    }

    .nav a:hover {  /*当我们鼠标经过了 nav 里面的连接的时候*/

        background-image: url(images/bgc.png);

    }

    </style>

</head>

<body>

    <div class="nav">  <!-- 导航栏开始了 -->

        <a href="#">网站导航</a>

        <a href="#">网站导航</a>

        <a href="#">网站导航</a>

        <a href="#">网站导航</a>

        <a href="#">网站导航</a>

        <a href="#">网站导航</a>

    </div>

</body>

</html>