码迷，mamicode.com
首页 > Web开发 > 详细

css

时间：2019-05-31 16:55:25      阅读：143      评论：0      收藏：0      [点我收藏+]

标签：之间   class选择器   ack   属性   www   分组   set   图片   快捷   

1.css注释 
快捷键：ctrl+/
/**/

2.CSS引用方式

2.1内嵌方式

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
<!--                   内嵌方式-->
        <style type="text/css">
            p {
                color: aqua;
            }
        </style>
<!--                   内嵌方式-->
    </head>
<body>
<p>我的内容</p>
</body>
</html>

技术图片

2.2行内样式

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
    </head>
<body>
<!--                   行内样式-->
<p style="color: aqua">我的内容</p>
<!--                    行内样式-->
</body>
</html>

技术图片

2.3外联样式表-连接式

index.css

p{
    color: aqua;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <!--        外联样式表-链接式-->
        <link rel="stylesheet" href="index.css">
        <!--        外联样式表-链接式-->
    </head>
<body>
<p>我的内容</p>
</body>
</html>

技术图片

2.4外联样式表-@import url()方式导入式1

index.css

p{
    color: aqua;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <!--        import导入式，必须放在style的第一行-->
        <style>
            @import url(index.css);
        </style>
        <!--        import导入式，必须放在style的第一行-->
    </head>
<body>
<p>我的内容</p>
</body>
</html>

技术图片

2.5外联样式表-@import url()方式导入式2

common.css

p{
    color: aqua;
}
index.css

/*改行必须放在第一行*/
@import url(common.css);
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <link rel="stylesheet" href="index.css">
    </head>
<body>
<p>我的内容</p>
</body>
</html>

技术图片

"link方式与import方式区别"
1.link方式(<link rel="stylesheet" href="index.css">)属于XHTML，@import属于css2.1
2.对于不兼容CSS2.1的浏览器，@import方式是无效的
3.link方式导入css文件，会先把css文件加载到页面中，然后进行编译显示
4.@import方式导入css文件，客户端会先显示HTML结构，再加载CSS文件到网页中

3.基本选择器

3.1标签选择器

p{
        color: aqua;
}

1.标签选择器可以选中所有的标签元素，比如div,ul,li,p等
2.不管标签藏得多深，都能选中
3.选中的是所有的该标签，而不是某一个标签，所以说是"共性"，而不是"特性"

3.2ID选择器

#p_id{
        color: blue;
}
1.同一个页面中id不能重复
2.任何标签都可以设置id属性
3.id命名规范，要以字母，数字，下划线组合，大小写严格区分。

3.3类选择器

.p_class{
        color: aquamarine;
}
1.所谓的类就是class, .class与id非常相似，任何的标签都可以加类
2.一个页面中，类是可以重复的
3.同一个标签中，可以携带多个类，用空格隔开
4.一定要有"公共类的概念
5.不要试图用一个类把页面写完。每个标签可以设置多个类，来共同设置样式"
6.每个类要尽可能小，有公共的概念，能让更多的标签使用
7.一个好的前端工程师能够很好的设计类，使用类

"使用id还是class呢？"
尽可能的使用class
id一般是用在js的，在js中一般通过id来获取标签

3.4演示

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p{
                color: aqua;
            }
            #p_id{
                color: blue;
            }
            .p_class{
                color: aquamarine;
            }
        </style>
    </head>
<body>
<p>我的内容-标签选择器</p>
<p id="p_id">我的内容-ID选择器</p>
<p class="p_class">我的内容-class选择器</p>
</body>
</html>

技术图片

3.4通用选择器

*{
        color: blueviolet;
}
不推荐使用通用选择器

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>通用选择器演示</title>
        <style>
            *{
                color: blueviolet;
            }
        </style>
    </head>
<body>
<p>我的内容-标签选择器</p>
<p id="p_id">我的内容-ID选择器</p>
<p class="p_class">我的内容-class选择器</p>
</body>
</html>

技术图片

3.5小需求-练习基本类选择器

"要实现的效果"

技术图片

<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            .big{
                font-size: 50px;
            }
            .set_color{
                color: aquamarine;
            }
            .under_line{
                text-decoration: underline;
            }
        </style>
    </head>
