疯子的紫梦's 学习窝

div+css样式表的id和class常用命名规则

 

      用div+css样式表写页面有一段时间了,起初写div+css样式表的时候,最让我头疼的不是怎么写样式,而是给div+css样式起名,怎么样起才合适呢?要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下:

  首先讲一下div+css样式表的id的常用命名规则如下表所示:

页头
header
登录条
loginBar
标志
logo
侧栏
sideBar
广告
Banner
导航
nav
子导航
subNav
菜单
menu
子菜单
subMenu
搜索
search
滚动
scroll
页面主体
main
内容
content
标签页
tab
文章列表
list
提示信息
msg
小技巧
tips
栏目标题
title
加入
joinus
指南
guild
服务
service
热点
hot
新闻
news
下载
download
注册
regsiter
状态
status
按钮
btn
投票
vote
合作伙伴
partner
友情链接
friendLink
页脚
footer
版权
copyRight
 
 


     
实际上上面的div+css样式表的id命名也会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。


再讲一下div+css样式表的class的常用命名规则如下表所示:

 外 套
wrap
主导航
mainNav
子导航
subnav
页 脚
footer
整个页面
content
页 眉
header
商 标
label
标 题
title
主导航
mainNav
边导航
sidebar
左导航
leftsideBar
右导航
rightsideBar
旗 志
logo
标 语
banner
菜单内容
menu1Content
菜单容量
menuContainer
子菜单
submenu
边导航图标
sidebarIcon
注释
note
面包屑
breadCrumb
容器
container
内容
content
搜索
search
登陆
login
功能区
shop
当前的
current
 
 

当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言,多多指教.

CSS 中 margin、padding、border、background和font缩写示例

CSS 中 margin、padding、border、background和font缩写示例
2009年03月07日 星期六 22:04

CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。下面用一些比较常用的属性来做示例。

margin

margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为:margin:1px

margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为:margin:1px 2px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为:margin:1px 2px 3px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为:margin:1px 2px 3px 4px

注意:当属性值是0的时候单位可以不写如:0px 直接就写成0

padding

padding的书写方法和margin相类似

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
代码简化为:padding:1px

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
代码简化为:padding:1px 2px

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
代码简化为:padding:1px 2px 3px

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
代码简化为:padding:1px 2px 3px 4px

border

border-width:1px;
border-style.:solid;
border-color:#000000;
代码简化为:border:1px solid #000

background

background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px 4px;
代码简化为:background:#CFF url(图片路径) repeat-x 5px 4px

font

font-size:26px;
font-weight:bold;
font-family: “宋体”;
代码简化为:font:26px bold “宋体”

color属性值

color:#000000;
color:#ff0000;
代码简化为:color:#000, color:#f00

html 中 div 和 span 的区别

问:DIV与SPAN之间有什么区别?

  答:解决思路:

  DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。

  具体步骤:

  1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:

  测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>

  2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如:

  测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>

  提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。
    因为DIV与SPAN元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。

  DIV指定渲染 HTML 的容器。

  SPAN指定内嵌文本容器。

 

       总的来说,一个div是占一个块的,它的默认display属性是block,表示一个块。如:
<div>aaa</div>bbb显示出来,是两行。
       而span,它的display默认属性是inline,可以连在一起的。如:
<span>aaa</span>bbb,显示出来是一行。
div一般用于排版,而span一般用于局部文字的样式。

CSS定义方法记录

.main_left,.main_right{width:200px};这样可以同时给.main_left    .main_right 添加宽的属性

.main_left ul{float:left;}这样就给class为main_left 下面ul元素添加了左浮属性

.main_left p , .main_left p{height:200px};这样就同时给了.main_left .main_right下的p元素height属性

其中的写法:margin:0px auto;   这个的意思就是margin:0px auto 0px auto ;(上-右-下-左)

URI URL URN之间的区别

Web上可用的每种资源 - HTML文档、图像、视频片段、程序等 - 由一个通过通
用资源标志符(Universal Resource Identifier, 简称"URI")进行定位。
URI一般由三部分组成:
访问资源的命名机制。
存放资源的主机名。
资源自身的名称,由路径表示。
考虑下面的URI,它表示了当前的HTML 4.0规范:
     http://www.webmonkey.com.cn/html/html40/
