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代码简化在工作中是非常有益的,也是必要的。在编写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。