侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

HTML (css样式规范)必看篇

前端  /  管理员 发布于 3年前   169

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


  • 上一条:
    win7支持4g内存的使用方法
    下一条:
    windows7无线路由器无法使用的解决办法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 近期文章
    • 在go语言中使用GoPDF包把html生成PDF文件示例(0个评论)
    • 在go语言中创建和解析(读取)符号链接示例(0个评论)
    • ubuntu 22.04系统中报错:Python 3.6 is no longer supported by the Python core team...解决方式(0个评论)
    • Laravel 10.4版本发布(0个评论)
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客