标签:选择器 技术 文件 images com charset body html 通用
每个css由两部分组成:选择器和声明,声明又包括属性和属性值(json格式key:value)
有如下几种:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css爱之初体验</title> 6 <style type="text/css"> 7 #show2{color:gold;font-size: 40px} 8 .s1{color: red;font-size: 15px} 9 span{color: #0000cc;font-size: 20px} 10 .s2 span{ 11 color: #05B2D2;font-size: 40px; 12 } 13 p,h1,a{color: #0000cc;font-size: 5px} 14 #show1{color:gold;} 15 .show {color:pink;} 16 h1 {color:red;} 17 * {color:green;} <!--通用选择器--> 18 </style> 19 </head> 20 <body> 21 <!--行内样式--> 22 <div style="color: red;font-size: 35px">css第一部分</div> 23 <!--标签选择器--> 24 <span>css爱之初体验1</span> 25 <!--id选择器--> 26 <div id="show2">css爱之初体验2</div> 27 <!--类选择器--> 28 <div class="s1">css爱之初体验3</div> 29 <!--包含选择器--> 30 <div class="s2"> 31 <span>css爱之初体验4</span> 32 <a>css爱之初体验5</a> 33 </div> 34 <!--分组选择器--> 35 <p>css爱之初体验6</p> 36 <h1>css爱之初体验7</h1> 37 <a>css爱之初体验8</a> 38 <div>css爱之初体验9</div> 39 <!--行内样式>id选择器>类选择器>标签选择器>通用选择器--> 40 <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1> 41 </body> 42 </html>
内部样式和行内样式,上文已写。
外部样式:
使用内容样式容易和html代码混淆,我们单独把样式内容单独写入一个文件,叫外部样式,使用link标签引入。如下:
<head> <meta charset="UTF-8"> <title>css爱之初体验</title> <link href="a.css" type="text/css" rel="stylesheet"> </head>
标签:选择器 技术 文件 images com charset body html 通用
原文地址:http://www.cnblogs.com/liumj0305/p/6395729.html