写CSS文件的流程和CSS代码顺序

文章简介:css制作流程及标准.

css制作流程及标准

(一)制作流程:
1,创建文件(文件管理及命名)
2,与html文档建立关系

注意点:
    1)不建议使用:内联样式和内嵌样式
         原因:结构(html)和表现(css样式)没有分离
    2)区别:外链样式与导入样式(http://zhidao.baidu.com/question/198616109.html)
    3)网站常用:外链样式

3,制作页面样式

注意点:

  • 同html框架一致从上到下
  • 从整体到局部
  • 共用样式到个别样式

4,添加注释

注释范围:
    1)每个文档对应一个文档注释(方便后期维护和管理)
         主要注释说明:文档创建人,时间,内容等
    2)属性注释说明:css hack,特殊属性等
    3)功能注释说明:默认样式,按钮,弹出框等

5,完成检查

*********************************************************************

(二)制作标准:(有利于开发和后期管理)
这个标准是我们公司的。各个公司有所不同,仅供大家参考~~

缩进及换行:

说明:
缩进:设置tab键制表符(同html的一样)——点击tab生成2个空格
换行:
选择器换行:相同样式2个以上选择器,每个选择器一行
属性换行:
1)只有一个属性时,选择器与属性在同行
2)2个以上属性,每个属性占一行

简写
1)颜色:16进制颜色值:#RRGGBB——R,G,B都成对相同时,缩写成:#RGB

  1. color:#336699;
  2. 简写:color:#369;


2)单位:数值为0时,单位可以省略

  1. margin:0px;
  2. 简写:margin:0;


3)字体

4)背景

  1. background-color:red;
  2. background-image:url();
  3. background-repeat:no-repeat;
  4. baclgrpimd-position:top right;
  5. background-attachment:fixed;
  6. (每个属性都可省略)简写:background:background-color background-image background-repeat background-position background-attachment;

5)内外边距(margin与padding简写方式相同)

6)边框

  1. border-width:1px;
  2. border-style:solid;
  3. border-color:red;
  4. 简写:border:border-width border-style border-color;
  5.           border:1px solid red;
  6. 单边简写:border-top:1px solid red;
  7.                  border-right:1px solid red;
  8.                  border-bottom:1px solid red;
  9.                  border-left:1px solid red;
  10. (不推荐)单属性简写:(顺序:上右下左)
  11. border-width:border-top-width border-right-width border-bottom-width border-left-width;
  12. border-style:border-top-style border-right-style border-bottom-style border-left-style;
  13. border-color:border-top-color border-right-color border-bottom-color border-left-color;


css代码顺序

css文档的顺序

  • 共用的代码样式放在文档最前面
  • css结构的顺序依照html的结构

css选择器中的属性顺序:显示属性->自身属性->文本属性

  • 显示属性:display, list-style, position, float, clear
  • 自身属性:width, height, margin, padding,border,background
  • 文本属性:color, font, text-decoration, text-align,vertical-align, white-space, content


原    因:这个顺序是项目开发的代码标准,符合浏览器的
渲染顺序,最终达到提高执行效率目的   

时间: 2025-01-31 09:12:26

写CSS文件的流程和CSS代码顺序的相关文章

php实现的css文件背景图片下载器代码_php技巧

本文实例讲述了php实现的css文件背景图片下载器代码.分享给大家供大家参考.具体实现方法如下: 下载css文件里面的背景图片是我们这些盗版份子长期搞的事情,下载个css图片下载器常出现各种广告弹窗,实在扛不住.这里就提供了一个php版的css文件背景图片下载器给大家. 把文件放到php程序目录 dos下面 php.exe cssImages.php 0 http://www.xxxx.com/css/style.css \images\ 先在php程序目录建个images文件夹,呵呵,贴代码:

使用PHP下载CSS文件中的图片的代码_php技巧

共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //note 匹配出需要下载的URL地址 preg_match_all("/url\((.*)\)/", $styleFileContent, $imagesURLArray);

jquery eas...-easyui是如何加载easyui.css文件中没有的css样式的?

问题描述 easyui是如何加载easyui.css文件中没有的css样式的? easyui是如何加载easyui.css文件中没有的css样式的? 比如,我用jquery去生成一个linkbutton $('#lb').linkbutton({ plain:true });之后.easyui是怎么加载出样式的?我看了浏览器解析出来的代码是这样: <a id="lb" href="javascript:void(0)" class="l-btn l-

PHP下载CSS文件中的图片的代码

     作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验.我相信每个做web的程序员也都会有类似的经历.     在扒皮过程中,必不可少的需要下载样式文件中的图片.碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合适的了. < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Docum

用php实现的下载css文件中的图片的代码_php技巧

作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验.我相信每个做web的程序员也都会有类似的经历. 在扒皮过程中,必不可少的需要下载样式文件中的图片.碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合适的了. 复制代码 代码如下: < ?php /* More & Original PHP Framwork Copyright (c) 2007 - 2008 IsMole Inc. Author: kimi Doc

ruby写一个文件内容相似性比较的代码

1.相似度定义 我们定义,则,我们设,则,|C|=s,则相似度p=,p(0,1) 2.相似度检测算法设计 算法设计: 定义4个字符为一个字符串,将T1,T2分割成若干字符串,若剩余字符不足4个,则以空格补全.将分割后的T1T2计数,记下|T1|=n,|T2|=m,s=0:在T1中取出第一字符串,检测是否在T2中,若存在,则s+1,并删除与被检测字符串相同的字符串,循环到T2检测,直到T2中不存在被检测的字符串,循环到T1,提出下一个被检测字符串,到T2中检测:如此循环检测,直到T1中的所有字符串

js异步动态加载js与css文件代码

 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){  var head = $('head').remove('#loadscript');  $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:

html调用问题,调用js,css文件

问题描述 html调用问题,调用js,css文件 1,html调用js和css需要注意什么 2,三者文件存储有什么规定?写了几个代码都不能调用js 解决方案 1,注意路径,js,css使用相对路径注意是相对当前html页面的路径,路径不对无法加载js,css就会报错,布局显示错误 2,html meta指定为utf-8时,html存储编码也要为utf-8,gb2312则对应ansi(国内ansi一般是gb2312).js和css存储编码要和html存储编码一致,如果js不一致可以给script标

图形界面编译工具Koala将SASS文件编译成CSS文件

文章简介:本文主要通过创建一个SASS项目为实例,带领大家如何使用Koala这样的图形界面编译工具来将你的SASS项目,将SASS文件编译成CSS文件. <SASS界面编译工具--Codekit的使用>一文中图解了"CodeKit"图形工具编译SASS项目.由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目.幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个