1. 如何将样式表加入您的网页
1）外部样式表
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>title of article</title>
<link rel=stylesheet href="http://www.dhtmlet.com/rainer.css" type="text/css">
</head>
2）内部样式表
将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。
示例如下：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#0000FF;
text-decoration:underline;
font-weight:bold;
font-size:18px;
}
-->
</style>
</head>
<body>
<p> 123</p>
</body>
</html>
3）行间样式表
行间样式表即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
行间样式表优先级最高，其次是内部样式表，再次是外部样式表
2.CSS中分为2种选择器
id选择器和类选择
1）id选择器<P id=“fontcolor”></p> 此时对应的CSS样式表中写为#fontcolor{color:red}
2）类选择器<P class=“fontcolor”></p> 此时对应的CSS样式表中写为.fontcolor{color:red}
Id优先级高于类
3.常用CSS样式表缩写语法总结
1）颜色(color)
16进制的色彩值，如果每两位的值相同，可以缩写一半
例如：#000000可以缩写为#000; #336699可以缩写为#369;red
2）盒尺寸(padding、margin)
示意图：
上下左右都相等: margin: 5px(上下左右); 顺时针 <==> margin: 5px 5px 5px 5px;
上下相等, 左右相等: margin: 5px(上下) 15px(左右); <==> margin: 5px 15px 5px 15px;
上下不等，左右相等： margin: 5px(上) 10px(左右) 20px(下); <==> margin: 5px 10px 20px 10px
4.边框(border)
border-width:1px;
border-style:solid;
border-color:#000;
缩写为 ==> border:1px solid #000;
border:none 去掉边框
5.背景(Backgrounds)
background-color: #f00; （transparent : 背景色透明）
background-image: url(background.gif);
background-repeat: no-repeat;
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
缩写为 ==> background: #f00 url(background.gif) no-repeat
6.字体(fonts)
font-style: italic; 斜体
font-weight: bold; 加粗 一般标题加粗
font-size: 12px; 字体大小，一般用12号
line-height: 12px; 行距
font-family: Arial, 宋体; 字体
缩写为 ==> font: italic bold 12px Arial, 宋体;
7. 网站灰化CSS代码
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
8. 文字与图片
1）当文字与图片在一行，需要将文字与图片底对齐，需要这样写：
<li>
记住密码<img src="" align="bottom" style="margin-bottom:-4px"/>
</li>
2）当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：
<li>
记住密码<img src="static/img/xyx.jpg" align="middle"/>
</li>
9.绝对定位和相对定位
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
z-index如果为正数，则离用户更近，为负数则表示离用户更远。
10.使一个层垂直居中浏览器中
解决办法：使用百分比绝对定位，与外补丁负值的方法。
position:absolute; 绝对定位
top:50%; 层居页面顶部百分比
left:50%; 层居页面左边百分比
margin:-100px auto auto -100px; 上右下左
width:200px; 层宽
height:200px; 层高
11.链接
a:link{
color:blue；
text-decoration:none} 未访问的链接
a:visited{} 已访问的链接
a:hover{} 鼠标悬停到链接上
a:active{} 鼠标点击链接时
注意visited与hover的顺序一定不能倒换
12. 滚动条
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
overflow属性：
auto : 在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
overflow-x 对横向滚动条有效
overflow-y 对众向滚动条有效
13.多图合并，图片定位
将多张小图通过PS或其它工具合到一张整图上，存为allbgs.png
第一张图位置为0，0
Width=7
则第二张图位置为-7,0
测量第二张图width=13
则第三张图位置为-20,0
继续测量第三张图宽度…
以第二张图为例样式代码为
style="background-image:url(images/tools/allbgs.png);
background-position:-7px 0px;width:13px;
background-repeat: no-repeat; (以防止高度超过被平铺) "
14. 常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
1370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
