目录：点击可快速跳转

什么是css？

css的格式：

css样式可以写在什么地方？

CSS的选择器有哪些？

4）复合选择器：

5）属性选择器：

6）伪类选择器：

文本样式（重要）：

列表样式：

背景样式：

（小练习）模拟导航栏：

浮动：

什么是css？

css是层叠样式表，如果说html是女生的素颜，css就是给这个女生化妆。就是对html的文本内容进行一个美化的过程。

css的格式：

CSS分为2个部分：选择器、以及后面的一条或者多条的声明。

css样式可以写在什么地方？

a)style标签中(内部样式) :只针对于当前页面

b)html标签中 (内嵌样式)，只针对于当前标签

c)单独的CSS文件中(外部样式) :针对于整个项目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1{color:red;} /*h1 是选择了h1标签 方括号里是内容*/
        </style>
        <link rel="stylesheet" href="one.css" />/*第三种导入css的文件*/
    </head>
    <body>
        <p style="color: red;">css的第一种表现方式</p>
        <h1>css的第二种表现方式</h1>
        <a href="#">css第三中表现方式</a>
    </body>
</html>

效果图：

CSS的选择器有哪些？

(1)标签(元素)选择器 ,所有的html标签都称为标签选择器（页面上所有的相同元素）

这个代码是在标签里添加style然后设置属性?
<p style="color: red;">css的第一种表现方式</p>

(2)类选择器, 以 .开头 (页面上所有使用.class的元素)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>/*在标签里设置class标签。style里用.的方式修改属性*/
            .p1{color: red;}
        </style>
    </head>
    <body>
        <p class="p1">class选择器</p>
    </body>
</html>

(3)id选择器，通常页面中的所有的元素需要有唯一的id，相当于人的身份证号，以#开头
(页面上唯一一个元素)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        /*通过id标签设置唯一id  再在css样式中用#id名的方式使用*/
        <style>
            #p1{color: deeppink;}
        </style>
    </head>
    <body>
        <p id="p1">id标签</p>
    </body>
</html>

优先级: id>类>标签\元素

4）复合选择器：

第一种方式 ：    ** ****\* **          》》》页面上所有的元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="one.css"/>
    </head>
    <body>
        <p>*元素测试效果</p>
    </body>
</html>
*{font-size: large;}

第二种方式：     **div , p **   》》》页面中的div和p元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="one.css"/>
    </head>
    <body>
        <p>*元素测试效果</p>
        <div>
            <p>div中的p</p>
        </div>
    </body>
</html>
div,p{color: palevioletred;}

第三种方式： div p 》》》 div中的p元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="one.css"/>
    </head>
    <body>
        <p>*元素测试效果</p>
        <div>
            <p>div中的p</p>
        </div>
    </body>
</html>
div p{color: palevioletred;}

第四种方式： div>p 》》》父级是div标签的p元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div>p{
                color:red
            }
        </style>
    </head>
    <body>
        <p>这个的父级就不是div</p>
        <div>
            <p>这些都是父级是div的标签</p>
            <p>这个也是父级是div的标签</p>
        </div>
    </body>
</html>

 第五种方式：  ** div+p       ** 》》》紧挨着div的p元素 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div+p{
                color:red
            }
        </style>
    </head>
    <body>
        <p>div上上标签P</p>
        <div>
            <p>div上下标签</p>
            <p>div下上标签</p>
        </div>
        <p>div下下位置</p>
    </body>
</html>

5）属性选择器：

[属性名称] 例如[tartger]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [target]{color:red}
        </style>
    </head>
    <body>
        <a target="_blank" href="#">this</a>
    </body>
</html>

[属性名称=属性值] 还是拿target举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [target="_blank"]{color:red}
        </style>
    </head>
    <body>
        <a target="_blank" href="#">this</a>
        <a href="#">no target</a>
    </body>
</html>

6）伪类选择器：

a:link 超链接默认样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        a:link{color:black}
        </style>
    </head>
    <body>
        <a href="#">ok</a>
    </body>
</html>

a:hover 鼠标悬停样式：就是鼠标放在上面的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        a:link{color:black}
        a:hover{color:blue}
        </style>
    </head>
    <body>
        <a href="#">ok</a>
        <a href="#">鼠标悬停</a>
    </body>
