• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML (css样式规范)必看篇

    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的层次清晰，方便检测错误
    优点二：区分优先级，如果需要复用请选择类选择器

    4. ID不允许重复调用，id就想身份证编号一样，每个都是不同的

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2.   
    3. <html lang="en">  
    4.   
    5. <head>  
    6.   
    7.        <meta charset="UTF-8">  
    8.   
    9.        <title>Title</title>  
    10.   
    11.        <style type="text/css">  
    12.   
    13.         /*ID选择器*/  
    14.   
    15.         /*ID唯一标识符的意思,设计的目的就是让id唯一性*/  
    16.   
    17.         #box{width: 200px;height: 50px;background-color: bisque}  
    18.   
    19.         #boy,#boy1,#boy2{width: 200px;height: 50px;background-color: bisque;  
    20.   
    21.         border: 2px seagreen solid}  
    22.   
    23.         #gil,.doc{width: 200px;height: 50px;background-color: bisque;  
    24.   
    25.         border: 2px seagreen solid}  
    26.   
    27.         /*设置多个共享一个参数*/  
    28.   
    29.    
    30.   
    31.     </style>  
    32.   
    33.    
    34.   
    35. </head>  
    36.   
    37. <body>  
    38.   
    39.     <div id="gil"></div>  
    40.   
    41.     <div class="doc"></div>  
    42.   
    43.     <div class="doc"></div>  
    44.   
    45.    
    46.   
    47. </body>  
    48.   
    49. </html>  
    样式结果

    标签名选择器

    用到多个标签使用相同的属性，可以写成选择器。方面下面所有用到这个标签时共有这个属性

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <style type="text/css">  
    7.         /*标签名  选择器*/  
    8.         div{border: 10px salmon solid; width:99px;height: 20px}  
    9.     </style>  
    10. </head>  
    11. <body>  
    12.     <div>周杰伦</div>  
    13.     <div>孙其虎</div>  
    14.     <div>张杰</div>  
    15. </body>  
    16. </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.         div b{color: crimson}  
    14.   
    15.         /*只影响 具有div 下的 b子标签受影响*/  
    16.   
    17.         div >b{color: skyblue}  
    18.   
    19.         /*只影响儿子，不影响孙子*/  
    20.   
    21.     </style>  
    22.   
    23. </head>  
    24.   
    25. <body>  
    26.   
    27.     <div><b>美国</b></div>  
    28.   
    29.     <div><b><b>中国</b></b></div>  
    30.   
    31.    
    32.   
    33. </body>  
    34.   
    35. </html>  
    样式结果

    二、样式优先级

    1.CSS执行顺序，在同等优先级的情况下，下一行的如果与上一行的CSS有冲突一下一行为标准

    在优先级不同的情况下，优先级高的覆盖优先级的低的。

    2.选择器优先级顺序排列

    第一名：行内样式 1000;
    第二名：ID选择器 100;
    第三名：元素名.类名 10;
    第四名：类名
    第五名：标签名 1;

    3.主意事项：

    当你写的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.         .red{color: aqua}  
    14.   
    15.         .blue{color: crimson}  
    16.   
    17.         .dce{color: antiquewhite}  
    18.   
    19.         /*在同级中相同的属性，标准调用下面的*/  
    20.   
    21.         div{color: blue}  
    22.   
    23.         /*影响范围越广的，优先级越低*/  
    24.   
    25.    
    26.   
    27.         #blue{ color: springgreen}  
    28.   
    29.         #ket{color: blueviolet}  
    30.   
    31.         div.red{color: aqua}  
    32.   
    33.         /*类名>元素名*/  
    34.   
    35.         /*ID优先级最高*/  
    36.   
    37.         #alex b{color: chartreuse}  
    38.   
    39.         b{color: blue;border: 2px cornsilk solid}  
    40.   
    41.    
    42.   
    43.     </style>  
    44.   
    45. </head>  
    46.   
    47. <body>  
    48.   
    49. <div id="ket" class="red" style="color: black">优先sex</div>  
    50.   
    51. <!--在行内样式最高-->  
    52.   
    53. <div id="blue" class="red">优先</div>  
    54.   
    55. <div class="blue red dce"> 优先级</div>  
    56.   
    57. <div id="alex"><b>中国</b></div>  
    58.   
    59. <b>美国</b>  
    60.   
    61. </body>  
    62.   
    63. </html>  
    样式

    以上就是小编为大家带来的HTML (css样式规范)必看篇全部内容了，希望大家多多支持脚本之家~

    原文地址：http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

    上一篇：HTML中相似的标签和属性的区别详解
    下一篇：浅谈HTML代码中的空格和空行
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML (css样式规范)必看篇 HTML,css,样式,规范,必看篇,