css文件引用

#i1l{
    background-color: chartreuse;
    height: 40px;
}
#i2l{
    background-color: olivedrab;
    height: 40px;
}
#i3l{
    background-color: plum;
}
/*class选择器 .名称 属性里class等于这个.名称就可以用*/
.c1{
    background-color: olivedrab;
    color: chartreuse;
}
/*标签选择器 可以span也可以div  意思是这个类型的标签都是这个样式*/
span{
    background-color: darkred;
    height: 40px;
}
/*层级选择器 span空格div 类似的 就是span下的div标签*/
span div{
    background-color: ghostwhite;
    height: 40px;
}
/*组合选择器 用逗号*/
.c1,.c2{
    background-color: lightslategray;
    height: 40px;
}
/*属性选择器 属性可以是自定义的 对选择到的标签再通过属性进行一次筛选*/
input[type='text']{
    width: 50px;
    height: 20px;}
/*标签优先级:标签上的style属性优先之后 按css样式里从下往上的顺序.就近原则*/
commons.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在标签style属性里写样式  写在head里-->
    <!--css文件引用-->
    <link rel="stylesheet" href="commons.css"/>
</head>
<body>
    <div id="i1l" >测试</div>
    <div id="i2l" >测试2</div>
    <div id="i3l" >测试3</div>
    <div class="c1">测试4</div>
    <span>测试5</span>
    <span>
        <div class="c2">测试层级</div>
    </span>
    <input class="c1" type="text">
    <input type="password">
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/kiko0o0/p/11089828.html