• css 高度(height)
• css 宽度(width) ·
• css 边框(border) ·
• css 背景(background) ·
• css 浮动(float) ·
• css 字体(font) ·
• css 加粗 ·
• css 下划线 ·
• css 注解 ·
• css padding ·
• css margin ·
• css 文本 ·
• css 颜色
• css 超链接 ·
• css 优化 ·
• css id ·
• css class ·
• css 列表 ·
• css 圆边 ·
• css 父级子级 ·
• css 指针 ·
• css 单位 ·
• css 定位
• css 图片 ·
用CSS控制超链接文字样式
本文将讲解通过css样式或通过css来控制超链接样式。这里主要讲文字类型的超链接，超链接的样式包括通过CSS来控制设置超链接有无下划线、超链接文字颜色等样式。
什么是超链接？超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
超链接的代码 <a href="http://www.okcom.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>
解析如下： href 后跟被链接地址目标网站地址这里是http://www.okcom.cn/
target _blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题 CSS可控制超链接样式-css链接样式如下
a:active是超级链接的初始状态
a:hover是把鼠标放上去时的状况
a:link 是鼠标点击时
a:visited是访问过后的情况
超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none; a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline; 2、通过链接内设置类控制超链接样式css方法 案例超链接代码<a href="http://www.okcom.cn/" class="yangshi">CSS</a> 对应CSS代码 a.yangshi{color:#333;text-decoration:none; } a.yangshi:hover {color:#CC3300;text-decoration:underline;} 通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.okcom.cn/">CSS</a></a> 对应CSS代码 .yangshi a{color:#333;text-decoration:none; } .yangshi a:hover {color:#CC3300;text-decoration:underline;} 这里值得注意的是a.yangshi与.yangshi a的样式css代码区别,这里就是常见的通过div css来对超链接样式设置案例及分析。 css li讲解 Css li是使用css来控制li的样式-css列表，如li列表的以点为开头，或图片开头的列表形式。 Li的基础知识 Li是html的基本元素标签。 <li> 标签是用于定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 在W3C标准下li不能单独使用，需要与<ol>或<ul>配合使用，使用范例： <ol> <li>div+css范例</li> <li>div+css范例之li</li> </ol> <ul> <li>div+css范例</li> <li>div+css范例之li</li> </ul> Css li实例,li，ol li，ul li的用法 经过实例演示知道了li的默认有序和无序的css样式，有序ol的样式是以阿拉伯数字1、2、3为递增列表，而无序的ul的CSS样式是以一个圆黑点的列表形式。 <li>兼容：所有的浏览器都支持兼容 Css li的样式引导 无论是有序还是无序的li列表，在div+css开发的时候都需要对li进行设置css样式。 一般对其设置代码如：设置li的list-style样式。
DIV+CSS中让布局居中 在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。 1、首先介绍使用css属性让整体布局的居中： 设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由<html></html>和<body></body>这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-aligh:center;具体css的居中代码为： body{text-aligh:center; } 但是即使这样也会出现问题，因为你没有设置布局有多宽“width ”，一旦你内容布局中在最外层css控制中，设置了float:属性，那布局将会向你设置的float:方向靠，解决方法，除了设置body的居中的css属性外，还需对布局对象设置居中 ，而且或定义宽度是多少，假如网页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这样“.weicheng{margin:0 auto; 700px;} ”即可而这个元素在IE下有用，经过试验在火狐等浏览器下只除了此父级（body）设置text-aligh:center;居中 是无法让布局居中，那我们还需要对该对象设置个“margin:0 auto ; ”这个是什么意思呢，意思是内容上下为0距离，而左右为“auto ”自动，这样就可以设置实现网页布局居中。完整实例为（可将代码拷贝新建html文件浏览观看效果）： 以下为引用的内容： <!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=gb2312" /> <title>www.okcom.cn的CSS div的布局居中实例</title>
<style type="text/css"> <!-- body{ text-align:center; } .waicheng {color: #0066CC; margin:5px auto; 700px; height:200px; border:1px solid #000000;} --> </style> </head> <body> <div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，我宽700px，高为200px,设置了与顶部内容距离为5PX</div> </body> </html> 2、介绍使用css属性让网页的背景居中： 这里居中就包括了左右居中与上下居中，居中代码如下： body{BACKGROUND: #FFF url(http://www.okcom.cn/img/css-logo.gif） no-repeat center;} //这段话意思就是让css-logo.gif这个图片设置背景不重复（no-repeat ），并将居中（center）这个居中是左右居中，而垂直不需要设置，自动会居中。 3、css让介绍文字、图片内容左右上下居中方法教程： 我们知道左右就中好办，直接用text-align:center; 即可让文字与图片内容居中，但是垂直呢，假如我们在高度为120px的高度下垂直居中，图片居中是vertical-align:middle;css属性，文字居中就要靠设置行高方法居中文字内容，这里我们设置为120px的高度这需要设置个line-height:120px;这样就通过css属性类样式来实现文字与图片的上下左右居中。 整个网站居中的代码如下：
以下为引用的内容：
<!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=gb2312" />
<title>www.okcom.cn的CSS div的完整居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; margin:0 auto; background: url(http://www.okcom.cn/img/css-logo.gif) no-repeat center;}
.waicheng {color: #0066CC; margin:5px auto; 700px; height:120px; line-height:120px; border:1px solid #000000; }
.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="waicheng">
我是css中的居中的完整居中实例;我的布局外层有一个边为1px
<img src="http://www.okcom.cn/img/css-logo.gif" alt="图片内容居中" />
</div>
<dd>科技控www.8080it.com</dd>
</body>
</html>
css padding用法详解、 padding_css padding用法详解
padding 属性是css用于在一个声明中设置所有 padding 属性的简写属性。
Padding属性包含了padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距右内边距） ；padding bottom ：底补距离（设置距低内边距）。 padding left用法：padding-left:10px; 这个意思距离左边补距10像素，可跟百分比如（padding-left:10%; 距离左边补10%的距离）； padding right用法：padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）； padding top用法：padding-top:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）； padding bottom用法：padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；
注意padding中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。
如果是左右上下都需要设置padding的值时可以简写来实现，以优化css 。
如简写方式有： padding:10px; 意思就是上下左右补丁距离就是10px（10像素）等于padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; 一样效果简写； padding:5px 10px; 意思上下补丁距离为5px，左右的补丁距离为10px，等于padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; 一样效果简写；padding:5px 6px 7px; 意思上补丁距离5px，下补丁距离为7PX，左右补丁距离为6px，等于padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一样效果简写；padding:5px 6px 7px 8px; 意思上补丁为5px，右补丁距离为6px ，下补丁距离为7px，左补丁距离8px，等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一样效果简写； 其中padding:5px 6px 7px 8px; 的转法为顺时针即图：上 右 下 左
css margin属性与用法教程、margin _ css margin属性与用法教程
margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性，margin是css控制块级元素之间的距离, 它们之间是透明不可见的。margin属性包含了margin left ：距左元素块距离（设置距左内边距） ；margin top：距头顶(上)元素块距离（设置距顶部元素块距离）；margin right ：距右元素块距离（设 置距右元素块距） ；margin bottom ：底元素块距离（设置距低（下）元素块距）。margin left用法：margin-left:10px; 这个意思距离左元素块距10像素，可跟百分比如（margin-left:10%; 距离左元素块10%的距离）；margin right用法：margin-right:10px; 这个意思距离右边元素块距10像素，可跟百分比如（margin-right:10%; 距离右边元素块10%的距离）；margin top用法：margin-top:10px; 这个意思距离顶边元素块距10像素，可跟百分比如（margin-top:10%; 距离顶边元素块10%的距离）；margin bottom用法：margin-bottom:10px; 这个意思距离低边元素块距10像素，可跟百分比如（margin-bottom:10%; 距离底边元素块10%的距离）；
注意margin中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。如果是左右上下都需要设置margin的值时可以简写来实现，以优化css 。 如简写方式有： margin:10px; 意思就是上下左右元素块距离就是10px（10像素）等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 10px; 意思上下元素块距离为5px，左右的元素块距离为10px，等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 6px 7px; 意思上元素块距离5px，下元素块距离为7PX，左右元素块距离为6px，等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一样效果简写；margin:5px 6px 7px 8px; 意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，等于等于margin-top:5px; margin-right:6px; margin-bottom:7px;margin-right:8px; 一样效果简写；其中margin:5px 6px 7px 8px; 的转法为顺时针即图：上 右 下 左