引入css样式的三种方式
1、在标签中添加style属性
2、在head标签中加style标签
3、在head标签中加link标签，引入xx.css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--第三种 引入css样式的方法 在head中link 引入文件--> <link rel="stylesheet" href="s.css"> <!--第二种 引入css样式的方法 在head中加style--> <style> .c1{ background-color: green; } </style> </head> <body> <!--第一种 标签中加style属性--> <div class="c1" style="background-color: black">中秋节</div> </body> </html> <!--三种方式优先级 ：由内而外 由近到远--> <!--标签中style优先级最高，其次在代码中就近找，也就是重下往上找-->
css选择器
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<!--样式标签--> <style> /*id选择器*/ /*#代表id*/ #div1{ background-color: limegreen; } /*class选择器*/ /*.代表class*/ .c1{ border: double; } /*标签选择器*/ div{ background-color: aqua; } /*标签层级选择器*/ div span{ background-color: red; } /*id组合选择器*/ #i1,i2{ background-color: red; } /*class组合选择器*/ .c1,.c2{ background-color: red; } .c1{ background-color: red; } .c2{ width: 100px; height: 100px; } /*属性选择器*/ div[jnz="金牛座"]{ background-color: black; } </style> </head> <body> <!--css选择器 选择谁 如何选择标签--> <!--id选择器--> <div id="div1" >我是个人</div> <!--class选择器--> <div class="c1">我是个人</div> <!--标签选择器--> <div >jnz</div> <div >jnz</div> <div >jnz</div> <div >jnz</div> <!--标签层级选择器--> <div> <span>123</span> </div> <!--id组合选择器 id属性在一个html标签中不允许出现两个相同的--> <div id="i1">123</div> <div id="i2">123</div> <!--class组合选择器 class属性在一个html标签中可以有多个相同的--> <div class="c1 c2">哈哈哈</div> <div class="c1 c2">哈哈哈</div> <!--属性选择器--> <div jnz="金牛座">金牛座</div> </body> </html>
css属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .f1{ /*宽度*/ width: 100px; /*高度*/ height: 48px; /*背景色*/ background-color: red; float: left; } </style> </head> <body> <!--style里面写多个属性，要用分号隔开--> <!-- height：高 width：宽 --> <div style="height: 48px; 48px;border: 1px solid red">CSS</div> <!-- 宽高的设定可以是指定的像素 宽度也可以百分比 --> <div style="height: 48px; 80%;border: 1px solid red">CSS</div> <!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold--> <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;font-weight: bold">CSS</div> <!-- 边框 border：宽度 实线还是虚线 颜色--> <div style="height: 48px;border: 1px solid red">CSS</div> <!-- 边框 border 上下左右边框 都可单独配置 --> <div style="height: 48px;border-left: 1px dotted red">CSS</div> <!-- 平行方向左右居中 text-align: center --> <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center">LH</div> <!-- 垂直方向居中 line-height：垂直方向要根据标签高度--> <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div> <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行--> <div class="f1"></div> <div class="f1" style="background-color: limegreen;float: right" ></div> <div class="f1" style="background-color: black"></div> <!--display 可以在标签在行内和块级之间自由转换 块级标签的占满100%是相对来说，相对与他外层的div --> <!--块转行内 display:inline--> <div style="display: inline">金牛座</div> <!--块转行内 display:block--> <!--行内标签不可以应用 宽、高、外边距、内边距的样式--> <span style="display: block; 100px;height: 100px">呵呵呵</span> <!--希望行内标签能够设置宽、高、外边距、内边距的样式 display: inline-block 既是行内标签，又是块级标签--> <span style="display: inline-block; 100px;height: 100px; background-color: red">123</span> <!--display:none 隐藏--> <div style="display:none;border: 1px greenyellow dashed; 100px;height: 100px">123</div> <!-- margin 外边距 不改变自身，针对外侧div进行移动 --> <div style="border:1px red solid; 100%;height: 100px"> <div style="margin-top: 1px; 100px;height: 48px;background-color: limegreen"></div> </div> <!--padding 内边距 改变自身--> <div style="border:1px red solid; 100%;height: 100px"> <div style="padding-top: 1px; 100px;height: 48px;background-color: limegreen"></div> </div> </body> </html>
分层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 48px; background-color: limegreen; position: fixed; top:0; left: 0; right: 0; } </style> </head> <body style="margin: 0"> <!--position分层 绝对定位--> <!--固定顶部 style写在head中--> <div class="c1" ></div> <!--右下角固定不动的div 回到顶部--> <div style=" 48px;height: 48px; position: fixed;bottom:0;right: 0;background-color: blueviolet"></div> <!--注意，必须加margin-top: 48px 否则div中的内容会被固定顶部部分挡住--> <div style=" 100%;height: 1000px;border: red 4px solid;margin-top: 48px">jahdhfjekjahjfahhfa</div> <!--position 相对定位--> <div style=" 500px;height: 500px;border: 1px black solid; position: relative"> <div style=" 100px;height: 100px;background-color: blueviolet;position: absolute;top: 0;left: 0"></div> <div style=" 100px;height: 100px;background-color: hotpink;position: absolute;top: 0;right: 0"></div> <div style=" 100px;height: 100px;background-color: darkmagenta;position: absolute;bottom: 0;left: 0"></div> <div style=" 100px;height: 100px;background-color: greenyellow;position: absolute;bottom:0;right: 0"></div> </div> <!--z-index 0-999 控制上下层级 值大的显示在上面--> <div style="200px;height: 200px;border: 1px red solid;position: relative"> <div style="z-index:999; 200px;height: 200px;background-color: hotpink;position: absolute"></div> <div style="z-index:9; 200px;height: 200px;background-color: blanchedalmond;position: absolute"></div> </div> <!--cursor: pointer 箭头悬浮到按钮上时，鼠标变成小手--> <input type="button" value="登录" style="cursor: pointer"> <!--overflow属性 hidden 当图片或内容大于外层div时，自动截取左上角图片 auto 当图片或内容小于外层div时，自动隐藏滚动条 左边目录用auto scroll 无论图片多大都会显示滚动条 --> <div style="overflow:scroll; 200px;height: 200px;border: 1px red solid" > <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> </div> <!--background-image background-repeat--> <div style="background-image:url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-x;height: 500px; 500px;border: 1px black solid"> </div> <!--background-position--> <div style="background-image:url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:no-repeat;background-position:1px 1px; 50px;height: 50px;border: 1px black solid"> </div> </body> </html>