CSS总结
class的应用方法：<指定标签 class="类名">
id的应用方法：<指定标签 id="id名">
font:
定义字体(font-family)
font-family: "宋体";
font-family: "黑体";
font-family: Arial;
定义文字大小(font-size)
font-size: 12px;
font-size: 16px;
font-size: 20px;
定义文字样式(font-style)
font-style: italic;
italic为斜体
定义文字粗细(font-weigh)
font-weight: bold;
bold为粗体
text:
首行缩进(text-indent)
text-indent: 24px; <P>在这里面的的首行缩进</p>
文本颜色(color)
color: green;
color: red;
文本对齐属性(text-align)
text-align: center; 居中
text-align: left; 具右
text-align: right; 具左
文本修饰(text-decoration)
text-decoration: overline; 上划线
text-decoration: underline; 下划线
text-decoration: line-through; 中划线
text-decoration:none;
background:
背景颜色属性(background-color)
body { background-color:red ;}
背景图片(background-image)
background-image:url(http://www.cainiao8.com/images/logo.gif);
背景图片的重复设置(background-repeat)
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat;
背景图片的不重复设置(background-repeat)
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:no-repeat;
背景图片只在水平方向重复
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-x;
背景图片只在垂直方向重复
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-y;
背景图片位置(background-position)
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-position:center;
background-repeat:no-repeat;
将背景图片固定在页面的某个位置(background-attachment)
background-image:url(http://www.cainiao8.com/images/logo.gif);
background-attachment:fixed;
background-repeat:no-repeat
list:
无序列表项目样式属性(list-style-type)
list-style-type:circle;
list-style-type:square;
list-style-type:disc ;
<ui>
<li>
</li>
</ui>
有序列表项目样式属性(同上)
list-style-type:decimal ;
list-style-type:upper-roman ;
list-style-type:lower-roman ;
<ol>
<li>
</li>
</ol>
用图片做列表项目符号(list-style-image)
list-style-image:url(http://www.cnblogs.com/images/list.gif);
div和span
块级标签<div>
----------------------------------------------------------------------------
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
在上面的例子中，我们首先在页面内放了一个class为box的div，而在它的内部又放了一个class为boxhead的div。为了便与观察，我们为div添加了背景颜色。下面我们来看看对这两个div定义的前面教程中没有的属性：
对box的属性：width: 30%;表示这个box div占页面宽度的30%，而浮动属性float: left; 则表示box div浮动在页面的左侧。
对boxhead的属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。
行级标签<span>(行内标签)
将第一个“<p>我在div内</p>”修改为
<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>
以上只是关于div和span的简单介绍，而实际应用中div和span的用法是非常灵活的。
则不会换行
CSS盒子(CSS box)
CSS边框(border)
----------------------------------------------------------------------------------
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
border: 1px solid #000000;
}
查看修改后的页面，可以看到box的外边多了一条1像素宽的黑色实线边框。在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，其实它等效与下面的CSS语句：
border-style:solid;
border-color:#000000;
border-width:1px; 其实CSS中还有一些属性支持这样的写法，比如之前学过的font。但是这里暂不介绍。下面让我们来看看如何控制某一侧的边框属性。我们为boxhead div添加一个1像素的虚线下侧边框，查看效果。修改的代码如下：
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
}上面的例子只用到了两种边框，下面来看看其它几种样式的边框。
<p style="border:dotted"> </p>
<p style="border:double"></p>
<p style="border:groove"></p>
<p style="border:inset"></p>
<p style="border:outset"></p>
<p style="border:ridge"></p>
CSS填充属性(padding)
填充属性定义的是内容(content)与边框(border)的距离，下面我们来为boxhead div添加一个5像素的填充。
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
padding:5px;
} 看看修改之后的页面，是不是boxhead div中的内容距离边框有了一段距离？与边框属性(border)一样，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。
----------------------------------------------------------------------------------------------
定位
CSS的定位功能是很强大的，利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
……
<style type="text/css">.dingwei{ position:relative;
left:50px;}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本来应该在它的正下方，可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
</body>
</html>2.绝对定位(absolute)
绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>s
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
p{
font-size:24px;
font-weight:bold;
}
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
</style>
</head>
<body>
<p class="dingwei1">CSS</p>
<p class="dingwei2">绝对定位</p>
</body>
</html> 定位中使用的left属性表示元素距离左侧的距离，而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。
绝对定位为其实也是相对定位
“什么？你不是在搞笑吧？”
没错，绝对定位会按照我们给定的坐标x，y来准确地定位你一个元素。但是问题在于，坐标系的原点在哪里呢？答案就是父元素。
上例中，class为"dingwei2"的元素设置为绝对定位，它的父元素为body，所以它其实是相对body位置来定位的的。如果有如下代码：
<p> 段落正文
<strong>强调文字</strong>
<p>若给strong元素设置绝对定位，那么坐标原点将会是父元素p的位置。
尽管定位的语法非常简单，但是它的功能强大和实用是不容置疑的。合理地使用定位和盒子可以实现网页布局等等。
----------------------------------------------------------------------------------------------------------
链接(a)
对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。
1.改变整个页面的链接样式。
<style type="text/css">
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
color: #333333;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
background-color:#0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style> 就是上面的这段CSS代码改变了页面的链接样式。其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。
2.只改变局部的链接样式。
就以菜鸟吧本身为例子吧。您也许已经注意到了，在菜鸟吧页面的导航部分(页面上方)的链接和教程部分的链接具有不同的样式。事实上是我们只为导航部分的链接定义了样式，而教程主体部分的链接则是正常的链接样式，不受定义影响。如何实现这种对局部链接的样式定义呢？其实这是很简单的。我们只要在链接样式的定义前面加上相应class或者id即可。例如本页面导航部分的id是navbar，那么定义的语句就应该是：
#nvbar a:link {
color: #003366;
text-decoration: none;
}
#nvbar a:visited {
text-decoration: none;
color: #000000;
}
#nvbar a:hover {
color: #FFFFFF;
background-color:#FF0000;
}
#nvbar a:active {
text-decoration: none;
} 这样链接样式的定义就只对id为nvbar的内容起作用了。相应的，如果你希望这些链接的样式只对某个类起作用只要上面的#nvbar替换成该类即可。例如只对class为rightbox的内容起作用，那么就可以定义为：
.rightbox a:link {
color: #003366;
text-decoration: none;
} …… 好了，你已经知道CSS部分的代码怎么写了，但是别以这就完事了，你还需要看看我们在网页中是如何应用它们的。假设我们现在有一个页面，它使用了上面的CSS代码。页面中有一个链接，它的代码如下：
<a id="nvbar" href="http://cainiao8.com/">菜鸟吧</a>
如果你一直尝试着跟着本节教程，自己书写代码，那么预览结果一定会令你失望的，因为它的样式根本就没有改变。而如果将链接的代码改为：
<div id="nvbar"><a href="http://cainiao8.com/">菜鸟吧</a></div>
这次CSS正常工作了。也就是说我们必须有一个id为“nvbar”的div或者是p之类的标签，然后包含在它里面的链接标签a的样式才会受到影响。为了更好的理解这种方法，我们再来看一个例子。
补充：本节的链接内容涉及在CSS官方，以及w3schools.com和其它的一些权威教程中被叫做pseudo-classes的概念。国内的高手们似乎习惯译做伪类。本教程主要是CSS入门，以实践中常用的CSS为主，并不会深入研究“伪类”这个术语的具体含义。如果你对术语的研究比较感兴趣可以查看pseudo-classes的详细信息。
浙公网安备 33010602011771号