CSS的世界(十四)
2、HTML 书写规范
2.1 文档类型声明及编码
统一为 html5 声明类型
编码统一为 utf-8
2.2 书写规范
书写时根据页面结构实现层次分明的缩进
标签必合
属性值必须用双引号包括
通常小写字母
2.3 语义化 HTML
根据页面结构选择合适的标签
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p,结构简章重复的部分用 ul、li标签
页面中重要的图片内容要添加 alt=“”替换文本,以便图片丢失时,用户可以根据替换文本了解页面内容
根据模块内容定义class和id名称
如包含logo和搜索框等在内的头部标签用.header,包含联系信息,版权等的模块用footer或copyright
2.4 合理嵌套HTML标签
合理嵌套HTML标签,
ul和li是固定嵌套,ul直接子元素必须是li;
dl和dt,dd是固定嵌套,dl的直接子元素必须是dl和dd;
p标签不允许嵌套p标签;a标签不允许嵌套
a标签和其他交互性元素比如button
尽可能的控制元素嵌套层级,不合理的嵌套会影响页面性能
2.5 保证结构与表现相分离
CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
在页面中尽量避免使用行内样式即 style=“”或行间属性,尽量使用 class 或者 id
3、css 书写规范
3.1 编码
编码统一为 utf-8
3.2 书写代码前
确定版心(页面有效区)
考虑样式表规划,提高样式重复使用率
提前沟通页面中模棱两可的需求和交互效果,方便后续合理布局
布局时考虑后续交互效果处理的便利性,必要时预留出交互效果中涉及到的样式类(如鼠标点击后的样式等)
3.3 书写代码时
添加注释:应该为大区块样式添加注释 ,小区块适量注释
class 与 id 的命名
命名要语义化、简明化
CSS命名时要加前缀如:.zg_top{}
常用命名方法一:样式名称由小写英文、数字和 _ 来组合命名,如 top_left、top_nav;
避免使用中文拼音,尽量使用简易的单词组合
常用命名方法二:首字母大写,驼峰式命名,如:topNav
代码格式
保持代码缩进与格式
建议单行书写
选择器
尽可能不使用通配符选择器 *
合理使用id选择器(页面中唯 一的元素,如头部,底部)
避免使用标签限定id或者类选择器
如:div#test { } p.box {}
避免层集嵌套
3.4 css 属性书写顺序
建议遵循:
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
文档流相关属性(display、 position、float、clear、 visibility)
盒模型相关属性(width、 height、margin、padding、border)
装饰性相关属性(background、opacity、cursor)
内容排版相关属性(color、font、line-height、text-align、text-indent、vertical-align)
书写代码过程中要兼容兼容问题,对熟知的兼容问题在书写代码过程中一并处理。
3.5 类名命名参考
main 页面主体 tag 标签 msg message 提示信息 tips 小技巧 vote 投票 friendlink友情链接 title 标题 summary 摘要 login_bar 登录条 search_input 搜索输入框 hot 热门热点 search 搜索 search_output 搜索输出和搜索结果相似 search_bar 搜索条 search_results 搜索结果 copyright 版权信息 branding 商标 logo 网站LOGO标志 site_info 网站信息 site_info_legal 法律声明 site_info_credits 信誉 join_us 加入我们 partner 合作伙伴 service 服务 regsiter 注册 arr arrow 箭头 guild 指南 site_map 网站地图 list 列表 home_page 首页 sub_page 二级页面子页面 tool, toolbar 工具条 drop 下拉 dorp_menu 下拉菜单 status 状态 scroll 滚动 tab 标签页 left right center 居左、中、右 news 新闻 download 下载
CSS的世界(十四)相关推荐
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的
1.交付 一般设计师给前端的只有psd,没有其它多余的东西,连基本的文档都懒得给.前端期望中的设计能给予的除了psd之外, 还有设计上游岗位传递下来的东西. 比如: 产品原型, 需求文档, 交互文档等 ...
- 谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十四章:使用 CSS 设计网页
文章目录 第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
- 有趣的HTML实例(十四) 窗边风景动画(css+js)
不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 index.html style.css ...
- 计算机 游戏第14关,《帕拉世界》第十四关至第十六关攻略秘籍
<帕拉世界>第十四关至第十六关攻略秘籍 2016-11-21 16:37:41来源:游戏下载编辑:评论(0) 第十四关:一开始没必要强攻监狱,部队沿着山道向上,在左上角的出海口那里建立基地 ...
- 孙志华老师担任第十四届世界易学大会副主席一职
近期,2022第十四届世界易学大会暨2022第九届华夏国学智慧论坛及2022第四届华夏国学感恩大典胜利召开.中华周易协会常务理事及高级预测师.中国当代堪舆家.中国当代易学大家孙志华老师, 被选举为20 ...
- 十四年的世界旅行,五十四条人生哲理
来自优米网 旅行之于我,远不止是简单地去到一个新的地方.体味一种新的文化,它是我内心的一番求索.透过十四年.穿越世界各地的旅行与生活,我更加清楚地明白了--我是谁,我的目标是什么--也让我发现了这个世 ...
- java从入门到精通二十四(三层架构完成增删改查)
java从入门到精通二十四(三层架构完成增删改查) 前言 环境准备 创建web项目结构 导入依赖和配置文件 创建层次模型 实现查询 实现添加 实现修改 完成删除 做一个用户登录验证 会话技术 cook ...
最新文章
- 高性能Javascript:高效的数据访问
- 前端ui框架_跨屏建站发布同名响应式前端ui框架
- js中null和undefined的区别
- 关于NAND flash的MTD分区与uboot中分区的理解 .
- 数学课本上的几大变态
- 数据库中的索引原理阅读
- oracle数据库管理web,Oracle 数据库WEB维护管理软件
- 删除购物车ajax js,在购物车中使用ajax在woocommerce中移除产品
- android之uniapp原生打包
- Win10 UWP 开发教程
- Oracle数据恢复工具-ODU破解记录
- python微信抢红包脚本_这个Python脚本牛逼了,秒抢红包就算了,还能无视撤回消息...
- 计算机做无线AP共享文件,Windows 7妙用 笔记本变无线AP轻松共享
- 2013年IT界25个最古怪的面试题
- 人工智能从概念到实战
- 【C++】通信录管理系统
- SKR EOS 竞猜游戏再遭攻击,黑客共获利约4000eos
- 内核源码中版本号详解(KERNEL_VERSION KERNEL_VERSION)
- hive常用的函数以及知识
- ClientId 解释
热门文章
- mysql charindex 不存在_mysql – 分隔逗号分隔字符串 – FUNCTION db.CHARINDEX不存在
- 基于django的 md5加密
- credssp(credssp加密数据库修正 server2016)
- Handlebars的使用方法文档整理(Handlebars.js)
- Linux 系统管理 : usermod 命令详解
- 第一课.极大似然估计与有偏性无偏性
- Ubuntu使用gedit时报waring
- js动态加载div显示主菜单和子菜单+jquery获取动态id
- 前端面试题集锦——前端综合问题
- 微信输入法 你有了吗?张小龙:防窃听、护隐私