CSS引用说明
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> <!--css外部引用--> <link rel="stylesheet" href="css/common.css" /> <!--css内部引用--> <style> <!--标签中class名为logo时使用‘.’--> .logo{ background-color: blue; font-size: 18px; border: 1px solid #fff; } <!--标签中所有id名为alex时使用‘#’--> #alex{ background-color: yellow; font-size: 18px; border: 1px solid #fff; } <!--对所有div、a标签生效--> div,a{ color: red; } <!--对所有a标签下的div标签生效--> a div{ color: red; } <!--对所有类型为text的input标签生效--> input[type='text']{ } </style> </head> <body> <!--css标签内引用--> <div style="background-color: red">123</div> <div class="logo">456</div> <div id="alex">789</div> </body> </html>
常用属性示例
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> <style> .logo{ background-color: red; font-size: 18px; border: 1px solid #fff; } .logo a,.logo p{ background-color: aqua; font-size: 50px; } </style> </head> <body> <div class="logo"> <div>div标签</div> <a>a标签</a> <p>p标签</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> <style> .logo{ top: 9px; left: 18px; width: 18px; height: 16px; background: url("img/1.png") 0 -58px no-repeat ; } </style> </head> <body> <div class="logo"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> </head> <body> <div style="border: 1px solid red;">hello</div><br/> <div style="border: 1px dotted red;">hello</div><br/> <div style="border: 1px solid red;height: 70px;background-color: red"> <div style="border: 1px dotted blue;height: 30px;margin-top: 30px;background-color: blue"></div> </div> <div style="border: 1px solid red;height: 70px;background-color: red"> <div style="border: 1px dotted blue;height: 30px;padding-top: 30px;background-color: gray">hello</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> </head> <body> <!--设置float属性后，要让父div能自适应float块的高度，需添加一个子元素并设置clear属性 或者父div添加overflow和zoom属性--> <div style="overflow: hidden;zoom: 1"> <div style="background-color: red;float: left;width: 20%">div1</div> <div style="background-color: gray;float: left;width: 80%">div2</div> <div style="clear:both"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> </head> <body> <!-- position：relative、absolute、fixed <br/> fixed:固定标签位置 relative/absolute总是成对出现 --> <!-- <div style="position: fixed;height: 45px;width: 100%;background-color: red;top: 0px"></div> <div style="margin-top: 50px"> <div style="width: 200px;background-color: gray;position: fixed;top: 50px;bottom:0">left</div> <div style="margin-left: 220px;"> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> <p>123456</p><p>123456</p><p>123456</p><p>123456</p> </div> </div> --> <div style="position: relative;width: 500px;height: 200px;background-color:gray "> <div style="width: 20px;height: 20px; position: absolute;left: 0;top: 0;bottom: 0;background-color: red"> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> </head> <body> <img src="img/2.jpg"> <!--透明度属性：opacity，值的范围：0-1--> <img src="img/2.jpg" style="opacity: 0.5"> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>标题</title> <style> .shade{ position: fixed; top: 0; right:0; bottom: 0; left: 0; background-color: #333; opacity: 0.6; } .delete{ position: fixed; top: 50%; left: 50%; width: 400px; height: 200px; background-color: white; margin-left: -200px; margin-top: -100px; } .hide{ display: none; } </style> </head> <body> <table> <tr> <th>IP</th> <th>编辑</th> </tr> <tr> <td>1.1.1.1</td> <td>删除</td> </tr> <tr> <td>2.2.2.2</td> <td>删除</td> </tr> <tr> <td>3.3.3.3</td> <td>删除</td> </tr> </table> <!--遮罩层--> <div class="shade"></div> <!--删除层--> <div class="delete"> <div>提示</div> <div>确定要删除吗？</div> <div> <input type="button" value="确定"> <input type="button" value="取消"> </div> </div> </body> </html>
