修改CSS:设计你的漂亮家园

漂亮家园"/>

修改CSS:设计你的漂亮家园

　　这其中可以修改的是框架的宽度、高度，框架的边框样式和其颜色，框架的背景颜色，框架的对齐方式，框架内部文字的对齐方式，文字的样式。
　　之后我们来看具体一点的图：


①：背景图片——可以更改
②：卷首图片——包括框架可以更改
③：个人图片——不说了……
④：BLOG介绍——可以更改项目有文字 背景颜色 背景图片 框架 可以向里面添加一些HTML语言
⑤：功能框架每一栏的标题——可以更改字体 背景
⑥：日历——除了数字都可以更改
⑦：栏目——可以更改框架 背景
说明：日志部分为纯框架格式，修改同框架，底部图片和卷首图片一样，修改文字样式一般在相应的框架上修改。

　　上面这个图是快速登陆板块，与其他不同的是带有文字输入框和按钮。
　　文字输入框可以更改的项目有宽、高，背景，边框样式，文字样式。
　　按钮可以更改的项目有宽、高，背景，边框样式，文字样式。
　　做为首页，可修改的元素是最多的，而其他俩页（索引和单篇）都只包含了首页的部分元素，因此首页修改完毕之后，只要将首页上与另外俩页相同部分的样式代码COPY过去另加修改即可，当然也可以单独制作样式以显重要，但总归是万变不离其宗，首页上的会了，其他地方也就一通百通了。
　　当然，要想做出一个漂亮的BLOG，光会CSS代码是不够的，还需要有一些设计技巧，像如何用简单的颜色来让我的BLOG更好看，更适合我的文字、我的心情。设计对于网络上的东西来说是很重要的一点，这就是为什么我要把一些有关可以修改设计的东西先拿出来的原因。就如同玩积木一样，CSS只是积木，而搭出什么样的房子是看个人，但是别人最后看的是你的房子，而不是你的积木。但是，如果连积木都没有的话，其他的就不用什么了。

　　上回我们分析了下在BLOG面板上可以修改设计的元素，不知道各位是否对自己的BLOG有了更深一点的了解。那么从现在开始，我们将进入可爱又可气的CSS代码世界中。
个性BLOG完全打造（二）
扣门入室：什么是CSS
　　CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。
　　在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
　　只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
　　它的作用可以达到：
　　（1）在几乎所有的浏览器上都可以使用。
　　（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
　　（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
　　（4）你可以轻松地控制页面的布局 。
　　（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
　　CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。
　　说了一大通，其实也没什么意思，说白了CSS就是一个装修目录，告诉浏览器你这个柜子按我的这个样式做，那个桌子按桌子3的样式做，于是浏览器就听话的都一一做好给坐在屏幕前的人看啦。
　　关于CSS的语法规则和样式，实在是太多了，说多了大家一时半会也记不清，既然我们是打造个性BLOG，那小猫我干脆只把与BLOG相关的东西拿出来好了，至于其他的，有兴趣的可以自己去学习学习。（老虎曰：猫教东西都留了不少后手那，要不我也不至于到现在都不会爬树，各位见到了，给我打！） 　　
　　基本CSS语法：
　　样式规则组成如下：
　　选择符 { 属性: 值 }
　　单一选择符的复合样式声明应该用分号隔开：
　　选择符 { 属性1: 值1; 属性2: 值2 }
即：选择符{属性1:值1; 属性2: 值2}
　　div.entity{text-align:left;background-color:#3e3e5a;}
　　日志主体{文本对齐方式：全部靠左；背景颜色：是3e3e5a;}
　　也就是说CSS先点名，叫到“日志主体”时候“日志主体”得出来报到，“到”了之后CSS让日志主体把自己内部的文本都对齐，对齐法用“全部靠左”，再让日志主体改变自己的背景颜色，用RGB色调中的3E3E5A颜色。CSS语言就这么简单。
　　下面先说一下刚才提到的RGB是个什么东东。
　　RGB是色光的色彩模式。R代表红色(Red)，G代表绿色(Green)，B代表蓝色(Blue)。在RGB模式中，由红、绿、蓝相叠加可以产生其它颜色，因此该模式也叫加色模式。显示器、投影设备以及电视机等许多设备都依赖于这种加色模式来实现的。
　　在RGB中用的是16进制，即从00（0）到FF（255）。其中红色R，绿色G，蓝色B分别有从00（0％，纯黑）到FF（100％，纯色）的色彩，将选择的三色颜色混合，得出的即为所用颜色，而其代码按红绿蓝的顺序排列，即为所用颜色的代码。如黑色为000000，白色为FFFFFF，红色为FF0000,绿色为00FF00，蓝色为0000FF，黄色为FFFF00，蓝绿色为00FFFF，紫色为FF00FF。
　　RGB的颜色可以从调色盘里选择，然后复制给出的代码粘贴就可以，像Macromedia的网络三贱客都有这个功能。
　　继续说CSS。下面进入实例教学。
　　在BLOG的模板面板里，找到可以DIY的部分，打开之后看到的是全文本。还以BLOGCHINA的默认模板“秋天的童话”为例，打开模板首页，看到文本框里文本若干，基本形式为：
/*========================大框架============================*/
div#container{
width: 778px;
margin: 0 auto 0 auto;
border: 1px solid #000000;
padding: 0;
}
解说一下：
/*========================大框架============================*/
注释，告诉你从这以下到下个/*……*/以上这中间的内容定义的是BLOG面板上的哪一部分
div#container{
选择符，告诉浏览器将给这个元素定义一些内容，这个元素就是上面注释给出的。注意不要修改此行，修改以后浏览器将找不到相应的元素定义样式。想知道后果可以自己改改看，只是让你定义的东西都失效而已。
width: 778px;
属性——宽度：值——778象素；
margin: 0 auto 0 auto;
属性——设定一个元素的4个边界与浏览器边界的距离：值——顺序为上0象素、右自动值、下0象素、左自动值；
border: 1px solid #000000;
属性——4边边框样式：值——边线1象素宽，边线为实线，边线颜色为黑；
padding: 0;
属性——边框与内容之间隔了多少距离：值——0象素，不空距离；
}
　　估计是到了这里有些人就该看着头晕了，其实没关系，关于CSS的属性和值在后面会有详细的解说，这里只要能看懂CSS的语言规则就可以了。在自定义模板里面，都是一个一个元素定义的重复，只要将系统给的默认值改成你想要的值就可以了，若想添加一些其他的效果，只要添加新的属性并赋值就好了。同一个元素的属性没有数量限制，但是不能重复，不能发生冲突。
　　写还是改CSS代码要注意的是要有选择符（一般BLOG模板都有给出，不需自己添加修改），要有属性，所有属性都要赋值，属性和值中间用英文的：分开，一个属性和一个值为一组，每组用英文的；分割，记得要是误删了{ }的话还要写回去。如果你的BLOG连1个字都没有，那么你可以跳过这一章。可是你的BLOG真的连一个字都没有吗？那还是进来看看的好。HOHO……