</html>

a:active 鼠标放在超链接上的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        a:link{color:black}
        a:hover{color:blue}
        a:active{background-color:pink}
        </style>
    </head>
    <body>
        <a href="#">ok</a>
        <br/>
        <a href="#">鼠标悬停</a>
        <br/>
        <a href="#">鼠标放在上面的样式</a>
    </body>
</html>

a:visited 访问过之后的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        a:link{color:black}
        a:hover{color:blue}
        a:active{background-color:pink}
        a:visited{color:yellow}
        </style>
    </head>
    <body>
        <a href="#">ok</a>
        <br/>
        <a href="#">鼠标悬停</a>
        <br/>
        <a href="#">鼠标放在上面的样式</a>
        <a href="#">鼠标访问过</a>
    </body>
</html>

文本样式（重要）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color:red;/*文字颜色*/
                letter-spacing:10px;/*文字间距*/
                text-decoration:line-through;/*文字划线*/
                text-decoration:underline;/*下划线*/
                text-decoration:none;/*去除文字样式*/
                text-align:center;/*文字居中*/
                line-height:100px;/*行高*/
                height:100px;/*p标签的高度*/
                /*行高与文本的高度一致的时候，文本才能居中显示*/
                background-color:yellow;
                font-size:20px/*文字大小*/;
                font-weight:bolder;/*加粗*/
                font-style:italic;/*倾斜*/    
            }
        </style>
    </head>
    <body>
        <p>测试文本样式标签</p>
        <p>2</p>
    </body>
</html>

列表样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            li{
                list-style:none;/*去除li前面的小点*/
                list-style:none;
                list-style:none;
                list-style:none;
                list-style:none;
                list-style:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>abc</li>
            <li>bcd</li>
            <li>efg</li>
        </ul>
        <p>abcc</p>
    </body>
</html>

背景样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .bg1{background-image:url(/day2/img/jiucuo.png);
            /*background-repeat是是否平铺 repeat-x x轴平铺 repeat-y是y轴平铺*/
            background-repeat:no-repeat;
            /*background-position是确定位置*/
            background-position:0% 0%;
            height:20px;
            /*border是线条粗细，solid是线条设置*/
            border:1px solid red;
            }
        </style>
    </head>
    <body>
        <p class="bg1">bg1</p>
    </body>
</html>

模拟导航栏：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{border:0px;padding:0px;margin:0px}
            li{
                list-style:none;
                line-height:30px;
                height:30px;width:65px;
                border:1px solid pink;
                text-align:right;
                background-image:url(/day2/img/daohang.png);
                background-repeat:no-repeat;
            }
            .t{background-position:0% 10%}
            .th{background-position:0% 20%}
            .f{background-position:0% 30%}
            .fi{background-position:0% 40%}
            .s{background-position:0% 50%}
            .se{background-position:0% 60%}
            .e{background-position:0% 70%}
            .n{background-position:0% 80%}
            .te{background-position:0% 90%}
            .el{background-position:0%100%}
            a{text-decoration:none;
            }
            a:hover{color:white;
            background-color:pink;}
            a:link{color:black;}
        </style>
    </head>
    <body>
        <ul class="ull">
            <li><a href="#">导航</a></li>
            <li class="t"><a href="#">导航</a></li>
            <li class="th"><a href="#">导航</a></li>
            <li class="f"><a href="#">导航</a></li>
            <li class="fi"><a href="#">导航</a></li>
            <li class="s"><a href="#">导航</a></li>
            <li class="se"><a href="#">导航</a></li>
            <li class="e"><a href="#">导航</a></li>
            <li class="n"><a href="#">导航</a></li>
            <li class="te"><a href="#">导航</a></li>
            <li class="el"><a href="#">导航</a></li>
        </ul>
    </body>
</html>

左边为制作图右边为实物图需要图片

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70

浮动：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .one{
                height:100px;width:50px;
                background-color:yellow;
                /*绝对位置 相比于浏览器哦左上角（0，0）点开始*/
                position:absolute;
                top:100px;
            }
            .two{
                height:20px;width:10px;
                background-color:black;
                /*相比较自己原来的位置*/
                position:relative;
                /*left:10px;*/
                top:10px
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>