博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS的一些规范
阅读量:4472 次
发布时间:2019-06-08

本文共 1704 字,大约阅读时间需要 5 分钟。

  • 请使用简单的语法来链接样式表(type 属性不是必需的):
  • 短规则可以压缩为一行,就像这样:
p.into {font-family: "Verdana";  font-size: 16em;}
  • 长规则应该分为多行:
body {    background-color: lightgrey;    font-family: "Arial Black", Helvetica, sans-serif;    font-size: 16em;    color: black;}
开括号与选择器位于同一行在开括号之前用一个空格使用两个字符的缩进在每个属性与其值之间使用冒号加一个空格在每个逗号或分号之后使用空格在每个属性值对(包括最后一个)之后使用分号只在值包含空格时使用引号来包围值把闭括号放在新的一行,之前不用空格

注释:在逗号或分号之后添加空格,是所有书写类型的通用规则。

  • 选择器、属性和值都使用小写
  • 最后一个值也以分号结尾
body {    background-color:lightgrey;    font-family:"Arial Black", Helvetica, sans-serif;    font-size:16em;    color:black;}
  • 省略值为0时的单位
p {margin:0 10px; background-position:50% 0;}
  • 根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

显示属性       自身属性          文本属性和其他修饰display    width            fontvisibility  height         text-alignposition      margin           text-decorationfloat        padding          vertical-alignclear      border          white-spacelist-style  overflow         colortop        min-width        background
  • 如果属性间存在关联性,则不要隔开写。
p {position:relative;height:20px; line-height:20px; padding:5px; color:#000;}
  • 私有在前,标准在后
p {    -webkit-box-shadow:0 0 0 #000;    -moz-box-shadow:0 0 0 #000;    box-shadow:0 0 0 #000;}
  • 注释格式:/* 注释文字 */
对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。短注释应该在单行中书写,并在 
之前增加一个空格:
长注释,跨越多行,应该通过
在独立的行中书写:
  • 选择器顺序
从大到小(以选择器的范围为准)从低到高(以等级上的高低为准)从先到后(以结构上的先后为准)从父到子(以结构上的嵌套为准)/* 从大到小 */.m-list p{margin:0;padding:0;}.m-list p.part{margin:1px;padding:1px;}/* 从低到高 */.m-logo a{color:#f00;}.m-logo a:hover{color:#fff;}/* 从先到后 */.g-hd{height:60px;}.g-bd{height:60px;}.g-ft{height:60px;}/* 从父到子 */.m-list{width:300px;}.m-list .itm{float:left;}

转载于:https://www.cnblogs.com/YeChing/p/6247227.html

你可能感兴趣的文章
2018-2019 2 20165203 《网络对抗技术》 Exp1 PC平台逆向破解
查看>>
软件开发小组建议
查看>>
String定义与方法
查看>>
Linux-文件元数据操作
查看>>
Android中用Application类实现全局变量
查看>>
Leetcode: Majority Element
查看>>
android 铃声设置流程
查看>>
springboot的一些配置
查看>>
SAP CRM中间件下载equipment时遇到的一个错误
查看>>
jqGrid专题:参数文档
查看>>
[转]连续创建多个Oracle触发器失败,单个创建才成功的解决方法
查看>>
JSON
查看>>
ABP手机端调用API时的CORS
查看>>
[leetcode]Longest Common Prefix
查看>>
数独项目--项目改进:
查看>>
伪数组变数组 js
查看>>
JFree图表
查看>>
读/写文件操作
查看>>
20155339平措卓玛 Exp1 PC平台逆向破解(5)M
查看>>
本地项目上传码云
查看>>