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样式里从下往上的顺序.就近原则*/
<!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"> <!--color 字体颜色--> <!--border 边框 ：1px 边框像素1 dotted 边框虚线 solid 实心边框--> <!--border 宽度：样式：颜色--> <!--width 宽度可以用%来定义，height尽量不要用%--> <!--font-size 字体大小 text-align 水平位置居中 line-height 垂直根据高度居中--> <!--font-weight 字体加粗--> <div style="height:48px;width:80%; border: 1px solid darkred; font-size:30px; font-weight: bold; text-align: center; line-height: 48px;">style</div> <!--float:letf 飘 块标签可以叠加在一行，前提不能超过100% 子块标签多个叠加超过父类宽度自动换行--> <div style="width: 300px;border:1px solid red;"> <div style="width: 20%;background-color: chartreuse;float: left">1</div> <div style="width: 80%;background-color: olive;float: left">2</div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> <!--原本div是块标签 但是style里添加 display: inline 就变为行内标签 等同span--> <!--原本span是行内标签 但是style里添加 display: block 就变为块标签 等同div--> <!--块级标签可以设置高度 宽度 边距 例如div ，但是行内标签不可以设置这些 例如span a--> <!--但是如果在style 里添加display: inline-block 呢它就具有块和行内标签所有属性 ：默认有多少占多少，高宽可设定--> <!--display:none 可以设置当前标签消失--> <div style="background-color: lightslategray;display: inline">行内标签</div> <span style="background-color: chartreuse">行内标签</span> <span style="background-color: chartreuse;display: block">行内标签</span> <!--外边距margin， 内边距padding--> <div style="background-color: cornflowerblue;height: 70px;"> <div style="background-color: forestgreen;height: 50px;padding-top: 10px;">padding</div> </div> <div style="background-color: cornflowerblue;height: 70px;"> <div style="background-color: peachpuff;height: 50px;margin-top: 10px;">margin</div> </div> </body> </html>
