CSS第二讲 CSS属性

1.文本属性

文字font:

font-size:字体大小

font-family:字体

font-weight:字体粗细

font-style:字体样式(如:倾斜等)

color:字体颜色

line-height:居中

段落:

text-decoration:下划线

text-indent:设置文本缩进

text-align:设置对象内容对齐方式

2.边框属性

border-width:边框宽度

border-style:边框样式

border-color:边框颜色

nborder-collapse:表格边框合并为单边框

3.控制背景

background-image:设置背景图片

background-color:设置对象的背景颜色

background-position:设置对象的背景图片位置

background-repeat:设置对象的背景铺排填充

简写:

url() repeat center  center (图片路径,重复方式,水平位置,垂直位置)

4盒子模型

网页设计中每个元素都是长方形盒子

0_1309765507TI2U

margin:边界(俩相邻元素直接的距离)

border:表框

padding:当前对象和边界之间距离,内部距离

folat:浮动,当前队形浮动后,周围元素会环绕

clear:清除浮动

5.列表(list-style)

list-style-image:对象列表项标记的图形

list-style-position:对象如何根据文本排列

list-style-type:队形列表项实用的预设标记

6.定位(position)

position:static | relative | absolute | fixed

案例效果:

QQ截图20130723000410

代码如下:

<!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 type="text/css">      
*{ margin:0px; padding:0px;}      
ul,ol,li{ list-style:none;}      
body{ font-size:16px; font-family:"微软雅黑", "幼圆", "黑体", "宋体";}      
#banner{ margin:0 auto; ; height:56px; }      
#top{ ; height:45px; url(images /navbg_03.gif) no-repeat;}      
#top li{ ; height:45px; float:left; line-height:45px; text-align:center;}      
#top li a{ text-decoration:none;  color:#FFF; display:block; margin:0 auto; ; height:56px;}      
#top li a:hover{ url(images /mouseover_03.gif) no-repeat; color:#333;}

</style>

</head>

<body>    
<div id="banner">      
<ul id="top">      
<li><a href="#">首页</li>      
<li><a href="#">音频试听</li>      
<li><a href="#">产品说明</li>      
<li><a href="#">产品展示</li>      
<li><a href="#">产品直销</li>      
<li><a href="#">联系我们</li>      
</ul>      
</div>      
</body>      
</html>      

本文出自 “骑士-knight” 博客,谢绝转载!

你可能感兴趣的:(color,下划线)