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书写规范及特殊样式的更多相关文章

  1. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  2. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  3. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  4. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  5. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  6. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

  7. CSS书写规范、顺序和命名规则

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个 ...

  8. 推荐大家使用的CSS书写规范、顺序（转载）

    转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...

  9. css书写规范以及如何写出赏心悦目的代码

    css书写规范: 1. 编码统一为utf-8;2. 协作开发及分工: i根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,同时根据页面相似程序,事先写好大体框架文件.共用css文件base ...

随机推荐

  1. PHP网页显示乱码问题总结

    其实,乱码,都是因为编码不统一的问题导致的. 以UTF-8编码为例: 第一步,确定数据库字段的编码,字符集:urt8 第二部,PHP脚本设置编码:header('Content-Type: text/ ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. 动态作用域与this +apply和call +bind

    词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则. (函数作用域和块作用域) JavaScript 中的作用域就是词法作用域,也就是静态作用域,由定义代码决定 动态作用域似乎暗示有很好的 ...

  4. ActiveMQ与WebSocket的结合应用

    前段时间无意之中看到了WebSocket这样东西,发现自己真的是火星了.早在11年就有的东西,一直都不知道. 研究了一番之后感觉还是比较好用的. 我很少做Socket开发,但是曾经由于项目的原因,用过 ...

  5. Laravel学习笔记（五）数据库 数据库迁移案例2——创建数据结构，数据表，修改数据结构

    默认假设 所有的列在定义的时候都有默认的假设,你可以根据需要重写. Laravel假定每个表都有一个数值型的主键(通常命名为”id”),确保新加入的每一行都是唯一的.Laravel只有在每个表都有数值 ...

  6. 火车采集器 帝国CMS7.2免登录发布模块

    帝国cms7.2增加了金刚模式,登录发布有难度.免登录发布模块配合火车采集器,完美解决你遇到的问题. 免登录直接获取栏目列表 通过文件内设置密码免登录发布数据 帝国cms7.2免登陆文章发布接口使用说 ...

  7. 关于Oracle出现listener refused the connection with the ORA-12505错误，解决方案

    出现listener refused the connection with the ORA-12505错误,解决方案: 1.首先重启一下电脑,释放被占用的1521端口 2.重启后打开Oracle D ...

  8. 工作流软件是未来web的支柱

    Web 3.0正在敲门,但是开门的人你永远都想不到:工作流软件. 传统上工作流软件是企业级的业务流程管理工具,但现在随着网络互联程度的加深,工作流软件开始呈现出其作为互联网技术的一面. 诚然,社会化媒 ...

  9. 【Python】【学习笔记】持续更新

    调用模块的两种方式: #方式1 from decimal import Decimal Decimal('1.00') #方式2 import decimal decimal.Decimal('1.0 ...

  10. 将Java应用程序打包成可执行的Jar包

    可以将多个class文件打包为jar包,在指定程序入口点情况下,可以用 java –jar jar包名称 的方式调用jar包内主类的main函数. 程序源代码如下: //Math.java publi ...