个性BLOG完全打造手册（三）
文本字体属性
　　本来想先说说方框属性的，但是文字属性在方方面面都有所用，而且属性不少，所以就先它啦。
　　猫酷爱秋天的童话这个模板，依旧抓来当样本，哈。先抓一段过来讲。打开秋天的童话DIY模板，在最开头部分会看见代码如下：
a:link {
font-family: Arial,Helvetica,sans-serif;——用指定的字体或一个种类的字体族科
font-size: 9pt;——字体显示大小
color: #EEEEEE;——字体颜色
text-decoration: none;——文本修饰
}
　　这些就是最最常用的字体属性了，不管是BLOG还是网站都靠他们了。我列出了字体的属性，不知道各位能不能看懂他们的值？ 　　
　　字体属性主要包括的是字体族科、字体风格、字体加粗和字体大小，相应的属性和值见下列表。
font-family——字体族科：用指定的字体或一个种类的字体族科
语法: font-family: [[<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>]
允许值:
<族科名称>
任意字体族科名称都可以使用
<种类族科>
serif (e.g., Times)
sans-serif (e.g., Arial or Helvetica)
cursive (e.g., Zapf-Chancery)
fantasy (e.g., Western)
monospace (e.g., Courier) ＝＝
初始值: 由浏览器决定
适用于: 所有对象
注释：一般在修改BLOG的时候可以不用修改，想要另创新意的时候请注意效果。任何包含空格的字体名都必须用单引号或双引号引住。
font-style——字体风格：以3种定义方式中的一种来显示字体
语法: font-style: <值>
允许值: normal （普通）| italic（斜体） | oblique （倾斜）
初始值: normal
适用于: 所有对象
注释：用斜体也不错，不过就是有些浏览器不能很好的显示斜体，请注意。
font-variant——字体变形：决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。
语法: font-variant: <值>
允许值: normal（普通） | small-caps （小型大写字母）
初始值: normal
适用于: 所有对象
注释：当文字中所有字母都是大写的时候，小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。
font-weight——字体加粗：使显示字体加粗
语法: font-weight: <值>
允许值: normal（正常） | bold （粗）| bolder | lighter | 100（值） | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
适用于: 所有对象
注释：当其它值绝对时，bolder和lighter值将相对地成比例增长。注意因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择：500会被 400代替，反之亦是100-300会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗 600-900会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗。一般用BOLD即可。
font-size——字体大小
语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比>
允许值:
<绝对大小> xx-small（最小） | x-small （一般小）| small（小） | medium（一般） | large （大）| x-large （较大）| xx-large（巨大）
<相对大小> larger（大点） | smaller （小点）
<长度> 值，单位PT即可，按象素算，猫猫的BLOG字体在9－11象素之间。
<百分比>(in relation to parent element)
初始值: medium
适用于: 所有对象
注释：BLOG的初始值为9PT，若想大点可以改为11－14。建议用数值来表示，简单方便安全。
　　小猫觉得写多了……各位可能会有点看不明白吧……信息量太大了……下面的简单点吧……
　　继续说文本的属性……
　　文本属性主要包括字符间隔、文字修饰、文本排列、文本缩进和行高＝。
letter-spacing：字与字之间的距离，属性为数值，一般用默认即可，不用特意修改。
语法：letter-spacing:5PX;
text-decoration：文本修饰，用的比较多，像最常见的下划线，默认是none（没有）。属性值有5个。
语法：
text-decoration:none;——没有修饰
text-decoration:underline;——下划线修饰
text-decoration:overline;——上划线修饰
text-decoration:line-through;——删除线修饰
text-decoration:blink;——闪烁，只用在NetScape浏览器上
text-align：文本的水平对齐方式，包括左、右对齐、居中和两端对齐。
语法：
text-align:right;——右
text-align:left;——左
text-align:center;——居中
text-align:justify;——两端
line-weight：行距，值为数值、百分比都可。BLOG上文字多的话此项设高一点，不改的话也可以在录入时候用空行代替。
语法：
line-weight:20px;
line-weight:100%;
　　以上，就是基本的文字文本属性，在任何地方你看到了他们，都可以按自己的想法去改变他们的值。但是，要注意的是限制此文本属性的选择符，也就是说，在某一元素的选择符下写入修改文本属性，这些属性显示体现在此元素中，而某些属性并未写入，将按照默认值或此元素的上级元素中的设定（如果有的话）来显示。若想让某些元素中的文字有特定的属性，而此元素的代码中并没有你想要的文字属性，只要把属性和赋值写进去就好了，注意的是英文小写的:和;。

个性BLOG完全打造（四）
回顾一下上回讲到的文字显示上的常用属性，有这么几种：
font-family:用指定的字体或一个种类的字体族科
font-size: 字体显示大小
font-color: 字体颜色
text-decoration: 文本修饰
text-align:文本的水平对齐方式
line-weight:行距
　　那么再看看我们的模板上都要有文字显示的部分（按照DIY模板代码显示排列，“”里的内容为网站版面正式显示的内容）：

body：即整体，但BLOG基本上都是分小项目单设置字体样式，所以模板在BODY上只有基本字号设置和a:link、a:visited和a:hover（后面介绍）
　　Blog名称：大标题的字体显示
　　Blog访问次数：“访问统计、文章个数、评论个数、留言条数”的字样
　　每一栏的标题：“关于作者、日历、快速登陆、最新文章”等功能框架名称的字样
　　日志标题：不说了，地球人都知道
　　其它：杂七杂八零碎的字样，比如文章下面的“摘要、作者、星期三、18:18、回复（1）、引用（0）、加入博采”
　　登陆用户名 密码：指的是登陆文字框前的“+ 用户名：”和“+ 密　码：”，并不是框里的文字
　　留言板 辍称：留言版上留言者的名字的样式
　　书签组：只是“Powered by BlogDriver 2.1”的字样
　　留言板文字：留言内容的字样
　　友情Bolg文字：只用到text-align定义文字位置
　　定义Logo：只用到text-align定义文字位置
　　留言板小输入框：留言者输入昵称时所看到的样式
　　留言板大输入框：留言者输入留言时所看到的样式
　　登陆输入框：登陆是登陆者可以看到自己帐号密码的字样
　　按纽：按钮上的字样
　　左边框架：定义此框架内a:link、a:visited和a:hover的样式
　　功能框架：定义一般显示字体的样式，比如“用户名、作者、地区”
　　Blog介绍：Blog介绍框架里的文字样式
　　日志主体：就是文章正文部分在首页“打开”状态下显示的字样，还有摘要内容
　　底部：最底下的“Copyright?2003-2004 BlogChina.COM All rights reserved”的字样
　　日历大框架：日历显示的字样
　　日历一般单元格：同“日历大框架”，但定义的比之更详细
　　日历今天样式：日历今天的字样
　　日历星期天样式：日历星期天的字样
　　日历有连接的样式：日历有发表文章日子的字样
　　日历鼠标移动上的样式：鼠标移上去当前小格的背景颜色会变是不？也可以让字变变色变变大啦

　　至于索引页和单篇文章页，定义文字样式和首页一样，只是可以定义的部分没首页多（没有日历、功能框架＝＝），在此就不重复了。
　　现在可以上手修改了，一个一个来改吧。
　　在有的地方我们可以看见有a:link、a:visited和a:hover的选择符，这些是让文字动起来的“关节”。a:link是指此文字有超链接，定义的是有超链接文字的样式；a:visited是指此文字的连接浏览者已经访问过，定义的是已访问链接的文字样式；a:hover定义的是当鼠标移动到有超链接的文字上面时文字改变后的样式。
　　举例来说：一般用默认文字样式做出的网站版面文字是黑色的，而有超链接的文字部分是蓝色的，在访问过后这些文字会变成综红色，当鼠标移动到这些文字上面时文字下会出现下划线。
　　打开首页模板我们第一件事要做的就是先定义这些内容，在模板一开始我们会看到如下代码：
a:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #EEEEEE;
text-decoration: none;
}
a:visited {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #eeeeee;
text-decoration: none;
}
a:hover {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #FFCC99;
text-decoration:underline;（原版是BLINK－闪烁，在IE上不支持，我给改成了下划线……）
}
它的显示样式是这样的：
一般链接显示字体样式;
访问后链接显示字体样式;
鼠标移到有链接字体上时样式;