<body>
<p class="big set_color">我的内容</p>
<p class="set_color under_line">我的内容</p>
<p class="big under_line">我的内容</p>
</body>
</html>

4.高级选择器

4.1后代选择器-方式一

div p{
        color: red;
}
div下的p标签，不管p标签在第几层，都会被修饰
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            div p{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p>div-div-p我的内容</p>
        <span>div-div-span我的内容</span>
    </div>
    <form action="www">
        <p>div-form-p我的内容</p>
        <span>div-form-span我的内容</span>
    </form>
    <p>div-p我的内容</p>
    <span>div-span我的内容</span>
</div>

</body>
</html>

技术图片

4.2后代选择器-方式二

div div p{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            div div p{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p>div-div-p我的内容</p>
        <span>div-div-span我的内容</span>
    </div>
    <form action="www">
        <p>div-form-p我的内容</p>
        <span>div-form-span我的内容</span>
    </form>
    <p>div-p我的内容</p>
    <span>div-span我的内容</span>
</div>

</body>
</html>

技术图片

4.3后代选择器-方式三

.div-wild div p{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            .div-wild div p{
                color: red;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <div>
        <p>.div-wild div p我的内容</p>
        <span>.div-wild div span我的内容</span>
    </div>
</div>

</body>
</html>

技术图片

4.4子代选择器

.div-wild>p{
        color: red;
}
只会选择class="div-wild"下一层的p标签，不会选择再里面几层的p标签
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            .div-wild>p{
                color: red;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <p>.div-wild>p我的内容</p>
    <div>
        <p>.div-wild>div>p我的内容</p>

    </div>
</div>

</body>
</html>

技术图片

4.5毗邻选择器

div+p{
        color: red;
}
找到所有紧挨着div后面的第一个p标签
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            div+p{
                color: red;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <p>div的前面的p标签</p>
    <div>
        <p>div>div>p我的内容</p>

    </div>
    <p>div的后面的p标签</p>
    <p>div的后面的p标签</p>
</div>

</body>
</html>

技术图片

4.6弟弟选择器

div~p{
        color: red;
}
找到所有div标签后，同级别的p标签
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            div~p{
                color: red;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <p>div的前面的p标签</p>
    <div>
        <p>div>div>p我的内容</p>

    </div>
    <p>div的后面的p标签</p>
    <span>div的后面的span标签</span>
    <p>div的后面的p标签</p>
</div>

</body>
</html>

技术图片

4.7交集选择器

p#div_div_p{
        color: red;
}
p.div_class{
        color: green;
}
两个选择选择内容的交集，两个选择器之间不能有空格
第一个必须是标签选择器，第二个必须是类选择器或ID选择器
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p#div_div_p{
                color: red;
            }
            p.div_class{
                color: green;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <p>div的前面的p标签</p>
    <div>
        <p id="div_div_p">p#div_div_p</p>

    </div>
    <p class="div_class">p.div_class</p>
    <span>div的后面的span标签</span>
    <p>div的后面的p标签</p>
</div>

</body>
</html>

技术图片

4.8并集选择器-分组选择器

#div_div_p,.div_class{
        color: red;
}

通常，会分两行来写
#div_div_p,
.div_class{
        color: red;
}
两个选择器所选择的范围的并集
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            #div_div_p,.div_class{
                color: red;
            }
        </style>
    </head>
<body>
<div class="div-wild">
    <p>div的前面的p标签</p>
    <div>
        <p id="div_div_p">p#div_div_p</p>

    </div>
    <p class="div_class">p.div_class</p>
    <span>div的后面的span标签</span>
    <p>div的后面的p标签</p>
</div>

</body>
</html>

技术图片

5.属性选择器

5.1根据属性查找

p[title]{
        color: red;
}
含有title属性的标签
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.2根据属性和值查找

p[title="my-p"]{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title="my-p"]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.3属性值以my开头

p[title^="my"]{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title^="my"]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.4属性值以p结尾

p[title$="p"]{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title$="p"]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.5属性值含有v的元素

p[title*="v"]{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title*="v"]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.6属性值有多个值或以空格分割中，有一个值为hello

p[title~="hello"]{
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            p[title~="hello"]{
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <p title="my-p hello">p title="my-p"</p>
        <p title="div-p">p title="div-p"</p>

    </div>
</div>

</body>
</html>

技术图片

5.7表单常用

input[type="text"]{
        background: green;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            input[type="text"]{
                background: green;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <input type="text">

    </div>
</div>

</body>
</html>

技术图片

6.伪类选择器

6.1(a标签的"爱恨情仇")

/*‘爱恨原则‘ love hate*/
/*没有被访问的a标签的样式*/
div a:link{
        color: green;
}
/*访问过后的a标签的样式*/
div a:visited{
        color: blue;
}
/*鼠标悬停时a标签的样式*/
div a:hover{
        color: darkblue;
}
/*鼠标点住的时候a标签的样式*/
div a:active{
        color: yellow;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            div a:link{
                color: green;
            }
            div a:visited{
                color: blue;
            }
            div a:hover{
                color: darkblue;
            }
            div a:active{
                color: yellow;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <a href="www" target="_blank">a:link</a>
    </div>
</div>

</body>
</html>

技术图片

6.2first-child,last-child,nth-child(3)

/*选中第一个元素*/
div ul li:first-child{
        color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
        color: deeppink;
}
/*选中当前指定的元素  数值从1开始*/
div ul li:nth-child(3){
        color: blue;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            /*选中第一个元素*/
            div ul li:first-child{
                color: red;
            }
            /*选中最后一个元素*/
            div ul li:last-child{
                color: deeppink;
            }
            /*选中当前指定的元素  数值从1开始*/
            div ul li:nth-child(3){
                color: blue;
            }

        </style>
    </head>
<body>
<div>
    <div>
        <ul>
            <li>div ul li:first-child</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>div ul li:last-child</li>
        </ul>
    </div>
</div>

</body>
</html>

技术图片

6.3nth-child(n)

/*n表示选中所有 从0开始的  0的时候表示没有选中*/
div ul li:nth-child(n){
        color: aqua;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            /*n表示选中所有 从0开始的  0的时候表示没有选中*/
            div ul li:nth-child(n){
                color: aqua;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <ul>
            <li>div ul li:first-child</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>div ul li:last-child</li>
        </ul>
    </div>
</div>

</body>
</html>

技术图片

6.4nth-child(2n)

/*偶数*/
div ul li:nth-child(2n){
        color: aqua;
}
/*奇数*/
 div ul li:nth-child(2n-1){
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            /*偶数*/
            div ul li:nth-child(2n){
                color: aqua;
            }
            /*奇数*/
             div ul li:nth-child(2n-1){
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <ul>
            <li>div ul li:first-child</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>div ul li:last-child</li>
        </ul>
    </div>
</div>

</body>
</html>

技术图片

6.5nth-child(3n+1)

/*间隔几行换色*/
 div ul li:nth-child(3n+1){
        color: red;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>

            /*间隔几行换色*/
             div ul li:nth-child(3n+1){
                color: red;
            }
        </style>
    </head>
<body>
<div>
    <div>
        <ul>
            <li>div ul li:first-child</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>11111111111111111</li>
            <li>div ul li:last-child</li>
        </ul>
    </div>
</div>

</body>
</html>

技术图片

7.伪元素选择器

7.1first-letter

 /*设置第一个首字母的样式*/
p:first-letter{
        color: red;
        font-size: 30px;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>

            /*设置第一个首字母的样式*/
            p:first-letter{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
<body>
<div>
    <div>
       <p>wwwwwwwwwww</p>
    </div>
</div>

</body>
</html>

技术图片

7.2p:before,p:after

/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
p:before{
        content: "p:before";
        color: aqua;
        font-size: 30px;
}
/*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
        content: "p:after";
        color: aqua;
        font-size: 30px;
}
<!DOCTYPE HTML>
<html>
    <head lang=‘en‘>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style>
            /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
            p:before{
                content: "p:before";
                color: aqua;
                font-size: 30px;
            }
            /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
            p:after{
                content: "p:after";
                color: aqua;
                font-size: 30px;
            }
        </style>
    </head>
<body>
<div>
    <div>
       <p>wwwwwwwwwww</p>
    </div>
</div>

</body>
</html>

技术图片

css

标签：之间   class选择器   ack   属性   www   分组   set   图片   快捷   

原文地址：https://blog.51cto.com/10983441/2403228
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！