前端css样式及选择器

标题：

1.scc概述

2.行内样式

3.内接样式

4.外接样式（链接式）推荐使用

5.外接样式（导入式）

6.嵌套规则

7.css选择器

1.scc（Cascading Style Sheets）层叠样式表

　　当前CSS前端分为三层：

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为

css的作用其实就是给HTML页面标签添加各种样式，定义网页显示效果，将网页内容和显示样式进行分离

css缺点：兼容性不是太好；要求浏览器足够智能化；数据和显示没有分开；功能还不够强大

css有点：使数据和显示分开；降低网络流量；使整个网络视觉效果一样；降低了耦合性，提高了开发效率

2.行内样式

<div>

    <p style="color: green">这是行内样式</p>

</div>

3.内接样式

<style type="text/css">

    /*2.内接样式*/

        p{

            color: red;

            font-size: 20px;

        }

    </style>

4.外接样式（链接式）推荐使用

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

建立一个index.css的文件，在主页面把它导入：

5.外接样式（导入式）

<style type="text/css">

        @import url('./index.css');

</style>

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

6.嵌套规则　

有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列

7.css选择器

7.1基础选择器

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

　　1.通用元素选择器 *: 所有的标签都变色

　　2.标签选择器：匹配所有使用p标签的样式 p{color:red}

　　3.id选择器：匹配指定的标签 #p2{color:red}

　　4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    /*标签选择器*/

    /*所有标签是div的都变了*/

    div{

        font-family: 华文彩云;

    }

    /*id选择器*/

    /*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/

    #c2 p{

        background-color: yellow;

        font-size: 20px;

        color: purple;

    }

    /*calss类选择器*/

    .a1{

        color: red;

    }

    /*通用元素选择器，整体改变*/

    *{

        background-color: pink;

        color: green;

    }

</style>

<body>

<div>

    <div id="c2">

        <p>根据c2 p的信息改变颜色</p>

        <div class="a1">这里字体是红色</div>

    </div>

</div>

<p>p2</p>

<div class="a1">666

    <p>你好啊</p>

    <h1>我是h1标签</h1>

</div>

</body>

</html>

7.2组合选择器

　　 1.后代选择器，使用空格表示后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}

    2.子代选择器，使用>表示子代选择器（只在儿子层找） .c2>p{color:red}

    3.多元素选择器：同时匹配所有指定的元素，之间通过逗号隔开  .div,p{color:red}

　　　　　　　　　　　　　　　　　　　　　　　或者

 　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{

            　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;

            　　　　　　　　　　　　　　　　 　　　　　　　　　　 background-color: green;

            　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;

        　　　　　　　　　　　　　　　　}

    不常用

　　3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}

　　4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}

　  5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }

多元素选择器的说明：

.a1 .a2, .a1~p{

            color: blue;

            font-size: 15px;

            background-color: red;

        }

        #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用

        .a1 .a2{

            color: blue;

            font-size: 15px;

            background-color: red;

        }

        .a1~p{

             color: blue;

             font-size: 15px;

             background-color: red;

        }

举例：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>组合选择器</title>

    <style>

        /*后代选择器(部分层级)：选择所有类为a1的p标签*/

        .a1 p{

            background-color: blue;

        }

        /*子代选择器*/

        .c2>p{

            color: green;

        }

        /*毗邻选择器*/

        .a2+p{

            background-color: aquamarine;

        }

        /*兄弟选择器:同一级别的，离得很近的*/

        .a2~p{

            background-color: brown;

        }

        /*多元素选择器：同时匹配所有指定的元素*/

        .div,p{

            background-color: yellow;

        }

        .a1 .a2, .a1~p{

            color: purple;

            font-size: 30px;

            background-color: red;

        }

    </style>

</head>

<body>

<p>第六组</p>

<div class="a1">

    <div class="a2">

        <p>过去永远是画面</p>

        <div class="c2">

            <p>那片海</p>

        </div>

    </div>

    <p>666666666</p>

    <h1 class="a2">第一章</h1>

    <h2>第二章</h2>

</div>

<div class="a1">

    <b>第三章</b>

    <div class="a2">

        <p>&reg;</p>

        <b>singal</b>

    </div>

