CSS样式表

来源:转载

CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。

元素的大小:

 #div1{width:300px;height:1000px; }

width:宽度,单位可以使用百分比或者像素

height:高度,单位可以使用百分比或者像素

如果没有内容且不设置高度和宽度在页面是看不到。

背景:

#div1{width:300px;height:1000px;background-color:#0C0;background-image:url(preview.jpg);background-repeat:no-repeat;background-position:center;background-attachment:scroll;background-size:200px 250px;}

background-color:背景颜色

background-image:背景图片,在页面中背景图在背景颜色上边

background-repeat:背景图片的平铺方式

常用的有:

background-repeat:repeat;平铺,默认选项

:no-repeat;不平铺

:repeat-x;横向平铺

:repeat-y;纵向平铺

background-position:背景图的位置,图片默认出现在左上角

常用的有:

background-position:top;上

:bottom;下

:left;左

:right;右

:center;居中

background-position还可以使用空格和像素来达到靠右下角并且留有一定距离的效果

#div1{background-position:bottom 20px right 20px;}

background-attachment:背景图是否随着滚动条滚动

主要有:

background-attachment:fixed;不滚动

:scroll;滚动

background-size:背景图的大小,可以自己设置像素大小,也可以根据提示这只自动等

文字:

 #div1{font-family:微软雅黑;font-size:.5em;font-style:italic;font-weight:bold;text-decoration:line-through;color:#666;text-indent:-5em;}

font-size:字体大小,可以用像素表示,普通正文一般用14px,页脚一般用12px,也可以用百分比或者em表示,200%是默认字体的两倍,.5是默认字体的0.5倍

font-family:字体样式,原则上不能使用太过花哨特殊的字体,因为用户电脑上可能没有,特殊情况可以使用图片代替

color:文字颜色 

font-weight:bold;加粗 

font-style:italic;倾斜

text-decoration:underline;下划线

none;去掉下划线

line-through;删除线

text-indent:首行缩进,特殊情况可以使用负号

文字对齐方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{height:50px;background-color:#9CC;text-align:center;} #div2{height:50px;background-color:#666;text-align:right;vertical-align:center;line-height:50px;}</style></head><body> <div id="div1">这是第一个div中的文字</div> <div id="div2">这是第二个div中的文字</div></body></html>

text-align:水平对齐方式

center;居中

left;左

right;右 

vertical-align:垂直对齐方式,单独设置没有效果,需要和行高配合使用

middle;居中

top;上

bottom;下 

line-height:行高

边界与边框:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{height:100px;width:100px;border:1px #000033 solid;margin:10px 20px 30px 40px;padding:10px 20px 30px 40px;} #div2{height:30px;width:20px;border:1px #00FF00 solid;}</style></head><body> <div id="div1"><div id="div2"> </div> </div></body></html>

margin:外边距,用像素表示,顺序依次为上右下左,顺时针方向,也可以分别用margin-top/right/bottom/left来设置,如果只写一个表示四个方向的距离均为此值。

padding:内边距,和margin相同,都是用像素,上右下左,也可以分别设置,如果使用了padding,该元素会相应变大

border:边框,可以同时设置宽度,颜色,边框线,用空格隔开,也可以单独设置,border也可以单独设置上/下/左/右边框,边框的大小也是包含元素里面的

关于border,还有很多用法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{width:0px;height:0px;border-top:100px solid #000;border-right:100px solid #FFF;border-bottom:100px solid #FFF;border-left:100px solid #FFF;}</style></head><body> <div id="div1"> </div></body></html>

可以利用border的特性制作一些不规则的形状。

列表与方块:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #ol1{list-style:none;} #ol2{list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)}</style></head><body> <ol id="ol1"><li>第一项</li><li>第二袭</li><li>第三幕</li><li>第四部</li> </ol> <ol id="ol2"><li>第一项</li><li>第二袭</li><li>第三幕</li><li>第四部</li> </ol></body></html>

list-style:列表符号的样式

inside 符号在元素里面

outside  符号在元素外部

none 没有符号

list-style-image:列表前面加图片作为排序符号

格式与布局:

格式与布局比较复杂难以理解

position:

下面举例来说明:

absolute; 绝对定位(相对于浏览器边界)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{height:200px;width:200px;background-color:#006;position:absolute;top:20px;right:30px;} .d1{width:100px;height:500px;}</style></head><body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div></body></html>

拉动滚动条,位置随之改变。

fixed 固定位置:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{height:200px;width:200px;background-color:#006;position:fixed;top:20px;right:30px;} .d1{width:100px;height:500px;}</style></head><body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div></body></html>

拉动滚动条,位置不变。

relative 相对定位,相对于该元素本该出现的位置:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> #div1{background-color:#0F0;position:relative;top:20px;left:30px;}</style></head><body> 这是一段文字 <div>这是div中的文字</div> <div id="div1"> 这是相对定位div中的文字 </div></body></html>

在原本应该出现的位置偏移。

需注意的是,只要加了position,该元素就和其他元素不在同一层了,原本被挤下去下面的元素就会浮上来。

设置居中:margin:0px  auto;

流式布局:

做网页布局。可以让元素流动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> .div1{margin:10px;width:100px;float:right;background-color:#999;} #nr{height:300px;width:100%;background-color:#063;}</style></head><body> <div class="div1">首页</div> <div class="div1">产品介绍</div> <div class="div1">发展历史</div> <div class="div1">个人中心</div> <div class="div1">相关内容</div> <div class="div1">联系我们</div> <div style="clear:both"></div> <ul style="list-style:none;"><li class="div1">首页</li><li class="div1">首页</li><li class="div1">首页</li><li class="div1">首页</li><li class="div1">首页</li><li class="div1">首页</li> </ul> <div style="clear:both"></div> <div id="nr"></div></body></html>

float:left/ight; 向左/右流,会随着浏览器大小适应

截断流:<div style="clear:both"></div>

z-index:给元素设置一个层级,数字越大越靠上

其他:

HTML和css使用的注释不同,在HTML代码中使用<!--  -->,但是在css中该注释无效,应使用/*  */。

分享给朋友:
您可能感兴趣的文章:
随机阅读: