示例
#header{ h1{ font-size:26px; font-weight:bold; } .menu{ width:200px; height:200px; ul>li{ list-style:none; } } }
说明
#header表示一个ID h1{ font-size:26px; font-weight:bold; }表示#header下的h1元素 .menu{ width:200px; height:200px; ul>li{ list-style:none; } }表示#header下的class="menu"的元素 依次类推
生成的css文件(example3.css)
#header h1 { font-size: 26px; font-weight: bold; } #header .menu { width: 200px; height: 200px; } #header .menu ul > li { list-style: none; }
在html使用css(less3.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>less3</title> <link rel="stylesheet" href="example3.css"> <style> #header{ width: 500px; height: 400px; border: 1px solid #ccc; } </style> </head> <body> <div id="header"> <h1>h1</h1> <div class="menu"> <ul> <li>...</li> </ul> </div> </div> </body> </html>
时间: 2024-10-07 06:13:46