《领地CSS模版代码全解析》由会员分享，可在线阅读，更多相关《领地CSS模版代码全解析（18页珍藏版）》请在金锄头文库上搜索。
1、 领地 CSS 模版代码全解析什么是 CSS 代码？在主页制作时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到： （1）在几乎所有的浏览器上都可以使用。 （2）以前一些非得通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而更快地下载页面。 （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （4）你可以轻松地控制页面的布局 。 （5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有
2、的网页风格都使用一个 CSS 文件进行控制，只要修改这个 CSS 文件中相应的行，那么整个站点的所有页面都会随之发生变动。 想一想，没有使用 CSS 前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用 HTML标签来实现，代码非常烦琐。 很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的 HTML 代码的长度一定臃肿不堪。 说实话，CSS 就是为了简化这样的工作诞生的，当然其功能决非这么简单。 CSS 是通过对页面结构的风格控制的思想，控制整个页面的风格的。 式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得 HTML 的人都可以掌握，非常的容易。甚至
3、对一些非常老的浏览器，也不会产生页面混乱的现象。 CSS 的一大优点是它的图片传输速度比较完全的 HTML 网页要快一点。 Cascading Style Sheets（层叠样式表）的历史 从 1990 年代初 HTML 被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着 HTML 的成长，为了满足设计师的要求，HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994 年哈坤利提出
4、了 CSS 的最初建议。伯特 波斯（Bert Bos）当时正在设计一个叫做 Argo 的浏览器，他们决定一起合作设计 CSS。 当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有“层叠” 的主意的。在 CSS 中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 刚刚建立，W3C 对 CSS 的发展很感兴趣，它为此
5、组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996年 12 月 CSS 要求的第一版本被出版。 1997 年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。到 2004 年为止，第三版还未出版。 * 1996 年 W3C 正式推出了 CSS1. * 1998 年 W3C 正式推出了 CSS2. * CSS2.1 是 W3C 现在正在推荐使用的. * CSS3 现在还处于开发中. 网页设计中常用的 C
6、SS 属性 文字或元素的颜色 color 背景颜色 background-color 背景图像 background-image 字体 font-family 文字大小 font-size 列表样式 list 鼠标样式 cursor 边框样式 border 内补白 padding 外边距 margin 等. CSS 的语法 : 编辑本段 CSS 的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 语法: selector property: value (选择符 属性:值) 说明: 选择符是可以是多种形式，一般是你要定义样式的 HTM
7、L 标记，例如 BODY、P 、TABLE，你可以通过此方法定义它CSS 中常见代码？PX： 像素一般用来设置字体的大小和边距width： 宽度height：高度left： 左边light： 右边cnetr: 居中color: #0179F1 表示颜色（具体值可以找到网页配色的网站选择）领地 CSS 样板代码解析？/* CSS Document */*定义页面总体样式*/body (主体 )background: url() repeat scroll!important;(这一行是我加上去的括号内表示背景图片地址 )另本站也提供300 种网页素材地址:http:/ 你可以去选一个放在里面ma
8、rgin: 0;(自动排列,居中的意思)font-family: Arial, Helvetica, sans-serif;(字体样式)font-size: 12px;(字体大小)/*定义页面总体宽度*/#top, #header, #nav, #main, #footer (顶部，页楣，分栏，主体，页脚)width: 788px;(表示整体页面的宽度:一般最小可以到 788 至 980PX(全屏)之间) 我现在用的就是 810margin: 0 auto;(表示页面居中)一般不要改/*左上角时间定义样式*/#date line-height: 20px;要想不显示时间就改为 0 和下面的改为
9、 Oheight: 20px;float: left;(靠左)表示时间显示位置margin: 0;padding: 0;/*logo 定义样式 */#logo border: 1px solid #00A8FF;这个是指网站站标图片边框线宽度不想要就改为 0)#00A8FF 这个表示颜色值float: left;(图片靠左的意思)一般不要改height: 70px;(图片高度 )width: 200px;(图片宽度)line-height: 70px;(定义线框的高度一般和上面一样)text-align: center;(指内图片在框内居中的意思)/*banner 定义样式*/(这个就是表示网
10、页右边的图片定义 )#banner border: 1px solid #00A8FF;height: 70px;(图片高度 )width: 560px;(图片宽度)float: right;右边( 指图片放置位置) 当然上面左边这个就要右边line-height: 70px;定义线框的高度一般和上面一样 )text-align: center;(指内图片在框内居中的意思)/*上部定义样式*/#header height: 80px;(上部连 LUGO 的高度一般不要改 )overflow: hidden;/*右上角链接定义样式*/（指的是文字）#fav line-height: 20px;线
11、的高度float: right;右边( 指链接文字放置的位置) 文字链接在基本设置里设置height: 20px;margin: 0;(页边距)padding: 0 10px 0 0;(填充大小)/*顶部定义样式*/#top line-height: 20px;指顶部线框的高度 (建议不要改)height: 20px;高度(建议不要改)/*导航链接定义样式*/(这里就是对导航条的定义 )#nav ul margin: 0px;指页边距padding: 0px;填充的意思(不要管他 )height: 57px;指导航图片的高度list-style: none;background: url(./
12、./templates/green/images/ind-cityviewbg.gif) repeat-x;(中间括号里面表示导航图片的地址)可以修改成你喜欢的图片地址建议图片高度为 50 到 60 以内#nav li line-height: 40px;float: left;#nav a padding: 15px 18px;#nav a:hover color: #FF1493;background: url(././templates/green/images/ind-selviewbg.gif) repeat-x center 1px;(中间括号表示鼠标滑过显示的图片可以改)不想显示
13、图片就删掉括号内的a:link 链接样式color: #333333;text-decoration: none;a:visited (对己经看过的页面用一种颜色定义)color: #333333;颜色值突出显示text-decoration: none;(指文本装饰:这里不装饰)a:hover color: #000000;/*鼠标指向变色*/没有的可以加上这一句颜色值可以改text-decoration: none;background: url() repeat;括号中间也可以填上图片地址(这是我加上去的)/*边框定义样式*/#sider #notice p (边栏广告框定义 )back
14、ground-color: #FBFEFF;(背景颜色值)margin: 0 0 12px 0;页边距调整(12 指上 0 代表下边距)padding: 5px 10px;设置广告框大小前面 5PX 表示高度border: 1px solid #00A8FF;指边界线宽及颜色值(不想要就改为 0)#sider width: 190px;(广告框的宽度)float: left;(靠左)表示广告框的位置如放右边改成 right#sider h2 background: url(././templates/green/images/link3.gif) no-repeat left top;(括号内
15、是定义边框标题栏的图片地址)font-size: 12px;(标题栏上文字大小)margin: 0px;(指标题图片的页边距)padding-left: 40px;(文字靠左页边空白距离 )color: #FFFFFF;(文字颜色值)line-height: 23px;(线框的高度)height: 23px;(标题栏的高度建议和上面线框高度保持一致)#sider ul background-color: #FBFEFF;(指边栏框的背景颜色)width: 178px;(边栏的宽度)margin: 0 0 12px 0;(距离页边的空白距离)padding: 5px;list-style-typ
16、e: none;border: 1px solid #00A8FF;边界线宽及颜色 solid 表示实线#sider li (定义热门文章标题之间的距离和线宽)line-height: 20px;线的高度padding: 0 5px 0 15px;border: 1px dashed #97D2FF;边界线宽及颜色 dashed 表示用虚线border-width: 0 0 1px 0;边界的宽度background: url(././templates/green/images/jt-2.gif) no-repeat 2px center;(背景:括号内是边栏文章栏和友情链接以及公告栏文章前面的小图标地址)height: 20px;高度/*内容定义样式*/(就是主页最新文章内容 )#contents w
