《
CSs基础：CSS的位置问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023331H013.htm
--> [
网站建设之]CSs基本：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基础自动定位的应用。 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=",css基础实例只显示下划线的文本框;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基础 选择符详解.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,CSS在移动网站开发的前端技术和技巧，示例代码如下： 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",CSS在交互上的应用;>这个标题居中显示。</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,CSS在IE6,IE7,FIREFOX中的区别.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,CSS圆角背景与三角形实现办法;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,CSS图片层叠实现古画效果.item a 名称（链接）{color:#3399CC;font-size:12px;text-decoration:none} #m_links div.item a:visited{color:#3399CC} #m_links div,css命名规则：图片切图转网页的代码规范.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} Tag：CSS CSS基础 CSS CSS基础 ,CSS命名的三种规范化命名规则;
(责任编辑：网站建设)
CSs基础：CSS的位置问题相关文章