CSs基础：CSS的位置问题
网络整理 - 07-27
学习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字体属性 CSS常用文本属性 CSS背景属性 CSS边框属性 CSS边距属性 CSS间隙属性 CSS盒子模式(Box Model) ... margin_padding.html CSS列表样式属性 CSS伪类(pseudo-class) CSS代码示例 推荐 布啦布啦 - 网页教程与代码的中文站点 上面的东西都是理论，看是看不会的， 必须动手操作实践。 下面是百度给出的空间页面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}