CSS基础+编码规范

CSS基础+编码规范

CSS基础：

CSS全称：Cascading Style Sheets （层叠样式表）

特点：丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等

样式的定义模式：

缺省样式（不定义默认的样式表现）
外部样式（外部文件的样式表现，用link标签 ）
内部样式（位于head标签内的样式表现，用style标签 ）
内联样式（位于html标签体内部的样式表现）

基本语法：

CSS 语法由三部分构成：选择器、属性和值，形式：exp: selector{property: value}

引入样式文件：exp： <link type="text/css" rel="stylesheet" href="文件路径"/>

其中选择器包括很多种，比较常用的有一下7种：

4大基本选择器：
通配符选择器：*{property:value}
标签选择器：标签名{property: value}
id选择器：#id名{property: value}
class选择器：class名{property: value}

3大复杂选择器：（E、F为基本选择器）
后代选择器格式：E（中间有空格隔开）F{property: value}
交集选择器格式：E（中间没有空格）F{property: value}
并集选择器格式：E,（中间有逗号隔开）F,G{property: value}

CSS的基本属性：

背景：background-color、background-image、background-repeat、background-position:center
文本：text-indent、text-align、word-spacing、letter-spacing、text-decoration、color、direction、line-height
字体：font-family、font-size、font-style、font-weight
列表：list-style、list-style-image、list-style-type
内边距：padding-top、padding-right 、padding-bottom、padding-left 
外边距：margin-top、margin-right 、margin-bottom 、margin-left
边框：border、border-style、border-width、border-color
定位： position、top、right、bottom、left、overflow、z-index、float
尺寸：width、height、max-height、max-width、min-height、min-width

还有其它更多的属性，详情请参考相关的API文档。

HTML的编码规范：

拥有好的编码规范可以提高代码的可读性，可以降低代码错误率，提高代码的整合效率和重用性，为后期的维护提供更高的遍历

HTML命名规则：

1、统一用小写的字母、数字和下划线的组合（不得包含空格和特殊字符）

2、文件名条件：方便理解和易于查找

页面文件类型：

htm、html、asp、aspx、jsp、php等

页面文件名命名规则：

首页统一取名为：index或者home，一般默认都是用index为首页命名
其他子页面统一用英文翻译或者中文拼音取名，但是不建议英文和中文拼音混合使用

注意：优先使用英文，如果英文单词比较长，则可以选择用拼音或者用简写

图片命名规则
图片的名称为头尾两部分，用下划线隔开
图片的头部表示此图片的大类（如：广告、标志、菜单、按钮等等）

大类常规命名
放在页面首部的广告、装饰图等长方形大图取名：banner
标志性图片取名：log
有链接的图片取名：button
没有链接的标题图片取名：title
装饰用的照片取名：pic
在页面上连续出现、性质相同的栏目图片取名：menu

js命名规范
自定义js文件模块：模块.描述.js格式，如：check.js、login.js、regist.js、pop.js
公用文件模块：commom.js或者basic.js
外部资源模块：Jquery.min.js、Jquery.js

文件存放位置的规范：

文件存放目录结构
js：存放编写的js文件
css：存放编写的css文件
image：存放需要使用的图片文件
flash：存放需要使用的flash文件
media：存放需要使用的多媒体文件，包括视频和音频
library：存放一些库文件，包括js库和css库

命名规则注意点
整个大布局框架命名：header、footer、nav、article、left、right
其他的组件命名由英文单词和数字组合使用，尽量避免使用中文命名
避免重复命名规则： 从属命名写法

如： <div class=”left”><div class=”left_frame”></div></div>

常用class和id命名范例

页面结构
容器框架	frame/container
页头	header
页尾	footer
内容框架	wrapper/content
侧栏	sidebar

导航结构
导航	nav
主导航	mainnav
子导航	subnav
顶导航	topnav
菜单	menu
子菜单	submenu
标题	title
图标	icon

功能结构
标志	logo
登陆	login
登陆条	loginbar
注册	regist
评论	review
子菜单	submenu
标题	title
图标	icon
按钮	button/btn
搜索	search

head部分包含的标签

title：网页的标题内容，格式：<title>标题内容</title>
meta标签：用于定义文件头信息，告诉浏览器需要干一些什么事情

网页字符集：设置浏览器解释页面的字符内容
  格式：<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
自动跳转：设置网页过多久跳转到指定页面
   格式：<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
keyword：设置搜索关键字内容，格式：<meta name="keywords" content="关键字内容"/>
description：设置描述关键内容，格式：<meta name="description" content="进行一些表述" />
author：设置网页作者，格式：<meta name="author" content="作者信息"/>

link：引入css文件，格式：<link rel="stylesheet" type="text/css" href="路径">
script：引入js文件，格式： <script type="text/javascript" src="路径"></script>
收藏夹图标：当网页被收藏后，显示的图标
  格式：<link rel="Shortcut Icon" href="图片路径">

超链接规范
网站中链接路径统一用相对路径
浏览器中如果有个空链接，由两种设置模式：#和javascript:void(null)
  <a href="#">撮我</a>：链接到当前页面（会刷新页面）
  <a href="javascript:void(null)">撮我</a>：空连接，不跳转到任何页面（不会刷新页面）

表格规范
尽量避免表格嵌套过多（会导致延长加载页面时间）
tr和td标签能不换行最好不要换行，可能会影响页面展示效果