Unit 4.css的导入方式和选择器

一.什么是css

　　CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

二.css的好处　　

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

三.语法　　

 /* 语法 */

        选择器{

             声明1;

             声明2;

             声明3

             .......

         }

/* 例子 */

    h1{

        font-size: 25px;

        color: red;

    }

四.css的3种导入方式

　　4.1 行内样式:行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。　　

<p style="color:red">我的一个段落</p>

　　4.2 内接样式(内嵌式):内嵌式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

　　4.3 外接样式:外接样式又分为两种:1.链接式,2.导入式

　　　　4.3.1 链接式,注意href后面的路径.

　　　　4.3.2 导入式

　　4.4导入式和外链式的区别:

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

　　4.5 注意事项:

　　导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

五.基础选择器

　　5.1 基本选择器

<!-- css选择器:1,基本选择器.2,高级选择器

                       1.1 标签选择器

                               特点:

                                   1.标签选择器 可以选中所有的标签元素

                                   2.不管标签藏的有多深,都可以被选中.所以标签选择器是"共性"的,而不是"特性"的.

                       1.2 id选择器

                               特点:

                                   1.使用#id名的方式选中

                                   2.id不能重复,id命名规范:要以字母开头,可以有数字,下划线,严格区分大小写!

                                   3.任何标签都可以设置id

                       1.3 类选择器

                               特点:

                                   1.使用.class名来选择

                                   2.class名可以重复(反过来说,就是把当前标签设置成类的一个属性)

                                   3.一个标签可以属于多个类(class="jack lucy lili"),每个类用空格隔开

实例:

　　可以对块级标签设置长宽
　　不可以对内联标签设长宽（它只会根据他的文字大小来变）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css选择器</title>

    <style type="text/css">

        /*标签选择器:匹配所有p标签*/

        p{

            color:red;

            font-size: 30px;

        }

        /* 如果一个标签下有其他的标签,那么其他的标签也会被统一样式.ul下面的li和span都会被统一样式 */

        ul{

            color: green;

            font-size:35px;

        }

        /*匹配指定的标签 */

        #s1{

            background: green

        }

        #s2{

            font-size: 23px

        }

        /* 和标签选择器一样,id标签下如果有其他的标签,也会被统一样式 */

        #s_box{

            font-size:27px;

            background: pink

        }

        .title_h3{

            background-color: green;

        }

        .title_h4{

            background-color: pink;

        }

        /* 同样,一个类标签下有其他标签,也会被统一样式 */

        .h_box{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <p>我是一个段落</p>

        <ul>

            <li>哈哈哈哈

                <span>我是span</span>

            </li>

            <li>我是一个列表元素</li>

        </ul>

    </div>

    <div>

        <div>

            <div>

                <div>

                    <div>

                        <p>我是另外一个段落</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div>

        <span id="s1">浙江省</span>

        <span id="s2">上海市</span>

    </div>

    <div id="s_box">

        <!-- id选择器对被选择的id下面所有的标签生效 -->

        <span>北京市</span>

        <span>天津市</span>

    </div>

    <div>

        <div class="h_box">

            <h3 class="title_h3">我是一个三级标题.</h3>

            <h4 class="title_h4">我是一个四级标题.</h4>

        </div>

    </div>

</body>

</html>

六.组合选择器

　　6.1 后代选择器:在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器.选择器之间的空格是一种结合符（combinator）.后代选择器两个元素之间的层次间隔可以是无限的.div h2表示div下面所有的h2标签,无论div和h2之间的层次间隔是怎样的.

　　6.2 子元素选择器:用>表示指向子元素(> 两端可以有空格),只能选择作为某元素子元素的元素.

注意:子元素可以结合后代选择器使用,直接是顶层父标签子元素选择器.

　　6.3 交集选择器:相交的部分就是要设置属性值的标签.

　　6.4 并集选择器(多元素选择器):多个元素设置统一样式.

　　6.5 属性选择器:根据属性值查找,一般在表单中使用比较多.

找到所有title属性等于hello的元素：

[title="hello"] {

  color: red;

}

找到所有title属性以hello开头的元素：

[title^="hello"] {

  color: red;

}

找到所有title属性以hello结尾的元素：

[title$="hello"] {

  color: red;

}

找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {

  color: red;

}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {

  color: red;

}

总结属性选择器:包含某些字符使用*

　　　　　　　以某些字符开头使用^

　　　　　　　以某些字符结尾使用$

　　6.6 伪类选择器:

　　anchor伪类：专用于控制链接的显示效果.　(爱恨原则)　

　　1.没有被访问过的a标签的样式使用link

　　2.被访问过后的a标签样式使用visited

　　3.鼠标悬停时a标签的样式使用hover

　　4.鼠标点住a标签的样式使用active

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类选择器</title>

    <style type="text/css">

        /*伪类选择器*/

        /*没有被访问过的a标签的样式使用link*/

        .box ul li.item1 a:link{

            color: red;

        }

        /*visited表示被访问过后的a标签样式*/

        .box ul li.item2 a:visited{

            color: yellow;

        }

        /*鼠标悬停时a标签的样式*/

        .box ul li.item3 a:hover{

            color: green;

        }

        /*鼠标点住时a标签的样式*/

        .box ul li.item4 a:active{

            color: yellowgreen;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li class="item1">

                <a href="#">张三</a>

            </li>

            <li class="item2">

                <a href="#">李四</a>

            </li>

            <li class="item3">

                <a href="#">王五</a>

            </li>

            <li class="item4">

                <a href="#">马六</a>

            </li>

        </ul>

    </div>

</body>

</html>

a标签伪类

　　before,after伪类　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素选择器</title>

    <style type="text/css">

        /*伪元素选择器*/

        /*设置第一个字符的样式*/

        p:first-letter{

            color: red;

            font-size:30px;

        }

        /*一般都有一个conten属性(内容的意思)*/

        /*使用befor和after伪元素必须结合content属性使用*/

        p:before{

            content: "jack";

        }

        /**/

        p:after{

            content: "#"

        }

    </style>

</head>

<body>

    <!-- 伪元素选择器 -->

    <p>我是一个段落</p>

</body>

</html>

实例