HTML (css样式规范)必看篇

时间:2017-04-09

CSS样式规范

1.类选择器

2.标签选择器

3.id选择器

4.CSS样式的子选择器

类选择器

1.必背的固定结构,成为CSS样式标记。所有的样式都可以写成CSS样式的标记中

<style type="text/css">

</style>

2. type=“text/css” 意思是声明这个标记是css样式类型

type:类型的意思
text:文本的意思
css:叠层样式表

3.类选择器语法格式 .类名 (点加类名)

写的位置:在css样式的标记中
调用方法在HTML标签内部写上 class=类名

4.命名规范

建议是纯字母或字母后面加数字,请勿数字开头,其它虽然可以使用请问使用

5.为什么要把行内的css提取到css的标记中

优点一:保持HTML的层次清晰,方便检测错误
优点二:可以重复使用css样式

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="UTF-8">  
  8.   
  9.     <title>类选择器</title>  
  10.   
  11.     <style type="text/css">  
  12.   
  13.         /*类选择器*/  
  14.   
  15.         .box{width: 200px; height: 50px; background-color: aqua;border: 10px salmon solid}  
  16.   
  17.     </style>  
  18.   
  19. </head>  
  20.   
  21. <body>  
  22.   
  23. <div class="box"></div>  
  24.   
  25. <div class="box"></div>  
  26.   
  27. <div class="box"></div>  
  28.   
  29.    
  30.   
  31. </body>  
  32.   
  33. </html>  
样式结果

ID选择器

1. ID选择器的语法格式 #ID名称

写的位置:在CSS样式的标记中
调用方法在HTML标签内部写上 id="ID名称"
 
2. 命名规范

同类上一节的类名一样的道理

3. 为什么要把行内的CSS提取到CSS的标记中

优点一:保持HTML的层次清晰,方便检测错误
优点二:区分优先级,如果需要复用请选择类选择器

  • 共5页:
  • 上一篇1/5
  • 下一页
  • 上一篇:浅谈HTML代码中的空格和空行 下一篇:详解CSS3浏览器兼容

    相关文章

    最新文章