css样式应用，有3种方式
1、标签内部通过style属性，来给标签设置css样式
<div id=i1 style="background-color: rebeccapurple;height: 100px; 100px">背景色</div>
2、head中增加style标签，在style标签内部，通过id选择器为目标html配置css样式(id属性在使用时需添加#号)
<head> <style>
#i1{ background-color: gold; height: 100px; width: 100px; } </style> </head> <body> <div id="i1">背景色</div> </body>
3、通过编写样式表文件**.css，在head标签中用link引入到当前html中
新建一个Stylesheet文件，以css结尾---》demo.css
demo.css文件内容： #i2{ background-color: palevioletred; height: 100px; 100px; } <!--html文件中引用--> <head> <link rel="stylesheet" href="demo.css"> </head>
CSS优先级
标签中style优先级最高，其次以标签为中心在代码中就近找，也就是从下往上找，离哪个近就优先用哪个
选择器
id选择器
class选择器
标签选择器
层级选择器
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 选择器--> <style> /*id选择器*/ #i1{ background-color: green; width: 100px; height: 100px; } /*class 选择器*/ .c1{ background-color: green; width: 100px; height: 100px; } .wh{ width: 100px; height: 100px; } .bc-1{ background-color: red; } .bc-2{ background-color: blue; } /*标签选择器*/ div { background-color: green; } /*层级选择器 很少用*/ div span{ background-color: red; } #i1 span{ } .c1 span{ } /*属性选择器*/ div[dsx="nb"]{ background-color: red; } </style> </head> <body> <!--id 选择器,使用时加#--> <div id="i1">ID选择器</div> <!--class选择器，使用时加.--> <div class="c1">class选择器</div> <!-- class属性允许有多个，通过空格分隔即可，例如实现不同颜色 相同宽高的正方型 --> <div class="wh bc-1"></div> <div class="wh bc-2"></div> <!-- 所有的div都是绿色的，用到的是标签选择器，直接用div即可--> <div class="wh">1111</div> <!-- 层级选择器--> <div> <span>dsx</span> </div> <!-- 属性选择器，属性是自定义的，使用时用div[]定位--> <div dsx="nb" class="wh"></div> </body> </html>
display属性：
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签--> <div style="height: 100px;background-color: black;display: inline">外联标签</div> <!-- display：block 内联标签转换为块及标签--> <span style="height: 100px;background-color: red;display: block;">内联标签</span> <!-- 行内标签：无法设置高度、宽度、padding、margin--> <!-- 块级标签：无法设置高度、宽度、padding、margin--> <span style="background-color: blue; 100px;height: 100px;">大师兄</span> <!-- 通过display:inline-block 可以完美的解决这个问题 他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性--> <span style="background-color: blue; 100px;height: 100px;display: inline-block;">大师兄</span> <!-- 让标签消失 display：none--> <span style="background-color: #336699;display: none">我不显示的</span> <!-- 外边距 margin 内边距 padding--> <!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 --> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;margin-top: 30px"></div> </div> <!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 --> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;padding: 10px">内边距增加</div> </div>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wh { width: 100px; height: 100px; } .bc-1 { background-color: red; .dis-inline { /*由块级标签，变成行内标签*/ display: inline; } .dis-block{ /*行内转 块*/ display: block; } .dis-block-inline{ /*既是块也是行内*/ display: inline-block; } .c1{ border: 1px solid red; width: 100%; height: 200px; } .c2{ background-color: blue; width: 100%; height: 48px; /*外边距*/ /*margin-top: 0;*/ /*内边距*/ padding-top: 0; } </style> </head> <body> <!-- display --> <!-- <div class="dis-inline bc-1">块div 变成行内</div>--> <!-- <span class="dis-block bc-1">123</span>--> <!-- 行内标签必须自己有内容，无法应用宽、高、外边距、内边距--> <!-- <span style="height: 100px; 100px;background-color: red">123</span>--> <!-- <span class="dis-block-inline wh bc-1"></span>--> <input type="text" placeholder=""> <div class="c1"> <div class="c2"></div> </div> </body> </html>