这个URI是这样的:这是一个可通过HTTP协议访问的资源,位于主
机www.webmonkey.com.cn上,通过路径“/html/html40”访问。在HTML文档中
其它资源包括"mailto"(收发email)和"ftp"(FTP访问)。
这是URI的另一个例子,指向一个用户的邮箱:
<A href="Joe'>mailto:joe@someplace.com">Joe Cool</A>
注:大多数读者可能熟悉"URL",而不是URI。URL是RUI命名机制的一个子集。
片段标志符
有的URI指向一个资源的内部。 这种URI以"#"结束,并跟着一个anchor标志
符(称为片段标志符)。例如,下面是一个指向section_2的URI:
http://somesite.com/html/top.htm#section_2
相对URI
相对URI 不包含任何命名规范信息。它的路径通常指同一台机器上的资源。相
对URI可能含有相对路径(如,“..”表示上一层路径),还可能包含片段标
志符。
为了说明相对URI,假设我们有一个基本的URI http://www.acme.com/support/intro.htm
下面的链接中使用了相对URI:
     <A href="suppliers.htm">Suppliers</A>
它扩展成完全的URI就是 "http://www.acme.com/support/suppliers.htm",
下面是一个图像的相对URI:
     <IMG src="../icons/logo.gif" alt="logo">
它扩展成完全的URI就是 "http://www.acme.com/icons/logo.gif"。
在HTML中,URI被用来:
链接到另一个文档或资源(参看A和LINK元素)。
链接到一个外部样式表或脚本(参看LINK和SCRIPT元素)。
在页内包含图像、对象或applet(参看IMAG、OBJECT、APPLET和INPUT
元素)。
建立图像映射(参看MAP和AREA元素)。
提交一个表单(参看FORM)。
建立一个框架文档(参看FRAME和IFRAME元素)。
引用一个外部参考(参看Q、BLOCKQUOTE, INS和DEL元素)。
指向一个描述文档的metadata(参看HEAD元素)。

2.什么是URL:
       URL是Uniform Resource Location的缩写,译为“统一资源定位符”。通俗地说,URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。
◇ URL的格式
URL的格式由下列三部分组成:
第一部分是协议(或称为服务方式);
第二部分是存有该资源的主机IP地址(有时也包括端口号);
第三部分是主机资源的具体地址。,如目录和文件名等。
第一部分和第二部分之间用“://”符号隔开,第二部分和第三部分用“/”符号隔开。第一部分和第二部分是不可缺少的,第三部分有时可以省略。
◇ URL示例
文件的URL:
用URL表示文件时,服务器方式用file表示,后面要有主机IP地址、文件的存取路径(即目录)和文件名等信息。有时可以省略目录和文件名,但“/”符号不能省略。
例一:file://ftp.yoyodyne.com/pub/files/foobar.txt
代表存放主机ftp.yoyodyne.com上的pub/files/目录下的一个文件,文件名是foobar.txt。
例二:file://ftp.yoyodyne.com/pub
代表主机ftp.yoyodyne.com上的目录/pub。
例三:file://ftp.yoyodyne.com/
代表主机ftp.yoyodyne.com上的根目录。
Gopher的URL:
Gopher服务器有可能使用特殊的端口,在这种情况下,主机IP地址与端口之间要用“:隔开。
例一:gopher://gopher.yoyodyne.com/
表示主机gopher.yoyodyne.com上的gopher服务器。
例二:gopher://gopher.banzai.edu:1234
表示主机gopher.banzai.edu上的gopher服务器,在端口1234上。
网络新闻的URL:
利用URL表示网络新闻组时,如果是usenet的话只要指定出新闻组的名字即可。
例如:news:rec.gardening
表示usenet上的rec.gardening新闻组(园艺)。
HTTP的 URL:
使用超级文本传输协议HTTP,提供超级文本信息服务的资源。
例一:http://www.peopledaily.com.cn/channel/welcome.htm
其计算机域名为www.peopledaily.com.cn。超级文本文件(文件类型为.html)是在目录/channel下的welcome.htm。这是中国人民日报的一台计算机。
例二:http://www.rol.cn.net/talk/talk1.htm
其其计算机域名为www.rol.cn.net。超级文本文件(文件类型为.html)是在目录/talk下的talk1.htm。这是瑞得聊天室的地址,可由此进入瑞得聊天室的第1室。

