|
+------------------------------------------------------------------------------------------------------+
blog小教程 ---- 基本解析和css部分的字体设置 [2005-8-1]
thanksweb 发表在 舶来品
| 如下内容转自希儿的潘多拉盒子（http://www.5dblog.com/vip/silver/index.asp?id=128688）。我一直改自己做个BLOG的页面，但苦于不知从何处下手，正好看到希儿的贴子，所以先存过来，以便随时翻看，空儿时制作一个。在此，特别谢谢她，也希望我的拿来主义，希儿看到不会介意！
最近总有人问到一些字体的基础设置，我干脆单拿出来说一下。。PS：我在这方面也很菜。。之前还需要LEMONed给我讲解基础。。。-_______-。。高手们就不用看了哈。。。
【以下为白话讲解^__^#。。我实在不懂那些专业术语】
---------------------------------------------------------------------------
一。blog代码用什么编辑？
5D这里自带编辑器，不过我自己习惯用Dreamweaver，创建一个HTML新项目
一个项目分为代码、拆分、设计三个分页：代码为显示代码；拆分为同时显示代码和页面视图；设计为显示页面视图。
这时我们把代码页面默认生成的基本代码删掉。删空了以后把5D给的代码拷贝进去就行了，点击设计页面就能看到你的页子了。。然后可以进行编辑。
---------------------------------------------------------------------------
二。5D的代码都包括哪几个重要部分呢？
仔细观察我们的代码（挖。。好乱。。）不过主要有三个重要的部分。。。
代码的最上面部分<STYLE type=text/css>.......若干行....</STYLE>
这就是传说中的css部分。。它的功能就是定义你的页面里字体样式和一些表格样式。。还有什么日历、评论、链接的样式，总之就是样式的设置。
剩下的部分，从<TABLE>开始就已经进入了页面的设置，包括整个页面的结构，在哪里显示哪个部分内容，在哪里加背景色，哪里加背景图之类的，总之是页面结构的设置（和上面css部分字体样式设置有本质区别）。
还有一个主要的部分就是在代码里用到的5D的功能标签，比如{Calendar}代表日历{CommentContent}代表评论内容等等。。。这些功能统一由5D设置的程序决定，我们不用头疼到底怎么实现回复功能，只要把这样的标签插入就可以了。
这就是三个我认为新手应该在复杂的代码中应该弄明白的三个重要部分，当然，修改blog会遇到很多问题，这就不是我在这里想要讨论的问题，那最好去看Dreamweaver基础教程。
---------------------------------------------------------------------------
三。css部分字体都是如何设置的？
一般来说一个字体分为普通状态，链接状态，鼠标移到链接状态，鼠标点击链接状态，已访问状态（是这几个吧-__-）但是设置这么详细感觉没什么用。。毕竟代码也会占读取的速度。。。一把来说。我们用到的就是普通状态什么样子，链接什么样子，鼠标移到链接是什么状态，这三个就足够了。。
body,td,th,p,div,input,select,textarea{
font-family: "HandelGotD","Tahoma", "Arial","Verdana";
font-size:12px;
color: #707578;
}
a {
color: #BB9BE1;
text-decoration: none;
}
a:hover {
color:#A3C93E;
cursor: crosshair;
}
这段是我blog最上面的设置，也就是默认的字体设置，红色部分就是普通状态（就是{}）蓝色状态为链接状态（就是a {}，）绿色为点击链接的状态（就是a:hover {}）
这段代码的中文的表达意思就是：
默认普通状态{字体，字号，字体颜色}
默认链接状态{字体颜色，无下划线}
默认鼠标移过状态{字体颜色，鼠标状态}
{}里的内容还可以多设置，还可以添加背景色啊。。虚线啊什么的。。反正添加到相应的状态下就会在那个状态显示出来
一组字体基本就是这么定义。。当然，我们的blog一般不光用一组样式，比如我的blog上面的导航栏链接状态为灰色粗体，鼠标移过为紫色粗体。我的日志标题又是另一组字体状态，链接为紫色粗体，鼠标移过为绿色粗体。
想要实现这样我们就需要定义几组样式
默认的定义如果是这样的：
{}
a{} （a就有了链接的意思）
a:hover{} （hover就有了鼠标移过的激活意思）
自定义另一组字体就可以是：
.1{}
.1 a{}
.1 a:hover{}
这里就是另一个字体样式组，它的名字是1。。我们可以随便起任何名字，只要套在三个状态之前就行
---------------------------------------------------------------------------
四。定义了这些字体样式组如何在页面里调用呢？
css最上面的{} a{} a:hover{}一组定义是默认的，不需要调用，只要没有特别定义的字体都会遵循默认的样式
假如我的css部分定义了三组字体
{}
a{}
a:hover{}
.menu{}
.menu a{}
.menu :hover{}
.top {}
.top a{}
.top a:hover{}
menu用于导航栏，top用于日志的标题
在下面的整体页面定义里<DIV class=menu>导航栏</DIV>，这个就实现了把导航栏定义成了menu组的字体样式，其中<DIV>只算是一种格式，也可以是别的<P class=menu>导航栏</P>也可以的，主要是里面要加上class=menu
同理。。日志标题那里是这样定义的<SPAN class=top><A href="{LogUrl}">{LogTitle} </A></SPAN>
这里面SPAN和DIV或者P什么的只是那里的格式，主要是里面要加上样式class=top。
<A href="{LogUrl}">代表链接到哪里，{LogUrl}就是一个5D的标签，实现的是链接到这片日志
{LogTitle}也是标签，代表了这时这片日志的题目。
3和4部分罗嗦了这么多主要是让大家对分组的字体设置有一些概念。。我一开始就糊里糊涂的。完全不知道怎么那么多字体设置。。弄的blog经常冲突。。后来才明白原来是几组字体样式实现不同地方的不同显示。
---------------------------------------------------------------------------
五。（理论需结合实际）进入字体样式的具体设置
我这里主要讨论鼠标移过链接常用到的一些设置，也就是要放到： .某组 a:hover{}里面的内容
1.鼠标移到，链接变色（最基本拉，因为是变色，所以把a{}也拿出来对比，主要要看的是a:hover里的变化）
A {color: #51bfe0} 链接颜色为#51bfe0
A:hover { color: #000000 } 鼠标移过去为#000000
2.鼠标移到，链接加粗（bold就是粗体）
A:hover {font-weight: bold }
3.鼠标移到，链接出现下划线
A:hover {text-decoration: underline;}
4..鼠标移到，链接文字下面有背景色
A:hover {background-color: #CCFFFF}
（这里多说一句）加背景色的同时字体颜色也可一变，比如链接是黑色，鼠标移过是黑底白字，这样设置如下
A {color: #000000}
A:hover {background-color: #000000;color: #FFFFFF;}
5.鼠标移到链接，链接文字出现（上、下、左、右虚线、虚点）
A:hover {border-bottom:1px dashed #51bfe0 }
1px：虚线的粗细
dashed：线条的样式。dashed是“虚线”、dotted是“点线”、soild是“实线”
#51bfe0：线的颜色的代码。
border-bottom 那里代表会在文字的下方出现虚线，还可以是border-top（上面出线）、border-right（右面出线） 或 border-left（左面出线），若想文字的四边都出现虚线，可直接用border，border:1px dashed #51bfe0（这样就使鼠标移过有一个虚线或者点的框）
6.鼠标移到链接，链接雾化
A:hover {FILTER: blur (add="0",direction="90",strength="5"); COLOR:#ffffff; HEIGHT: 0px;}
其中add="0",direction="90",strength="5"为雾化的一些值，强度阿。大小阿之类的，可以改改看
7.鼠标移到链接，鼠标变化（这个问题问得也比较多）
A:hover { cursor:crosshair }
其中crosshair代表的就是鼠标里的十字精度，也就是我这里用的，也可以改成别的
cursor:text就是出现打字时那个鼠标
cursor:wait就是忙时出现的那个鼠标
这种方法实现的是调用的浏览者自己的鼠标，如果他把十字精度定义成了一朵花，那移过链接就是一朵花而不是十字
还有一种是让浏览者使用你定义的鼠标（好像我原来页面那样）
A:hover { cursor:url("http://www.5Dblog.com/new/1usachan.cur") }
这个地址就是你把鼠标上传到某个地方的绝对地址，这样的话鼠标移过链接就会显示这个你上传的鼠标，无论浏览者自己用什么样的鼠标
注意！以上的代码我只是提取了这个功能的代码，并不是某个状态完全代码，就比如鼠标这个
A:hover { cursor:crosshair }这个只是在激活状态定义了鼠标，我们还需要定义别的，比如：
A:hover { cursor:crosshair;
color: #000000;
border-bottom:1px dashed #51bfe0;
}
这样就是鼠标会变，颜色也变成了黑色，下面还有下虚线。也可以加上上面举的其它功能，功能之间用分号（;）分隔
对了，还有人问到的页面的默认字体，就是在一开始整体字体设置的普通状态里的font-family: "HandelGotD","Tahoma", "Arial","Verdana";
这样设置就是默认HandelGotD，如果浏览者没有这个字体，就会默认第二个"Tahoma字体。。。依此类推。。
呼。。。本来没想说这么多。。。好像我太罗嗦了。。。手酸ing~~>o<~~~。。。希望没有误人子弟。。哈。。。
| |
+------------------------------------------------------------------------------------------------------+ |
我的日历
最新评论 
友情链接 
访问计数 
收藏本站 