</div>

<h5>第五组</h5>

<p>第六组</p>

</body>

</html>

7.3属性选择器

　　属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

　　属性选择器仅限于在表单控件中

/*根据属性查找*/

            /*[for]{

                color: red;

            }*/

            /*找到for属性的等于username的元素 字体颜色设为红色*/

            /*[for='username']{

                color: yellow;

            }*/

            /*以....开头  ^*/

            /*[for^='user']{

                color: #008000;

            }*/

            /*以....结尾   $*/

            /*[for$='vvip']{

                color: red;

            }*/

            /*包含某元素的标签*/

            /*[for*="vip"]{

                color: #00BFFF;

            }*/

            /**/

            /*指定单词的属性*/

            label[for~='user1']{

                color: red;

            }

            input[type='text']{

                background: red;

            }

例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        label[for]{

            color: red

        }

        input[type='text']{

            background-color: red;

        }

        label[for^='vip']{

            color: blue;

        }

        label[for*='i']{

            color: yellow;

        }

    </style>

</head>

<body>

    <!-- 属性选择器仅限于在表单控件中 -->

    <form action="">

        <label for="username">用户名</label>

        <label for="vip">vip</label>

        <label for="vivp">vvip</label>

        <input type="text">

        <input type="password">

    </form>

</body>

</html>

7.4伪类选择器（和链接显示效果相关）

　　一般用在超链接a标签中，专用于控制链接的显示效果

'''

        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

'''

例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box ul li.item a:link{

            color: red;

        }

        .box ul li.item a:visited{

            color: yellow;

        }

        .box ul li.item a:hover{

            color: green;

            font-size: 30px;

        }

        .box ul li.item a:active{

            color: pink;

            background-color: #000;

        }

        span{

            display: block;

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

        span:hover{

            color: red;

            cursor: pointer;

            background-color: #000;

            font-size: 30px;

        }

        input{

            width: 300px;

            height: 200px;

        }

        ul>li{

            /*width: 100px;

            height: 70px;*/

            background-color: red;

        }

        /*

            行内标签：

            a span

            1、在一行内显示

            2、不能设置宽高

            3、宽高 是内容的宽高

            行内块

            1.在一行内显示

            2.可以设置宽高

            块级标签

            div p ul li

            1、独占一行

            2、可以设置标签宽高

            3、如果不设置宽高，默认body100%宽度

        */

    </style>

</head>

<body>

    <span>哈哈哈</span>

    <input type="text">

    <input type="password">

    <ul>

        <li>111</li>

    </ul>

    <div class="box">

        <ul>

            <li class="item">

                <a href="#">超链接</a>

            </li>

        </ul>

    </div>

</body>

</html>

7.5nth-child()选择器

　　可以给指定的几行自定属性，如颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*ul>li{

            list-style: none;

        }*/

        ul li:first-child{

            color: red;

        }

        ul li:last-child{

            color: red;

        }

        ul li:nth-child(3){

            color: blue;

        }

        /*设置为n全部为黄色*/

        ul li:nth-child(n){

            color: yellow;

        }

        /*3n+1的倍数行全部绿色*/

        ul li:nth-child(3n+1){

            color: green;

        }

    </style>

</head>

<body>

    <ul>

        <li>冯波1</li>

        <li>冯波2</li>

        <li>冯波3</li>

        <li>冯波4</li>

        <li>冯波5</li>

        <li>冯波6</li>

        <li>冯波7</li>

        <li>冯波8</li>

    </ul>

</body>

</html>

7.6 before，after伪类（后面解决浮动问题需要用到这里的知识）

　　:before p:before 　在每个<p>元素之前插入内容

　　 :after p:after 　　　在每个<p>元素之后插入内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{

            font-size: 29px;

        }

         p::first-letter{

            color: red;

            font-size: 30px;

        }

        p::before{

            content:'6666';

        }

        /*这个非常重要，解决我们后面浮动产生的问题（布局）*/

        p::after{

            content: ".";

            display: block;

            height: 0;

            visibility: hidden;

            clear: both

        }

    </style>

</head>

<body>

    <p>董方方</p>

</body>

</html>