URI、URL和URN之间的区别与联系
URI:Uniform Resource Identifier,统一资源标识符;
URL:Uniform Resource Locator,统一资源定位符;
URN:Uniform Resource Name,统一资源名称。
其中,URL,URN是URI的子集。
Web上地址的基本形式是URI,它代表统一资源标识符。有两种形式:
URL:目前URI的最普遍形式就是无处不在的URL或统一资源定位器。
URN:URL的一种更新形式,统一资源名称(URN, Uniform Resource Name)不依赖于位置,并且有可能减少失效连接的个数。但是其流行还需假以时日,因为它需要更精密软件的支持。
URI是以某种统一的(标准化的)方式标识资源的简单字符串。
URI一般由三部分组成:
1. 访问资源的命名机制。
2. 存放资源的主机名。
3. 资源自身的名称,由路径表示。
典型情况下,这种字符串以scheme(命名URI的名字空间的标识符——一组相关的名称)开头,语法如下:
[scheme:] scheme-specific-part
URI以scheme和冒号开头。Scheme用大写/小写字母开头,后面为空或者跟着更多的大写/小写字母、数字、加号、减号和点号。冒号把scheme与scheme-specific-part分开了,并且scheme-specific-part的语法和语义(意思)由URI的名字空间决定。如下面的例子:
http://www.cnn.com,其中http是scheme,//www.cnn.com是 scheme-specific-part,并且它的scheme与scheme-specific-part被冒号分开了。
URI有绝对和相对之分,绝对的URI指以scheme(后面跟着冒号)开头的URI。前面提到的http://www.cnn.com就是绝对的URI的一个例子,其它的例子还有mailto:jeff@javajeff.com、news:comp.lang.java.help和xyz://whatever。你可以把绝对的URI看作是以某种方式引用某种资源,而这种方式对标识符出现的环境没有依赖。如果使用文件系统作类比,绝对的URI类似于从根目录开始的某个文件的径。
与绝对的URI不同的,相对的URI不是以scheme(后面跟着冒号)开始的URI。 它的一个例子是articles/articles.html。你可以把相对的URI看作是以某种方式引用某种资源,而这种方式依赖于标识符出现的环境。如果用文件系统作类比,相对的URI类似于从当前目录开始的文件路径。
URL是Uniform Resource Location的缩写,译为"统一资源定位符"。通俗地说,URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。
URL的格式由下列三部分组成:
第一部分是协议(或称为服务方式);
第二部分是存有该资源的主机IP地址(有时也包括端口号);
第三部分是主机资源的具体地址。,如目录和文件名等。
第一部分和第二部分之间用"://"符号隔开,第二部分和第三部分用"/"符号隔开。第一部分和第二部分是不可缺少的,第三部分有时可以省略。
目前最大的缺点是当信息资源的存放地点发生变化时,必须对URL作相应的改变。因此人们正在研究新的信息资源表示方法,例如:URI(Universal Resource Identifier)即"通用资源标识"(参见RFC 1630)、URN(Uniform Resource Name)即"统一资源名"和URC(Uniform Resource Citation)即"统一资源引用符"等。
URI目前还处在进一步的研究当中。研究的方向就是弥补URL目前存在的缺点。

----------------------------------------------
简单理解就是URL是大门,URI是门里的每个屋子。

URL:
URL是Uniform Resource Location的缩写,既然楼主知道我就不啰嗦了

URI 是在 Internet 上定位资源的常规方案,它的着重点在于资源,而不是位置。理论上,URI 可以查找镜像文档的最近的副本,或者定位从一个站点移动到另一个站点的文档。

URI是Web上可用的每种资源 - HTML文档、图像、视频片段、程序等 - 由一个通过通用资源标志符(Universal Resource Identifier, 简称"URI")进行定位。
URI一般由三部分组成:
1. 访问资源的命名机制。
2. 存放资源的主机名。
3. 资源自身的名称,由路径表示。
注:大多数人可能熟悉"URL",而不是URI。URL是URI命名机制的一个子集。

区别就是URI定义资源,而URL不单定义这个资源,还定义了如何找到这个资源。 比如说,一个服务器上,到一个文件夹/网页的绝对地址(absolute path)就是URI。