文章标题CSS常用选择器及与HTML结合方式

最新推荐文章于 2024-09-20 02:44:07 发布

Ren-YY

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css选择器 css结合HTML css

本文链接：https://blog.csdn.net/u013033038/article/details/44522223

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

标签分类:

块级标签:block ` div   p  ul li table 
行内标签:in line span

CSS与HTML结合方式：

A：在标签中的style属性里书写css代码
    例：<div style="color:red;" >大家好</div>
B：把css代码写到head中的style标签里，可提高css代码的重用性.
    例：
    <style type="text/css" >
        div{
            color:red;
        }
    </style>
C：导入外部css，在ie中这种方式导入外部css文件,最多导入33个.这种导入方式是输入css代码的范畴.
    例：
    <style type="text/css" >
        @import url(div.css);
    </style>
D：导入外部css，输入HTML代码的导入方式.导入数量没有上限.
    与css中import的方式的不同:
        link加载步骤:
            1 加载所有html标签
            2 加载css
            3 出效果
        import 步骤:
            1加载所有html标签
            2.加载css
            3.加载外部css
            4.出效果
        区别1:link效率更高一些
        区别2:link加载的css可直接受控于js
              import加载的css不能被js所控制.

例：

选择器：

A：标签选择器:直接写标签名
    覆盖原则:
        1由内到外
        2由下到上
    例：
    <style type="text/css" >
        div {
                color:red;
            }
    </style>
B：class选择器:.class名称，
    相同元素不同效果时使用.
    例：
    <style type="text/css" >
        .one{
            color: red;
        }
    </style>
    . . . . . . 
    <body><div class="one" >大家好</div></body>
C ：id选择器:#id名称
    注意:给html元素加id属性时,要保证id的唯一性.
    相同class不同效果时使用.
    例：
    <style type="text/css" >
        #div01{
            color: red;
        }
    </style>
    . . . . .  
    <body>
    <div class="one" >大家好</div>
    <div id="div01" class="one" >大家好</div>
    <span class="one" >大家好</span>
    </body>
D：复合选择器:选择器1,选择器2,.....
    可以同时应用多个选择器.
    例：
    <style type="text/css" >
        div,span{
        color:red;
        }
    </style>
     . . . . . . 
    <body>
        <div  >大家好</div>
        <div id="div01"  >大家好</div>
        <span  >大家好</span>
    </body>
E ：后代选择器:祖先元素 后代元素
    //将所有div中的span标签变成红色
    例：
    <style type="text/css" >
        div span{
            color:red;
        }
    </style>
    . . . . . . . 
    <body>
    <span>span</span>
    <div>大家好<div>span<span>span</span></div>大家好</div>
    </body>
F：子元素选择器:父元素>子元素
    //将所有div中的子span标签变成红色
    例：
    <style type="text/css" >
        div > span{
            color:red;
        }
    </style>
    . . . . . 
    <body>
        <span>span</span>
        <div>大家好<span>span</span>大家好<span>span</span></div>
    </body>
G：相邻兄弟选择器:标签+相邻标签
注意: 只选择相邻的下个兄弟,也就是2弟.//与span相邻的div变红
    例：
    <style type="text/css" >
        span + div{
            color:red;
        }
    </style>
    . . . . . . 
    <body>
        <span>span</span>
        <div>大家好<span>span</span>大家好<span>span</span></div>
        <span>span</span>
    </body>
H：属性选择器:[属性名称]
    例：
    <style type="text/css" >
        [href]{
            color:red;
        }
    </style>
    . . . . . . 
    <body>
        <a href="#">问世间情为何物!</a><br/>
        <a>问世间情为何物!</a><br/>
    </body>
I：伪类选择器:
    1.从来没点过  :link 向未被访问的链接添加样式。
    2.点的时候    :active 向被激活的元素添加样式。
    3.点过的效果  :visited 
    4.鼠标指上去的时候 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 
    例：
    <style type="text/css" >
        a:link {
            color:pink;
        }
        a:active{
                color:black;
        }
        a:hover{
                color:white;
        }
        a:visited{
                color:green;
        }
    </style>
     . . . . . 
    <body>
        <a href="01-标签类型.html">大家好</a><br/>
    </body>