css书写规范及特殊样式
1.CSS书写顺序：
（1）位置：position、top、right、z-index、display、float
（2）大小：width、height、padding、margin
（3）文字系列：font、line-height、letter-space、color、text-align
（4）背景：background、border
（5）其他：animate、transition
2.一些特殊字体样式：
首行缩进2字符：{text-indent:2em;}
水平居中：{text-align:center;}
两端对齐：{text-align:justify;}
垂直居中：{vertical-align: middle;}
字间距2字符：{letter-spacing:2em;}
行间距2倍：{line-height:2;}
首字母大写及变色p:first-letter{font-size:4em;color:blue;}
3.表格内容过长自动截取、自动换行：
（1）表格宽度固定，内容超过自动换行
table-layout:fixed;word-break:break-all;
（2）表格宽度固定，超过时自动截取
table-layout:fixed;word-wrap:break-word;
4.导航栏固定在页面某处（相对于<body>）：
{position:fixed;left: px;top: px;}
5.块级元素与行内元素:
常见的块级元素：<div>、<ul>、<ol>、<li>、<dl>、<dt>、<h1>~<h6>、<p>
常见的行内元素：<img>、<input>、<select>、<strong>、<span>
行内元素若要与块级元素在一行，需要给行内元素外加上div，免得块级元素占行内元素空间导致页面混乱。
块级元素内部不能包含其他块级元素。
块级元素与行内元素可通过{display:inline;}与{dispay:block;}进行转换。
6.少数html元素的margin和padding默认值不为0:
<body>、<p>、<ul>、<li>
7.css样式优先级概括：
（1）由高到低：内联样式(直接写在html元素内的样式：style="")>id选择器>class选择器>元素；
（2）引入的css样式高于写在html内的样式（<style type="text/css">）；
（3）组合样式优于继承样式。
（4）权值相同时，标有important的优先级高。
（5）权值比较不能盲目的计算，如10个id权值似乎与1个style权值相等，实则不然。style、id、class、元素是16进制，即相互间的进位为256位，所以1个style优先级远远高于10个id。
8.减少页面加载时间的常用方法：
（1）尽量不用后代选择器和子选择器。
#id ul li.class{ } 后代选择器；
#id>.class{ }子选择器。
css运行是从右向左的，如后代选择器，运行时先找到.class,再依次找到li、ul、#id，写的层级越多执行速度越慢，但这种方式覆盖性更强，迫不得已时可用。
（2）雪碧图：减少图片加载次数。（稍后有详尽介绍）
（3）图片设定height和width值，免去浏览器加载时边加载边计算。
（4）使用gulp，压缩代码及图片。
9.display:table-cell(以表格样式展示)不能与float:left;及position：absolute一起使用。
10.隐藏滚动条
::-webkit-scrollbar {
height: 0;
width: 0;
}
css书写规范及特殊样式的更多相关文章
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序（转载）
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
- css书写规范以及如何写出赏心悦目的代码
css书写规范: 1. 编码统一为utf-8;2. 协作开发及分工: i根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,同时根据页面相似程序,事先写好大体框架文件.共用css文件base ...
随机推荐
- 【SFTP】使用Jsch实现Sftp文件下载-支持断点续传和进程监控
参考上篇文章: <[SFTP]使用Jsch实现Sftp文件下载-支持断点续传和进程监控>:http://www.cnblogs.com/ssslinppp/p/6248763.html ...
- [SI]source insight使用
1. 快捷键 Ctrl+O: 工程中查找需要的文件如imx.c Ctrl+F: 当前文件查找字符串,然后Alt+W(hole)可以列出所有找到的位置 Ctrl+/:可以在当前project中查找字符串 ...
- Visual studio 类视图和资源视图不显示的问题
关于Visual studio 类视图和资源视图不显示的问题 解决方法: 1. 工具—选项—文本编辑器—C/C++—高级,浏览/导航下的禁用数据库选项置为False; 2. 输入命令:devenv / ...
- RT-Thread下的串口驱动程序分析【转载】
编写本文稿的目的,在于通过分析stm32平台上的串口中断源码,学习 RTT中如何编写中断处理程序 如何编写RTT设备驱动接口代码 了解串行设备的常见处理机制 先以RTT官方源码中的STM32 BSP包 ...
- Python第八天
Python面向对象进阶 一.静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过 ...
- .NET并行编程1 - 并行模式
设计模式——.net并行编程,清华大学出版的中译本. 相关资源地址主页面: http://parallelpatterns.codeplex.com/ 代码下载: http://parallelpat ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- bootstrap-提示标签、提示框
提示标签: <body> <div class="container"> <div class="row"> <div ...
- [转]Amazon AWS亚马逊云服务免费一年VPS主机成功申请和使用方法
今天部落将再次为大家介绍如何成功申请到来自亚马逊的Amazon AWS免费一年的VPS主机服务.亚马逊公司这个就不用介绍了,是美国最大的一家网络电子商务公司,亚马逊弹性计算云Amazon EC2更是鼎 ...
- 使用delphi+intraweb进行微信开发1--微信平台接入
示例代码已经放出!请移步使用delphi+intraweb进行微信开发1~4代码示例进行下载,虽为示例代码但是是从我项目中移出来的,封装很完备适于自行扩展和修改. iw14.0.50来了,在新的版本中 ...