　　而我们动动手脚，就能把他变成这样：
a:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
color: #00ffff;
text-decoration: none;
}
a:visited {
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
color: #669933;
text-decoration: line-through;
}
a:hover {
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: #0000ff;
text-decoration:underline;
font-weight:bold;
}
他的显示效果为：
一般链接显示字体样式;
访问后链接显示字体样式 ;
鼠标移到有链接字体上时样式;

　　很难看是不？当然了这只是猫猫随意写了个数进去，要想做出漂亮的文字链接，还要靠自己设计哦……
　　放送一下猫猫“流动的堕落”的一般链接字体样式代码吧：
a:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #EEEEEE;
text-decoration: none;
}
a:visited {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #eeeeee;
text-decoration: none;
}
a:hover {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #8effff;
text-decoration: blink;
}
显示效果是这样的……
鼠标移动上来看看

　　那么，关于链接文字的样式，你会了么？以后看见有a:link、a:visited和a:hover的选择符，想怎么改就怎么改，但是要注意版面整齐哦。提醒一下，在有些浏览器上，斜体作为a:hover的样式时候不能正常显示，也就是说把“font-style:italic;”加入到a:hover下并不是很完美，但要想用也不会出问题的。
……

个性BLOG完全打造（五）
　　打开代码表，我们可以在最开始的a:link、a:visited、a:hover下找到body这个选择符，在body下有font-size: 9pt;及text-decoration: none;这俩个文字属性。font-size定义的为首页整版的一般文字字号，text-decoration则是定义他们的装饰物。如果真是喜欢另类，不妨试试看把text-decoration的值改为line-through会是什么样子。
　　在定义BLOG名称一栏里，我们可以发现如下代码：
/*===============定义Blog名称=====================*/
h1{
font-family: Arial,Helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
color: #DA52A7;
visibility: hidden;
}
p{
margin: 0;
padding:0;
}
h1.title{
float: left;－漂浮
margin: 0px;
padding: 0px;
margin-right:30px;
}
（其中的h1代表的是大标题样式1，同样的选择符还有h2-h6，均代表标题的不同样式。这些不需要修改，理解不理解无所谓。）
　　基本的几项修改就不说了，没见过的几个多为定位用的属性，猫猫来给依次介绍下：
visibility:定义可见性，属性有Inherit（继承）、visible（可见）、hidden（隐藏）。
margin: 边界，允许值: <长度>、<百分比>、auto。
　　边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。
　　如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。 边界声明包括以下例子：
margin: 5px——所有边界设为5px
margin: 2px 4px——上和下边界为2px，左和右边界为4px
margin: 1px 2px 3px 4px——上边界为1px，右边界为2px，下边界为3px，左边界为4px　
　　注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。
　　使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和右边界属性。
padding: 补白，允许值: <长度><百分比>。
　　补白属性是上补白、右补白、下补白和左补白属性的略写。一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值，每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。如果四个值都给出了，它们分别应用于上、右、下和左补白。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。
　　例如，以下的规则设置上补白为2px，右补白为4px，下补白为5px，左补白为4px:
padding: 2px 4px 5px
float: 漂浮，使文字环绕在图片周围，允许值: left | right | none。
　　margin和padding属性不光用在文字上面，同时也适用于其他元素。
　　对于其他部分的文字，修改方法都是一样的，基本上都是字体、字号、字色、文本修饰、文字对齐方式和文字定位的自定义。对于这些，可以参照我前面给的“模板文字显示部分”及文字文本相关CSS代码表修改。关键是要多动手，找对你所想修改部分的代码，多看效果。
　　我们在代码表的日志标题部分可以看见的代码如下：
h5{
……
}
h5 a:link {
……
}
h5 a:visited {
……
}
h5 a:hover {
……
}
　　字体属性就省了，我们不看那个，大家都会的。我们要关注的是这个h5 a:link。也许有人要问：在代码表的最开始我们不是已经定义了a:link这些东西了么，这怎么又蹦出来了？
　　这里的a:link＝＝是专门定义属于h5标题样式文字的超链接样式的，而我们在最开始定义的a:link，只是一般的有链接文字的样式。也就是说，我们通过在a:link前面增加已有（字体的）选择符，就可以单独定义他们的链接样式。这样一来，我们就可以在一个版面当中应用多于一种的文字链接样式，使我们的首页更美观更灵活。
　　介绍个例子，也算特例吧，这是模板“底部”的CSS代码：
div#footer{
width: 778px;
height:16px;
text-align: center;
padding: 3px 0px 0px 0px;
margin-right: 0;
background-color: #97562f;
float: left;
}
div#footer a:link {
……
}
div#footer a:visited {
……
}
div#footer a:hover {
……
}
　　我们在首页的页面上可以看到在最底部，有一个长条的图片，上面有超链接的文字。在这里的div#footer并不是单独选择文本，而是装有底部所有元素的一个框架。而在这之中混有的文字属性，依然可以用div#footer a:link来定义在底部框架中文本的超链接样式。这个div#footer a:link，与前面的h5 a:link还有最开始的a:link并不冲突，他们三个各自在自己的框架内定义着相应的文本样式。 　

