百度首页 | 百度空间
 
查看文章
 
CSS常用代码,很有用哦
2008年03月21日 星期五 16:51

学习软件工程是一件需要刻苦与毅力的事情,相信在北大青鸟徐东校区学习的同学们都有着强烈的渴望与自信去改变自己前途和命运,所以,这点困难自然难不倒他们啦!

电脑前坐久了,总会有些疲倦,写写BLOG什么的,算是一种很好的放松方式吧!做一个赏心悦目的博客模板,那一定更有成就感了。

这里向大家推荐一下CSS!从前我们写网页一般都使用HTML标签来实现,代码非常烦琐。而CSS就是为了简化这样的工作诞生的,当然其功能决非这么简单。

CSS是通过对页面结构的风格控制的思想,控制整个页面的风格的。式样单放在页面中,通过浏览器的解释执行,是完全的文本,任何懂得HTML的人都可以掌握,非常的容易。甚至对一些非常老的浏览器,也不会产生页面混乱的现象。

这么好的东东,大家打起精神来啊!认真的学一下,将来可能派上大用场哦!

下面就是一些常用的代码啦,我总结了一下,方便大家使用。

什么是Cascading Style Sheets(层叠样式表)

* CSSCascading Style Sheets(层叠样式表)的简称.

* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

* 在标准网页设计中CSS负责网页内容(XHTML)的表现.

* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

* CSS是由W3CCSS工作组产生和维护的.

网页设计中常用的CSS属性

文字或元素的颜色 color: #000000;
背景颜色   background-color
背景图像   background-image
字体 font-family
文字大小   font-size
列表样式   list
鼠标样式   cursor
边框样式   border
内补白 padding
外边距 margin

边框宽度 : border-width : 5px;
上边宽度 : border-top-width : 5px;
左边宽度 : border-left-width : 5px;
右边宽度 : border-right-width : 5px;
底边宽度 : border-bottom-width : 5px;
边框颜色 : border-color : #000000;
上边颜色 : border-top-color : #000000;
边框样式 : border-style : double; 可替换 dashed; dotted; none;  
上边样式 : border-top-style : solid;  
左边样式 : border-left-style : inset;
右边样式 : border-right-style : ridge;    
底边样式 : border-bottom-style : solid;  
整体宽度 : width : 5px;  
整体高度 : height : 5px;  
溢出选项 : overflow : visible;  可替换 hidden; scroll; auto;
内侧边距 : padding : 5px;  
上内边距 : padding-top : 5px;  
外侧边距 : margin : 5px;    
上外边距 : margin-top : 5px;    
文字字体 : font-family : fantasy;    
文字大小 : font-size : 12pt;  
文字粗细 : font-weight : bold;  
文字样式 : font-style : italic;  
文字变量 : line-height : 110%;      
清除属性 : clear : left;  可替换 right;   both;   none;
浮动属性 : float : left;  可替换 right;   none;
水平排列 : text-align : left; 可替换   right;   center;   justify;
文本修饰 : text-decoration : underline;  可替换   overline;   underline overline;   line-through;   blink;
文本缩进 : text-indent : 5em;    
文字间距 : letter-spacing : 5px;  
字母间距 : word-spacing : 5px;  
文本转换 : text-transform : capitalize;  可替换   lowercase;   uppercase;  
垂直排列 : vertical-align : baseline;    可替换   top; middle; bottom; text-top; text-bottom; super; sub; 3em; 30%;  
背景图片 : background-image : url(tianyi.gif);    
背景拉伸 : background-repeat : repeat;   可替换   repeat-x; repeat-y; no-repeat;  
背景定位 : background-position : left;   可替换   right; top; left top; right bottom; 30% 50%;
附加属性 : background-attachment : fixed; 可替换   scroll;  
显示属性 : display : none; 可替换   block; inline; run-in; compact; list-item; marker;  
是否可见 : visibility : visible; 可替换   hidden;    
资源定位 : position : static;  可替换   relative; absolute; fixed;  
距离顶部 : top : 5px;
距离左边 : left : 5px;  
距离右边 : right : 5px;  
距离底边 : bottom : 5px;  
优先等级 : z-index : 5;
鼠标指针 : cursor : crosshair; 可替换   default; pointer; move; text; wait; help; n-resize; s-resize; w-resize; e-resize; ne-resize; nw-resize; se-resize; sw-resize;

网页设计中常用的代码

图象和文字的对齐
     <img src="URL" align="#"> #=top
, middle, bottom下。

图象在页面中的对齐/布局

<img src=URL align="#"> #=left左,right右。这里表示文字在图片下面。<img src=URL align=left vspace=10 hspace=20>vspacehspace表示距离。
表格的标题
     <caption align=#>
内容 </caption> #=left, center, right右。
     <aption valign=#>
内容</caption> #=top, bottom,表示标题在表格下面。
背景音乐-
     <bgsound src="168.mid" loop="5"> #=WAV
文件的 URL#=填数字,如果填-1,表示一直播放。
会移动的文字
方向:direction=#   #=left, right右。<marquee direction=left>右向左移</marquee><marquee direction=right>左向右移</marquee>
方式: bihavior=#   #=scroll, slide, alternate<marquee behavior=scroll>一圈一圈绕着走</marquee><marquee behavior=slide>只走一次就歇了</marquee><marquee behavior=alternate>我来回走耶</marquee>
带颜色背景,鼠标经过文字停住:<marquee onmouseover="stop()" onmouseout="start()" bgcolor=aaaaee>啦啦啦,我会移动耶!</marquee>
空白:hspace=# vspace=#   #=数字。

示范:<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦,我会移动耶!</marquee>大家好!

网页简单背景音乐播放器
<BGSOUND SRC="" LOOP="-1" ID="BgSound">
         <select name="select" onChange="BgSound.src=this.value">
             <option value="" selected>↓mid
音乐*^_^*与你欣赏↓</option>
             <option value="music/mid100/023.mid">
爱拼才会赢</option>
             <option>*^_^*--
停止播放--*^_^*</option>
</select>

<embed name=wma src="music/mp3/ty.wma" height="1" hidden=true type=audio/mpeg loop="true" autostart="false">

<A href="javascript:document.wma.play()" target=_self title="天意点击播放"><FONT style="BACKGROUND-COLOR: #CD0351" color=#ffffff> PLAY </font></A> <A href="javascript:document.wma.stop()" target=_self title="关闭音乐"><font style="BACKGROUND-COLOR: #66FF66" color=#ffffff> STOP </font></A>


类别:技术前沿 | 添加到搜藏 | 浏览() | 评论 (1)
 
最近读者:
 
网友评论:
3
2008年03月21日 星期五 23:08
很好很强大
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码:
 

     

©2008 Baidu