1、css选择器

一、CSS

rgb颜色对照表：https://www.114la.com/other/rgb.htm


1、在标签上设置style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: #2459a2; height: 45px" >ff</div>
    <div>2</div>
    <div>3</div>
</body>
</html>


2、编写css样式

  • 标签的style属性；
  • 写在head里面，style标签中写样式；

       id选择器

       class选择器

       标签选择器

       层级选择器

       组合选择器

       属性选择器

      


id选择器:

#id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{  #此处的#的值，与下面标签中的id相对应，为标签赋予样式；
            background-color: #2459a2;
            height: 45px;
        }
    </style>
</head>
<body>
    <div id="i1" >ff</div>  #此处就有了样式
    <div >2</div>
    <div>3</div>
</body>
</html>


class选择器:

##class选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i1{         #此处点后的值，与下面标签class的值相对应，为标签赋予样式；
            background-color: #2459a2;
            height: 45px;
        }
    </style>
</head>
<body>
    <div class="i1" >ff</div>      #此处就有了样式
    <div >2</div>
    <div>3</div>
</body>
</html>


标签选择器:

##注释
        /*
        .i1{
            background-color: #2459a2;
            height: 45px;
        }
        */



#标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{          #下面标签中的所有div设置上此样式
            background-color: #2459a2;
            height: 45px;
        }
    </style>
</head>
<body>
    <div class="i1" >ff</div>
    <div >2</div>
    <div>3</div>
</body>
</html>


层级选择器 :

##层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{    #span标签下的div标签拥有此样式；
            background-color: #dddddd;
            height: 45px;
        }
    </style>
</head>
<body>
    <div class="i1" >ff</div>
    <span>this is span
        <div >2</div>
    </span>
    <div>3</div>
</body>
</html>



##层级选择器扩展
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 div p{          #此处可以写多层，但是不要写太多，太多的时候，直接定义一个.xx即可；
            background-color: #dddddd;
            height: 45px;
        }
    </style>
</head>
<body>
    <div class="i1" >ff</div>
    <span class="c1">this is span
        <div >2
            <P>p标签</P>
        </div>
    </span>
    <div>3</div>
</body>
</html>


组合选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{        #与id选择器类似，可以用都好分隔，写多个
            background-color: #dddddd;
            height: 25px;
        }
    </style>
</head>
<body>
    <div id="i1" >ff</div>
    <div id="i2" >ff</div>
    <div id="i3" >ff</div>
</body>
</html>


属性选择器：

##对选择到的标签再通过属性再进行一次筛选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='text']{width: 100px; height: 200px}    #中括号前面是一个选择器
        input[n='w']{width: 100px; height: 200px}
        .c1[n='m']{width: 100px; height: 200px}    #先选择具有c1的，然后在筛选n=m的
    </style>
</head>
<body>
    <input type="text">
    <input type="password" n="w">
    <input class="c1" type="password" n="m">
</body>
</html>
posted @ 2019-05-04 21:29  米兰的小铁將  阅读(182)  评论(0)  编辑  收藏  举报