个性BLOG完全打造（六）
不知道各位是否还有印象，我在一开始就给出了一个大的框架结构事例，来说明你的面板是怎样显示的。这个框架是BLOG面板最基本的样式，几乎全部的BLOG页面都是如此构造，略有区别的只是功能面板在左还是在右。我不知道各位是不是能把他看作是一个大表格，而事实上他确实就是一个包含了很多小表格在内的大表格。网站元素的定位显示不如同图片元素的定位显示，图片定位很简单的，在图片内以象素为单位用平面坐标定位，象一些分层的原稿显示的时候浏览器可以读取单一元素的坐标（X,Y）。而网页上的定位，用的是表格和层。用层来作框架显示网页的原理和图片有些类似，但一般比较少用，我们这里主要讲解用表格来作页面的大框架。
　　表格相信我不用介绍大家也都知道是个什么东西，包括表格里横向称“行”竖向叫“列”。一般的BLOG首页页面，是由一个位置居中的大表格来作框架，他将所有的页面元素包含在内（路人甲：那页面的背景没在里面啊……路人乙：94，你看那XX猫的首页背景宽度有1024，他的大框架宽度才778，是对折以后才装进去的么。路人丙：真是给折了之后装进去的么？路人甲：……你折折看就知道了。路人丙：【折叠ING，折叠失败】XX猫这不是误人子弟么……是不是……【众人皆以眼角瞟向XX猫】某猫：我……我说错了，我改还不行……众人：抱歉，已经晚了……【以下内容少儿不宜，省略XXX字】）。大框架第一行内放图片；第二行有两列，分别放置功能框架和日志——功能框架又是一个完整的小表格，里面有N列，放置不同的东西，这些列里面有些还含有更小的但依然完整的表格。日志是由N个表格组合而成，每个日志占单独的一个表格，这个表格又有三行，用来显示日志名称、内容和作者日期。大框架的第三行用来放结尾的图片。
　　在这个大框架里，每个小格都有自己的宽高，而小格之中包含的下级表格，又有自己的宽高和排列属性（居中，靠右，靠左＝＝），而下级表格的小格还有自己的宽高，也可能包含更下一级的表格。在这种情况下，页面的元素分布在不同的表格里，他们就可以有自己的位置而不和别人发生冲突了。
　　在BLOG中表格里的内容一般是不允许我们自己修改的，我们只可以改动表格的样式。下面我给列出一些常见的表格样式属性。
宽度和高度：（可用于几乎所有的元素，比较简单，后面遇见其他元素的此属性参见下列文字即可，不再单讲了）
width:，宽度，允许值: <长度>、<百分比>、auto
　　每个块级或替换元素都可以用一个长度或“auto”值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 宽度属性的初始值为“auto”，即为该元素的原有宽度(有就是元素自己的宽度，例如一个图象的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。
height:，高度，允许值: <长度>、auto
　　每个块级或替换元素都可以用一个长度或“auto”值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 高度属性的初始值为“auto”，即为该元素的原有高度(有就是元素自己的高度，例如一个图象的高度)。不允许使用负的长度值。
　　与宽度属性一样，高度可以应用于设定图象的比例:
width: 40px; height: 40px
　　在大多数情况下，我们都建议网页制作者使用图象编辑软件按比例伸缩图象，因为浏览器不可能高质量地伸缩图象，也因为使用这个属性缩小图象会导致用户下载了一个不必要的庞大文件。虽然如此，通过宽度和高度属性伸缩图象依然是用户—定义样式表中一个有用的用作克服视觉问题的选择。
边界和单项边界：
⒈margin
⒉margin-top
⒊margin-right
⒋margin-bottom
⒌margin-left
⒈margin: 边界，允许值: <长度>、<百分比>、auto。
　　边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。
　　如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。 边界声明包括以下例子：
margin: 5px——所有边界设为5px
margin: 2px 4px——上和下边界为2px，左和右边界为4px
margin: 1px 2px 3px 4px——上边界为1px，右边界为2px，下边界为3px，左边界为4px　
　　注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。
　　使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和右边界属性。
⒉⒊⒋⒌margin-top、right、bottom、left，上、右、下、左边界，允许值: <长度>、<百分比>、auto
　　边界属性用一个指定的长度或百分比值来设置元素的边界。百分比值参考上级元素的宽度。允许使用负值边际。
例如:
margin-top:0
margin-right:50%
margin-bottom:3em
margin-left:50%
注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。初始值（默认）为0。
补白和单项补白：
⒈padding
⒉padding-top
⒊padding-right
⒋padding-bottom
⒌padding-left
⒈padding: 补白，允许值: <长度><百分比>。
　　补白属性是上补白、右补白、下补白和左补白属性的略写。一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值，每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。如果四个值都给出了，它们分别应用于上、右、下和左补白。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。
　　例如，以下的规则设置上补白为2px，右补白为4px，下补白为5px，左补白为4px:
padding: 2px 4px 5px
⒉⒊⒋⒌padding-top、right、bottom、left，上、右、下、左补白，允许值: <长度><百分比>。
　　上、右、下、左补白属性描述上、右、下、左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
例如:
padding-top:0
padding-right:50%
边框属性：
⒈border
⒉border-style
⒊border-color
⒋border-top
⒌border-right
⒍border-bottom
⒎border-left
⒈border，边框，允许值: <边框宽度> || <边框式样> || <颜色>
　　边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。
边框的例子包括：
border: groove 3em——边框式样：槽状 边框宽度：3em
border: solid blue——边框式样：实线 边框颜色：蓝色
border: thin dotted #800080——边框宽度：瘦 边框式样：点线 边框颜色：（代码）800080
border: thick double red——边框宽度：厚 边框式样：双线 边框颜色：红
　　边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
　　也就是说在某选择符下用border，将一次性定义上下左右4个边框的属性，此4种边框属性一样。要想单定某边的属性，要用单项的边框属性定义。
⒉border-style: 边框样式，允许值: [ none（无） | dotted（点线） | dashed（虚线） | solid（实线） | double（双线） | groove（槽状） | ridge（脊状） | inset（凹线） | outset（凸线） ]{1,4}
　　边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。
　　可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。
　　也可以使用略写的边框属性。
举例：
border-style: solid——边框样式：4边都为实线
border-style: none dotted solid groove——边框样式：上边框：无 右边框：虚线 下边框：实线 左边框：槽状
border-style: dashed inset——边框样式：上下边框为点线 左右边框为凹线
⒊border-color：颜色属性，允许值: <颜色>{1,4}
　　边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。
　　也可以使用略写的边框属性。
举例：
border-color:#ff0022
border-color:red black cyan blue
⒋－⒎单项边框属性，用法同border，区别是分边定义边框属性样式。
背景：
background-color: 背景颜色，允许值: <颜色>、transparent (透明)
　　背景颜色属性设定一个元素的背景颜色。例如:
background-color: white
H1 { background-color: #000080 }
　　为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景图象都应该被指定。而大多数情况下，background-image: none都是合适的。
　　网页制作者也可以使用略写的背景属性，通常会比背景颜色属性获得更好的支持。
background-image:背景图象，允许值: <统一资源定位URLs> | none (无)
　　背景图象属性设定一个元素的背景图象。例如:
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(.png) }
　　为了那些不载入图象的浏览者，当定义了背景图象后，应该也要定义一个类似的背景颜色。
　　网页制作者也可以使用略写的背景属性，通常会比背景图象属性获得更好的支持。
background:背景，允许值: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>
　　背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
background: white url(.gif)
background: #7fffd4
background: url(../backgrounds/pawn.png) #f0f8ff fixed
background: #0c0 url(leaves.jpg) no-repeat bottom right
　　当一个值未被指定时，将接受其初始值。例如，在上述的前三条规则，背景位置属性将被设置为0% 0%。
　　为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。
　　我们在BLOG上用到的背景基本限定于背景颜色和背景图片俩项上，背景也是可用于多种元素的属性之一，后面再遇到是参照上面内容即可，不再重复。关于背景属性里的重复、附件及位置属性，一般都不会用到，若想了解的话，在后面推出的BLOG进阶里有其详细介绍。
　　说了这么多，不晕的是强人……其实我都晕了，休息一下下……

　　然后……还是打开你的DIY模板……找到
/*===定义留言板小输入框===*/
input.guestbookName {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #FFCC00;
text-decoration: none;
background-color: #666666;
height: 15px;
border: 1px solid #000000;
margin-bottom:5px;
}

/*===定义留言板大输入框===*/
.guestbookInput {
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
line-height: 18px;
color: #000000;
text-decoration: none;
background-color: #ca8053;
height: 60px;
width: 210px;
border: 1px solid #000000;
SCROLLBAR-FACE-COLOR: #ca8053;
SCROLLBAR-HIGHLIGHT-COLOR: #ca8053;
SCROLLBAR-SHADOW-COLOR: #ca8053;
SCROLLBAR-3DLIGHT-COLOR:#ca8053;
SCROLLBAR-TRACK-COLOR: #ca8053;
SCROLLBAR-ARROW-COLOR: #97562f;
SCROLLBAR-DARKSHADOW-COLOR: #ca8053
}

/*===定义登陆输入框样式===*/
input.inputStyle{
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
background-color: #666666;
height: 15px;
width: 140px;
border: 1px solid #000000;
color: #FFCC00;
}

　　这三个是定义输入框样式，其实就是表格框架样式。参照上面的内容，应该还是很好理解的，除了 SCROLLBAR的一串（这是关于浏览器拖动条的样式设置，我们在后面的进阶里会有讲）。这个就算作业吧，只要理解了就是100/100，不理解的……把这一篇从头看……。
关于按钮……（错字真多呢……）
/*===定义按纽样式===*/
input.buttonStyle{
font-family: Arial,Helvetica,sans-serif;
font-size: 9pt;
color: #FFFFFF;←
text-decoration: none;
background-color: #FF9B02;←
height: 19px;
border: 1px solid #000000;←
line-height: 18px;
margin-right: 5px;
margin-top:5px;
margin-bottom: 5px;
}
　　这里面的项目基本上不用有大动，只要把背景颜色、字体颜色和边框修改下就好。如果想做大变动的话，请参照前面的内容修改，所有的属性我们都讲过。一定记得要看效果，刚开始学的时候盲改有时候会显示的很难看。
　　在面板上大的框架有这么几个（按模板代码提示显示）：大框架、头部、左边框架、功能框架、右边框架、Blog介绍、日志－主体、底部（其实日志每一篇都是一个单独的表格，在这里BLOGCHINA的设定是单独设置这个表格的每一行）、栏目（就是有写“总目录”，点连接进去后是你的索引页的地方）、底部、日历（全部）。
　　总的来说只要上面的东西都明白了的话就没什么难度，难的就是怎么才能设计一个更美观的界面了。
　　若无特殊需求的话宽度高度可以不用变动，变动的话注意变动项目的上级元素，若下级元素宽度超过上级元素宽度的话上级元素的宽度将作废，注意显示效果。
　　在这里设置背景图片的话要用网上的连接，URL()的（）里要写全内容，以HTTP://开头，以.jpg、.gif、.png==结尾，网页制作上的...img/XXXX.XXX（相对位置）用不上。有背景图片设置时把背景颜色设定成none是一个好习惯。
　　首页版面上的表格框架里无法加入图片，只能用背景图片设置。
　　margin、padding属性设置起来太费心，建议用默认的即可。
　　关于有背景图片的框架宽度高度的设置：一般来说单张的是用图片大小来符合框架大小（像头部的图片），平铺的背景图像图片大小无所谓。当框架的高度小于图片高度（宽度）时将从下望上（从右望左）自动裁切掉图片多出部分（适用于打算放单张图片的地方，头部的图片注意），当框架宽度高度大于图片宽度高度时背景图片将平铺补满框架（默认）。特别注意栏目的框架，当你的栏目多的时候框架将自动加长，背景图片的话也将继续平铺，用单张图片的同志们要注意了，可以制作上下无缝图片。
　　现在浏览器一般最小分辨率是800×600，一般的是1024×768，这两种最常用，框架不要超过这个数值比较合适。另外，有些人的浏览器分辨率很高，而大框架永远是居中的，这时候使用横向不重复背景图片的兄弟们（像XX猫）就要注意你的背景位置了（有过惨痛教训的……我们后面进阶的时候会讲）。
　　这些里面最最特别的大概就是日历了吧……他有一个“日历鼠标移动上的样式”。这个就是说当你鼠标移动到日历上是你想要日历的当前格变成什么样子，只要设定成你想的样子就好了，但是注意效果，可以自己试试鼠标移动上去格子变大的代码是什么效果……一般来说日历的单元格宽高都统一比较好看，也可以另类下一行比一行高……
　　还是要记得看效果看效果再看效果，没有多少人会去看你的代码的，你的网页要的就是效果，我们学这么多的最终目的也是要一个好的版面效果，切记。

个性BLOG完全打造（七）
　　在这一节除了几个个别的元素属性，已经无啥新东西可讲。在此，我们的重点是页面修改完成后的调试和细小地方的改进。
　　版面上的细节部分很多，有的是你能看见的部分，有的是你看不见的部分，还有的你可能从头到尾都没注意过，甚至不知道。
　　举例来说，你能看到栏目条，也许你为他定做的背景图片刚刚合适，但随着你开设的栏目数量的增多，栏目条也会随着增加高度，这时背景图片将会向下平铺，许会造成有缝衔接，一般人也许不怎么在乎，但有些很喜欢追求完美的人（像某猫）就该对此耿耿于怀了。这是个好解决的问题，将图片制作成无缝衔接图片就好了。但这个有缝还是无缝，就是一个可以抠一下的小细节，不光是在栏目条，你的所有的背景图片都存在这个问题。是有缝？还是无缝？在某些方面上来说，从有缝改进到无缝就是一个进步，但也许从无缝到有缝又是一个提高——要创新，要美感。
　　细节虽小，但仍有人注意，这如同做人，你在某些小地方自己的无心之举，可能就会给别人带来很不好的印象，继而影响到他人对你整个人的评价。在网路上来说，现下可选择的网页海了去了，如何来吸引新老顾客是个技巧。比如某网站，字体颜色设置的和背景颜色很相近，来人看文章会很吃力，这样下去能长久么？又如某BLOG，鼠标指针设定有问题，造成页面上指针显示异常，有些人看着很别扭，他就不会再次光临。还有，一个网站的设计者将单张图片作为网页的背景图片（像我的背景），在1024的环境下看着很合适，800的情况下可能就歪了，遇上用更高分辨率的用户，你让人家怎么看？
　　在我的《蔷薇刺血》一篇里可以看到水心的评论“嗯，图的型号终于改过来了。不错，感觉很好～ ”，这是我修改后她能正常显示时给我的答复。当初看时她的浏览器用的是1280×964的分辨率，相当高，但我的背景图片宽度为1024，高度上以无缝衔接无限重复，当一般设置我的背景时，在她的浏览器上显示的却是和我的大不一样。我在800和1024下能正常显示，但1024以上显示的却是这个样子：

黑色部分是背景图片，灰色是多出来的背景，以背景色显示，框中的是BLOG主体部分。背景图片透过BLOG主体，叠加效果极其混乱。怎么解决这个问题呢？其实这里用背景属性设置就好了。
background-repeat: 背景重复,允许值: repeat（横竖都重复） | repeat-x（横向重复） | repeat-y(纵向重复） | no-repeat（不重复）
初始值: repeat
　　背景重复属性决定一个指定的背景图象如何被重复。值为repeat-x时，图象横向重复，当值为repeat-y时图象纵向重复。
例如:
BODY {
background: white url(candybar.gif);
background-repeat: repeat-x }
　　在以上例子中, 图象只会被横向平铺。
background-position: 背景位置，允许值: [<百分比> | <长度>]{1,2} | [top（顶端） | center（居中） | bottom（底端）] || [left（左） | center（居中） | right（右）]
初始值: 0% 0%
　　图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)
　　安排背景位置最容易的方法是使用关键字:
　　横向的关键字 (left, center, right)
　　纵向的关键字 (top, center, bottom)
　　百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的，但因为它们处理不同的显示分辨率有不可避免的缺点，所以不被推荐。
当使用百分比或长度时，需首先指定横向位置，接着是纵向位置。一个值，例如20% 65%，指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px，指定图象的左上角会被放在元素的左起5像素上起10像素的位置。
　　如果仅给出横向的值，纵向位置的值为50%。长度和百分比的组合是允许的，负值也行。例如，10% -2cm是允许的。虽然，百分比和长度是不能够和关键字组合。
　　如我的背景，尺寸为1024×100，我想让他永远和BLOG大框架对齐，那么在代码中如下设置：
background-position:center;
　　然后又有问题了，现在背景图片是居中显示了，可左右又空出了一些空间，浏览器又那新的图片填充上，还是很难看。这时候只要把背景图片设置成纵向重复就可以了，继续添加代码：
background-repeat: repeat-Y;
　　恩，现在感觉好多了，再加上一个合适一点的背景色来填充两边的空白部分，基本上就能满足大部分的用户浏览了。 　　
　　给出一个居中Y轴重复背景图片的代码实例：
body{
cursor:default;
padding: 0;
margin: 0;
font-size: 9pt;
text-decoration: none;
background-color:#000000;
background-image: url(……);
background-position:center;
background-repeat:repeat-y;
SCROLLBAR-FACE-COLOR: #754324;
SCROLLBAR-HIGHLIGHT-COLOR: #754324;
SCROLLBAR-SHADOW-COLOR: #754324;
SCROLLBAR-3DLIGHT-COLOR:#999999;
SCROLLBAR-TRACK-COLOR: #CA8053;
SCROLLBAR-ARROW-COLOR: #F5BF96;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}

　　黑色部分是背景图片，灰色是多出来的背景，以背景色显示，框中的是BLOG主体部分。（众人：又把那点内容来回来去复制……拉出去，打！）
　　（好好，我说点新的，表打我……）上面代码里有新东西：cursor和SCROLLBAR的一个系列。简单的说，cursor是定义当前元素上的鼠标指针显示样式，SCROLLBAR系列是浏览器右边的滚动条定义样式。
语法:cursor:<值>
允许值：
hand：是大家所熟悉的手型。
crosshair：精确定位，是十字型。
text：I，是平时鼠标移动到文本上的样式。
wait：是等待的效果。
default：是默认的那种效果。
help：是带问号的鼠标样式。
e-resize：是向右的箭头。
ne-resize：是向右上方的箭头。
n-resize：是向上的箭头。
nw-resize：是向左上方的箭头。
w-resize：是向左的箭关。
sw-resize：是向左下的箭头。
s-resize：是向下的箭头。
se-resize：是向右下方的箭头。
auto：是系统自动的效果。
url()：自定义鼠标样式，括号中添加连接地址。
　　这个就是在你想要改动的鼠标样式的元素选择符下添加就可以改变了。
关于自定义浏览器的滚动条
scrollbar-3d-light-color：立体滚动条亮边的颜色
scrollbar-arrow-color：上下按钮上三角箭头的颜色
scrollbar-base-color：滚动条的基本颜色
scrollbar-dark-shadow-color：立体滚动条强阴影的颜色
scrollbar-face-color：立体滚动条凸出部分的颜色
scrollbar-highlight-color：滚动条空白部分的颜色
scrollbar-shadow-color：立体滚动条阴影的颜色
　　以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。
　　啊哈哈，所有的课程都结束了……感觉有点虎头蛇尾的样子啊……真的好累呢。若有错误啥啥的还请各位高人指点下，在此谢谢了。若有朋友们有什么问题可以留言，我会尽力给出最好的答复。