html布局和怎么起类名,CSS网页布局ID和Class类的命名介绍
关于CSS网页布局id与class命名或许成为大家比较头疼的问题,在webjx.com中早已有相关的介绍,但还是不能满足大家对知识的渴求。
一、用class_name方式写类名。
以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。
二、样式都用class而不用id。
有三个理由。
1,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。
2,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。
3,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。
三、margin和padding,尽量省略最后一个值。
比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px 5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。
四、按标准写css,再针对特定浏览器作hack。
比如,通常我们会遇到如下的写法:
.side_col_webjx {
float:left;
display: inline;
margin-left: 20px;
}
而我的写法会是:
.side_col_webjx {
float: left;
margin-left: 20px;
}
* .side_col_webjx {
_display:inline; /*hacked for IE 6*/
}
看明白了么?不应该把hack混在一起,也不应该用一种侥幸的心态,觉得float:left与display:inline写在一起没事。嗯,它们俩确实没事儿,但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug,所以前面加上下划线,以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的,比如FF。这就要求你对css标准的熟练掌握,能够自信的判断哪些渲染是遵守标准,哪些违反标准的。
此外,我喜欢在hack前面加上星号,其实这纯粹是个人习惯了。可能过段时间我就不这么用了,呵呵。
五、记得加空格。
.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯,标点后面都应该带空格(如果你写This is a pen.That’s a pencil.句点后面不加空格, word里面会有错误提示)。所以既然css是外国人发明的,应该按他们的格式来写。类似的,在JS里var a = b + c;里面的空格也应该都要加。
六、适当的层叠(Cascading)或缩进以定义css的“作用域”。
啥叫“css的作用域”?其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面,比如“导航栏”里的“搜索框”,可能应该写成:
.nav .search {}
而有时候用层叠会增加代码优先级,所以也可以用缩进来“象征性的”体现作用域。像这样:
.login_box {}
.forgot_pwd{}
缩进,是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。
html布局和怎么起类名,CSS网页布局ID和Class类的命名介绍相关推荐
- python学习 day49之CSS网页布局
CSS网页布局 一 网页布局方式 二 标准流 三 浮动流 什么是脱离文档流? 浮动元素脱标文档流意味着 注意点: 让两个元素显示到一行的 两种实现方式 方式一:修改显示方式为inline-block ...
- 054.CSS网页布局
文章目录 一.网页布局方式 二.标准流 三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...
- week9 day4 CSS网页布局
week9 day4 CSS网页布局 一.网页布局方式 二.标准流 三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- html css网页布局实例简单,Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)...
网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
- 南大软院大神养成计划--CSS网页布局
学习小结 今天主要学习了CSS样式设置小技巧和CSS网页布局. 网页主要元素是图片和文字,网页的基本布局就是CSS样式将块与块不同的摆放.对一些元素设置它的水平位置,垂直位置,最终达到目的. 比如说水 ...
- IE和Firefox浏览器CSS网页布局不同点
CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然webjx.com介绍过很多这方向的 知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefo ...
最新文章
- linux 存储映射lun 给_如何在 Linux 上扫描/检测新的 LUN 和 SCSI 磁盘 | Linux 中国
- jflash合并stm32f103之bin文件及hex文件
- python必学_Python必学框架
- SAP Spartacus里的routerLink测试
- 检查一列数据的重复项 vba_提取重复值,但字典不是重点。
- python烟花表白_python炫酷烟花表白源代码
- Oracle 时区(TimeZone )-- DST
- 服务器无法拖动文件复制文件,​IT服务器运维:艾锑人为您整理Win10系统下移动、复制、删除文件需要管理员权限的解决方法...
- Spring Boot基础学习笔记25:RabbitMQ - 发布/订阅工作模式
- 【codevs1052】地鼠游戏,标签不都是对的
- Android JNI(三)——JNI数据结构之JNINativeMethod
- ac86u原厂固件去广告_苹果发布最新固件IOS12.3.2,估计不修正你的手机
- Dart入门—控制流程与其他
- 业务员的3个经典故事
- mybatis mysql触发器_MyBatis创建Oracle触发器
- jsp进阶教程和Servlet
- Win11用户好消息 影响win11性能运行的竟是它,关闭可提升性能
- thinkphp 批量打包下载图片到本地电脑
- 家里网络连不上outlook_家里OUTLOOK上不了如何处理--
- phpnow测试PHP源码,phpnow php探针环境检测代码
热门文章
- 计算机端口丢失,win7设备管理器“里头没有了”端口“选项
- linux 服务器 1t 分区,linux的分区方法
- 日志-Frobenius norm,共轭矩阵
- 一款App等保的预检测工具--ApplicationScanner
- struct timespec 和 struct timeval
- office wps之间的乱码
- OpenWrt之时区设置(夏令时设置)
- 串口探测与登录暴力破解工具
- 2021-09-07--积少成多之python集合
- 2020年安全生产监管人员考试题库及安全生产监管人员新版试题