您现在的位置: 破洛洛 >> 教程专题 >> CSS常见问题 >> 正文

css的位置问题

作者:佚名 来源:网络整理 更新时间:2011-1-27
分享到
CSS的语法怎么写,就是放在〈BODY〉中间的那部分CSS是什么格式? 

最佳答案

学习CSS之前,首先应学会写HTML。如果你对HTML还一无所知(像我一样。。。),请参见HTML教程。 


CSS(Cascading Style Sheets)简介 
当初一帮技术人员想出HTML,主要侧重于定义内容,比如<p>表示一个段落,<h1>表示标题,而并没有过多设计HTML的排版和界面效果。 

随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。 

CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。 

CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。 

CSS按其位置可以分成三种: 

内嵌样式(Inline Style) 
内部样式表(Internal Style Sheet) 
外部样式表(External Style Sheet) 


内嵌样式(Inline Style) 
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。 


CODE:[Copy to clipboard]<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。</p> 
显示示例 

内部样式表(Internal Style Sheet) 
内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。 


CODE:[Copy to clipboard]<HTML> 
<HEAD> 
<STYLE type="text/css"> 
H1.mylayout {border-width:1; border:solid; text-align:center; color:red} 
</STYLE> 
</HEAD> 
<BODY> 
<H1 class="mylayout"> 这个标题使用了Style。</H1> 
<H1>这个标题没有使用Style。</H1> 
</BODY> 
</HTML> 
显示示例 


内部样式表(Internal Sytle Sheet)要用到Style这个Tag,写法如下: 


CODE:[Copy to clipboard]<STYLE type="text/css"> 
...... 
</STYLE> 
外部样式表(External Style Sheet) 
如果很多网页需要用到同样的样式(Styles),用什么方法呢? 

将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 

比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css。文件内容如下: 


CODE:[Copy to clipboard]H1.mylayout {border-width: 1; border: solid; text-align: center;color:red} 
然后你建立一个网页,代码如下: 


CODE:[Copy to clipboard]<HTML> 
<HEAD> 
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"> 
</HEAD> 
<BODY> 
<H1 class="mylayout"> 这个标题使用了Style。</H1> 
<H1>这个标题没有使用Style。</H1> 
</BODY> 
</HTML> 
显示示例 


使用外部(Extenal)样式表,相对于内嵌(Inline)和内部式(Internal)的,有以下优点: 

样式代码可以复用。一个外部CSS文件,可以被很多网页共用。 
便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。 
提高网页显示的速度。如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。 

串联(Cascading) 
CSS第一个字母,是Cascading,意为串联。它是指不同来源的样式(Styles)可以合在一起,形成一种样式。 

Cascading的顺序是: 

浏览器缺省(browser default)(优先级最低) 
外部样式表(Extenal Style Sheet) 
内部样式表(Internal Style Sheet) 
内嵌样式表(Inline Style)(优先级最高) 
样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt,那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。 

显示示例 

- 
基本语法 

一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。 


CODE:[Copy to clipboard]selector {property: value} 
举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。 


CODE:[Copy to clipboard]p {color:blue} 
HTML中所有的Tag都可以作为selector。 

注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。 


CODE:[Copy to clipboard]p {text-align:center;color:red} 
为了提高Style代码的可读性,你也可以分行写: 


CODE:[Copy to clipboard]p 
{ 
text-align: center; 
color: black; 
font-family: arial 
} 
组合(Grouping) 
你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。 


CODE:[Copy to clipboard]h1,h2,h3,h4,h5,h6 
{ 
color: red 
} 
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。 

Class Selector 
利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式: 


CODE:[Copy to clipboard]p.right {text-align:right} 
p.center {text-align:center} 
其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下: 


CODE:[Copy to clipboard]<p class="center">这一段居中显示。</p> 
<p class="right">这一段是居右显示。</p> 
演示示例演示示例 

你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector。示例代码如下: 


CODE:[Copy to clipboard].center {text-align: center} 
这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如: 


CODE:[Copy to clipboard]<h1 class = "center">这个标题居中显示。</h1> 
<p class = "center">这个段落居中显示。</p> 
演示示例演示示例 

Contextual Selector 
你可以为嵌入其它Tag的Tag定义样式,示例代码如下: 


CODE:[Copy to clipboard]p em{color: red} 
Em这个Tag嵌套在P里面。p em就叫做Contextual Selector,定义嵌套于P里的Em的样式。这个例子表示,在P里面的用Em这个Tag标记的字体颜色是红色。 

演示示例演示示例 

CSS注释 
为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。 


CODE:[Copy to clipboard]/* 段落样式 */ 
p 
{ 
text-align: center; 
/* 居中显示 */ 
color: black; 
font-family: arial 
} 
CSS字体属性 
http://www.blabla.cn/css_tutorials/010_css_font.html 
CSS常用文本属性 
http://www.blabla.cn/css_tutorials/015_css_text.html 
CSS背景属性 
http://www.blabla.cn/css_tutorials/020_CSS_background.html 
CSS边框属性 
http://www.blabla.cn/css_tutorials/025_css_border.html 
CSS边距属性 
http://www.blabla.cn/css_tutorials/030_css_margin.html 
CSS间隙属性 
http://www.blabla.cn/css_tutorials/035_css_padding.html 
CSS盒子模式(Box Model) 
http://www.blabla.cn/css_tutoria ... margin_padding.html 
CSS列表样式属性 
http://www.blabla.cn/css_tutorials/045_css_list_style.html 
CSS伪类(pseudo-class) 
http://www.blabla.cn/css_tutorials/050_pseudo_class.html 

