4月2日 星期三 DIV+CSS介绍及一些设计技巧
时间： 4月2日 星期三 14-16点
主题 ： DIV+CSS介绍及一些设计技巧
QQ群： 56487362
主讲人: 水夜云轻 新浪UC在线教育网站网页设计房间主讲教师,从事企业网站管理工作
本讲座征集演讲人，讲座整理后将发布在站长咨询信息里面， 如果您有这个意向，请跟贴或联系QQ：316290906
主讲内容： DIV+CSS介绍及一些设计技巧
_____
讲座规则：
1 在主讲人讲座的时候，因为qq群内人比较多，所以请勿插话。打断，询问 。
2 在讲座过程中，一般关闭qq群加人信息。所以讲座，请及时提前一点加群。
3 讲座的后一半时间是 讨论，交流时间。 请将问题，轮流提出。 同时 因为我们是草根站长群，主讲人并不能面面俱到，也希望更多站长，相互补充完善。
4 讲座完毕后一小时，我们解散qq群，为下次讲座留空。请及时备份你的资料。
我们每天举行一次 qq群讲座，
[url=http://bbs.admin5.com/forum-165-1.html]http://bbs.admin5.com/forum-165-1.html[/url]
诚征更多主讲人， 诚征更多主讲话题。 有准备做主讲人的联系qq：316290906 安排时间和主题。
__________________________________________________________________
基本语法规范
分析一个典型CSS的语句： p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
颜色值,定义字体.海军在 [DIV+CSS笔记(一)] 中详细讲述了.这里就不做笔记了.
群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样： li strong { font-style : italic; font-weight : normal；} 就是给li下面的子元素strong定义一个斜体不加粗的样式。
id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层 <div id="menubar"></div> 然后在样式表里这样定义： #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如： #menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
类别选择器
在CSS里用一个点开头表示类别选择器定义，例如： .14px {color : #f60 ;font-size:14px ;} 在页面中，用class="类别名"的方法调用： <span class="14px">14px大小的字体</span> 这个方法比较简单灵活，可以随时根据页面需要新建和删除。
类别选择器也同样支持派生
定义链接的样式
--------上面讲述到的这些 海军前一个笔记 DIV+css笔记(二)中讲述到了.这里当作给我一个复习.-----
MARGIN是指
层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。
注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
PADDING是指
层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
BORDER是指
层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
BACKGROUND是
定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
COLOR用于定义字体颜色
TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。
HEIGHT定义层的高度.和width类似.
CSS2盒模型
自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层 。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆.
希望对大家有办法.我学习到了一个利用CSS样式的黑帽技术
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
<!--
p {
LINE-HEIGHT: 0%; WIDTH:0%;
}
-->
</style>
</head>
<body>
<p><a href="[url=http://www.hao123.com]http://www.hao123.com[/url]" target="_parent">免费杀毒软件</a>
</p>
</body>
</html>
认真阅读我的笔记,你就会很快明白代码的意思,就是"湖南SEO" 这个文字,我们用 LINE-HEIGHT: 0%; WIDTH:0%; 控制了它,限制的高和宽都是零.是零的话当然不显示啦..
[[i] 本帖最后由 qiangren 于 2008-4-26 10:12 编辑 [/i]]