CSS基础+编码规范
CSS基础:
CSS全称:Cascading Style Sheets (层叠样式表)
特点:丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等
样式的定义模式:
缺省样式(不定义默认的样式表现)
外部样式(外部文件的样式表现,用link标签 )
内部样式(位于head标签内的样式表现,用style标签 )
内联样式(位于html标签体内部的样式表现)
外部样式(外部文件的样式表现,用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}
通配符选择器:*{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}
后代选择器格式: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
文本: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
放在页面首部的广告、装饰图等长方形大图取名: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格式,如: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库
js:存放编写的js文件
css:存放编写的css文件
image:存放需要使用的图片文件
flash:存放需要使用的flash文件
media:存放需要使用的多媒体文件,包括视频和音频
library:存放一些库文件,包括js库和css库
命名规则注意点
整个大布局框架命名:header、footer、nav、article、left、right
其他的组件命名由英文单词和数字组合使用,尽量避免使用中文命名
避免重复命名规则: 从属命名写法
整个大布局框架命名: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标签:用于定义文件头信息,告诉浏览器需要干一些什么事情
网页字符集:设置浏览器解释页面的字符内容
格式:<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="作者信息"/>
格式:<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="图片路径">
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>:空连接,不跳转到任何页面(不会刷新页面)
网站中链接路径统一用相对路径
浏览器中如果有个空链接,由两种设置模式:#和javascript:void(null)
<a href="#">撮我</a>:链接到当前页面(会刷新页面)
<a href="javascript:void(null)">撮我</a>:空连接,不跳转到任何页面(不会刷新页面)
表格规范
尽量避免表格嵌套过多(会导致延长加载页面时间)
tr和td标签能不换行最好不要换行,可能会影响页面展示效果
尽量避免表格嵌套过多(会导致延长加载页面时间)
tr和td标签能不换行最好不要换行,可能会影响页面展示效果