CSS代码示例 
http://www.blabla.cn/css_tutorials/100_CSS_examples.html 

推荐 布啦布啦 - 网页教程与代码的中文站点 


上面的东西都是理论,看是看不会的, 必须动手操作实践。 


下面是百度给出的空间页面CSS说明 

空间页面CSS说明 

body 整个空间页面{background-color:#FFFFFF} 


-------------------------------------------------------------------------------- 

空间名称和简介区域 
#header 主体部分{height:89px;background:#3399CC} 
#header div.lc 左背景图{background:url(temp1/hdl.jpg) no-repeat} 
#header div.rc 右背景图{background:url(temp1/hdr.jpg) no-repeat top right} 
#header div.tit 空间名称{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体} 
#header div.tit a.titlink 空间名称链接{color:#FFFFFF;text-decoration:none} 
#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none} 
#header div.desc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px} 
#tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF} 
#tab TAB菜单主体{top:67px;background:url(temp1/tabbg.gif) repeat-x} 
#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px} 
#tab span TAB与TAB之间的分割符“|”{color:#FFFFFF;font-size:14px} 
#tab a:link TAB未选中状态{color:#FFFFFF;text-decoration:none;font-size:14px} 
#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px} 
#tab2 设置TAB菜单主体{background:#DAE9F5} 
#tab2 span TAB选中状态{color:#000000;font-size:12px;font-weight:bold} 
#tab2 a TAB未选中状态{font-size:12px} 
#tab2 a:link{color:#0000CC} 
#tab2 a:visited{color:#0000CC} 


-------------------------------------------------------------------------------- 

.stage 内容区域(TAB菜单与版权信息之间的区域){background:#F3F1F1} 

其它区域(即访问量等信息) 
#comm_info 主体{color:#333333;font-family:Arial;text-align:left} 
#comm_info div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 
#comm_info a 链接{color:#3399CC} 


-------------------------------------------------------------------------------- 

页码区域 
#page 主体{height:30px;font-size:14px;font-family:Arial;text-align:center} 
#page span 当前页码(不可点击){padding:3px;color:#000000;font-size:14px;font-weight:bold} 
#page a.pc 上一页和下一页{color:#3399CC;font-size:14px;font-weight:bold} 
#page a.pc:visited{color:#3399CC} 
#page a.pi 页码(可点击){padding:3px;color:#3399CC;font-size:14px} 
#page a.pi:visited{color:#3399CC} 


-------------------------------------------------------------------------------- 

模块 
.mod {margin-bottom:10px} 
.modhandle{cursor:move} 
.modth 模块标题栏主体{height:24px} 
.modhead{padding:4px 4px 0 4px} 
.modopt 模块操作区(如写新文章){padding:4px 4px 0 0} 
.modtit 模块标题区(如文章列表){color:#FFFFFF;font-size:12px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF} 
.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline} 
.modact 操作文字链接(如文章列表){color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF} 
.modbox 模块内容区{padding:10px 10px 0 10px;background-color:#FFFFFF} 
.modtl 模块左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px} 
.modtc 模块中上背景{background:url(temp1/ptitc.gif) repeat-x} 
.modtr 模块右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px} 
.modbl 模块左下角背景{background-color:#FFFFFF;line-height:1px} 
.modbc 模块中下背景{background-color:#FFFFFF;line-height:1px} 
.modbr 模块右下角背景{background-color:#FFFFFF;line-height:1px} 


-------------------------------------------------------------------------------- 

文章区域 
#m_blog div.tit 文章标题{font-size:14px;font-weight:bold} 
#m_blog div.tit a 文章标题链接{color:#333333;font-size:14px;font-weight:bold} 
#m_blog div.tit a:visited{color:#333333} 
#m_blog div.date 文章发表日期{margin:5px 0 8px 0;color:#666666} 
#m_blog div.cnt 文章内容{color:#333333;line-height:20px;font-size:14px} 
#m_blog div.more{margin:14px 0 16px 0} 
#m_blog div.more a 阅读全文链接{color:#3399CC;font-size:14px} 
#m_blog div.more a:visited{color:#3399CC} 
#m_blog div.opt 文章操作区(如编辑、评论等){color:#666666;font-size:12px} 
#m_blog div.opt a 文章操作链接{color:#3399CC;font-size:12px} 
#m_blog div.opt a:visited{color:#3399CC} 
#m_blog div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4} 
#m_blog div.none 无文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px} 


-------------------------------------------------------------------------------- 

个人档案区域 
#m_pro a 链接{color:#3399CC} 
#m_pro a:visited{color:#3399CC} 
#m_pro div.image 个人头像{text-align:center} 
#m_pro div.act 操作区(如加为好友、发送消息){margin-top:10px} 
#m_pro div.user 用户名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold} 
#m_pro div.desc 用户简介{color:#333333;font-size:12px} 
#m_pro div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4} 
#m_pro td{color:#333333;line-height:24px;font-size:14px} 


-------------------------------------------------------------------------------- 

相册区域 
#m_album div.image 照片{text-align:center} 
#m_album div.page {color:#666666;font-size:12px;text-align:center} 
#m_album div.page a{color:#0000CC;font-size:12px} 
#m_album div.page a:visited{color:#0000CC} 


-------------------------------------------------------------------------------- 

友情链接区域 
#m_links div.item 子项{color:#333333;font-size:12px} 
#m_links div.item a 名称(链接){color:#3399CC;font-size:12px;text-decoration:none} 
#m_links div.item a:visited{color:#3399CC} 
#m_links div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

文章分类 
#m_artclg div.item 子项{color:#666666;font-size:12px} 
#m_artclg div.item a 分类名称(链接){color:#3399CC;font-size:12px} 
#m_artclg div.item a:visited{color:#3399CC} 
#m_artclg div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

最新评论区域 
#m_comment div.item 子项{color:#333333;font-size:12px} 
#m_comment div.item a 发表人(链接){color:#3399CC;font-size:12px} 
#m_comment div.item a:visited{color:#3399CC} 
#m_comment div.item a.cnt 评论摘要(链接){color:#333333;font-size:12px;text-decoration:none} 
#m_comment div.item a.cnt:visited{color:#333333;text-decoration:none} 
#m_comment div.item a.cnt:hover{color:#333333;text-decoration:underline} 
#m_comment div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

相册列表 
#m_albumlist div.note{color:#333333;font-size:14px} 
#m_albumlist div.desc 简介{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} 
#m_albumlist div.none 无照片提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px} 
#m_albumlist div.line 分界线{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4} 
#m_albumlist div.tit 照片标题{margin:6px 0 7px 0;color:#333333;font-size:14px} 
#m_albumlist div.tit a 照片标题链接{color:#3399CC;font-size:14px} 
#m_albumlist div.tit a:visited{color:#3399CC} 
#m_albumlist span.count 照片数量{color:#666666;font-size:12px;font-weight:bold} 
#m_albumlist span.size 照片尺寸{color:#999999;font-size:12px;font-family:Arial} 
#m_albumlist a.act 操作区链接(如编辑、删除){color:#3399CC;font-size:12px} 
#m_albumlist a.act:visited{color:#3399CC} 
#m_albumlist a.page 页码链接{color:#0000CC;font-size:14px} 
#m_albumlist a.page:visited{color:#0000CC} 
#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF} 


-------------------------------------------------------------------------------- 

好友列表 
#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} 
#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} 
#m_friend div.user{margin-top:4px;color:#333333;font-size:12px} 
#m_friend div.user a 好友名称(链接){color:#3399CC;font-size:12px} 
#m_friend div.user a:visited{color:#3399CC} 
#m_friend div.line 分界线{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

设置访问统计、模板设置 
#m_setting a 链接{color:#3399CC} 
#m_setting a:visited{color:#3399CC} 
#m_setting 主体{line-height:22px;color:#333333;font-size:14px} 
#m_setting img.sel 模板预览图(选中状态){border:4px solid #FFDB7B} 
#m_setting img.unsel 模板预览图(未选中状态){border:1px solid #D2D2D2} 
#m_setting span.tit 模板标题名称{font-size:14px} 
#m_setting span.usr 作者名{color:#666666} 
#m_setting div.sel “当前模板”文字{padding-top:6px;font-size:14px;font-weight:bold} 
#m_setting div.line 分界线{margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

系统公告 
#m_sysinfo a 链接{color:#3399CC} 
#m_sysinfo a:visited{color:#3399CC} 
#m_sysinfo 主体{line-height:22px;color:#333333;font-size:14px} 
#m_sysinfo span.new 最新{color:#FF0000;font-size:10px;font-family:Arial} 
#m_sysinfo span.date 发布时间{color:#666666;font-size:14px} 


-------------------------------------------------------------------------------- 

基本选项 
#m_setbase 主体{color:#333333;font-size:14px} 
#m_setbase td{color:#333333;font-size:14px} 
#m_setbase div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4} 


-------------------------------------------------------------------------------- 

网友评论 
#in_comment 主体{width:710px} 
#in_comment div.tit 标题{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold} 
#in_comment div.user 发表人名{margin-bottom:6px;color:#333333;font-size:12px} 
#in_comment div.user a 发表人名(链接){color:#3399CC;font-size:12px} 
#in_comment div.user a:visited{color:#3399CC} 
#in_comment div.user span.date 发表时间{color:#666666;font-size:12px} 
#in_comment div.desc 评论内容{color:#333333;font-size:12px} 
#in_comment div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4} 
#in_send div.tit 发表评论(标题){margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold} 
转载请注明:破洛洛(谢谢合作)
网友评论: