网页设计中最实用的CSS代码,

发布:半支烟 | 发布时间: 2009年7月17日

现在一般的网站建设用到的CSS基本用下面的css足够了：首先基本构架使用新的网页容器DIV，以前常用的表格Table、td等就不废话了。完整格式<div 定位、属性等等>内容</div>，其实这玩意就是以前的“层”，它在css里严格来说不是层，有的说法是“容器”，不过它比起表格Table和单元格td多了Z轴的概念，可以层叠覆盖产生立体空间效果，比如我就是用DIV覆盖了时空顶部的那条导航条，姑且还是叫层吧，不要想得太玄乎复杂了。

css的实现方式，这里只说不能引入外部css文件的情况，就是520750网站这种情况下：
1，直接举个例子<div style="这里就写css的属性">内容</div>
2，可以在每个页面页头</head>之前写入各种css的名称，属性，比如
#pd{这里就写css的属性} 或者
.pd2{这里就写css的属性}
然后在每个容器的属性位置用id="pd"或者class="pd2"引入前面设定好的css属性，这样的好处在于可以不断重复利用以前设定好的css属性。
注意：#pd{这里就写css的属性}这种方式用id="pd"方式引入，每个容器（div\table\td\p\a）都只能有一个唯一的id，所以不可能重复利用！

完整写法：
<STYLE 一些兼容浏览器的属性，不想兼容的不用写>
table{font-size: 12px} //*以后所有表格的基本属性，这里定义了所有表格没有特殊指定的情况下字体尺寸都是12个像素，pt就是磅也是常用的字体单位，9pt=12px。

BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;background-color: #ffffff;FONT-SIZE:12px} //*网页最原始的母体构架<Body>的一些基本属性。

a{color:#333333;text-decoration: none;font-size:12px} //*链接静态状态情况
a:hover{color:#1979e6;background-color:#f5f5f5;font-size:14px} //*链接鼠标碰到时候的情况

img{margin-right:1em;float:left} //*图片自动浮动在文本左边1em单位。

#pd{这里就写css的属性，像上面的那样，这行才开始你自己的定义，前面的几个使用最广泛整个页面经常用}
.pd2{这里就写css的属性}
</STYLE>

------------------------------------------------------------------------------
容器其定位属性就是Position，有四种取值 static relative absolute fixed
/static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定。
/relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。这个定位方式一般ie6最好不要用，它只适合一个DIV附属于一个表格的情况下，但是仍旧存在很多不确定的情况发生，
/absolute 绝对定位，最常用的直接指定top、left、right、bottom。有意思的是这个绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，可以是DIV也可以是个Table,td。定位好的意思就是其Position 是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
/fixed 才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie6还不支持，ie7开始全面支持。
------------------------------------------------------------------------------
容器DIV或者其他表格等内部填充边距:
Padding：
padding-left:10px;padding-top:3px;padding-right:3px;paading-bottom:3px;

如：<div style="定位属性;padding-left:10px;padding-top:3px;padding-right:3px;paading-bottom:3px">。。。。。。</div>

边距我不常用，不废话了:
margin：1em 2em 3em 4em,"em"指该东西的倍数，1em=100% 比如一个图片使用1em分隔，那么实际显示情况就是看到多了一个该图片的距离分隔。
------------------------------------------------------------------------------
表格等老构架方式在编辑工具如Dw里面可以直接调整就不废话了，构架出来以后就是如何填入文字了。

比如<div style="定位属性;一些效果属性;">

文字属性:
font-size:12px;
单词之间间距:
word-spacing:
单字间距:
letter-spacing:1px
文字对齐方式：
text-align:left right center justify
文字首行缩进方式：
text-indent:length值 26px
文本行高：
line-height:21px
文字特殊样式：
text-decoration:none
underline没有下划线 overline
line-through 中间划线
blink
------------------------------------------------------------------------------
带连接文字的属性:符号a:
a：link{color：green;text-decoration：none}
//*未访问时的状态，颜色为绿色(green)，文本装饰属性(text-decoration)值为没有(none)*//

a：visited{color：red;text-decoration：none}
//*访问过的状态，颜色为红色(red)，文本装饰属性值为没有*//

a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠标激活的状态，颜色为蓝色(blue)，文本装饰属性值为上划(overline)，字体大小为20pt*//
------------------------------------------------------------------------------
透明滤镜
filter: alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=0,finishy=1990)" id="d2">

opacity=100 开始透明度=100； finishopacity=0 结束透明度0；
style=1 透明渐变方式1，即线性渐变;
startx=0,starty=0,finishx=0,finishy=1990 开始x坐标，开始y坐标，结束x坐标，结束y坐标。

比如<div style="position:absolute; left:3%; top:100px; width:75%; z-index:1; filter: alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=0,finishy=1990)">内容</div>

------------------------------------------------------------------------------
如果要在一个网页中的连接有不同的颜色，你就要在连接
中使用到style这个关键字，例如：
<a name="top">top</a></p>

<P><A HREF="#top" style="background-color: rgb(255,255,255);
color: rgb(129,0,0)">Maroon</A>

<P><A HREF="#top" style="background-color: rgb(255,255,255);
color: rgb(255,165,0)">Orange</A>

Maroon (Maroon的RGB是#800000)

Orange (Orange的RGB是#FFA500)

你可以根据RGB-->Hex的提示自己做一个转换

标签: