CSS语法简介
内部样式表
内部样式表需要在网页的<head>部分定义，格式如下
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句，例如*/
body { background-color: blue; }
</style>
</head>
行内样式表(内嵌样式表)
行内样式表直接在标签内部定义，使用style属性，写法如下：
<标签 style="符合CSS语法结构的CSS语句">
外部样式表
使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：
<head>
<link rel="stylesheet" type="text/css"
href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>
加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签<!-- -->则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。eg:
<style type="text/css">
<!--
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
-->
</style>
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：
选择器 { 属性: 属性值; }
例如：h1 {font-size: 12px;}
属性和属性值之间用一个冒号“:”分开，以一个分号“;”结束，最后别忘记用一对大括号“{}”括起来。我们也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。
在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。
指定标签的class和id
首先我们要在<head>部分定义class(类)或id。
class的定义方法： 指定标签.类名 {样式}
id的定义方法：指定标签#id名 {样式}
然后我们在想要应用类的标签上加上class(类)或者id属性：
class的应用方法：<指定标签 class="类名">
id的应用方法：<指定标签 id="id名">
注意：类名和id名不可以用数字开头。
class(类)与id的区别
同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的省份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。
列表(list)
1.无序列表项目样式属性(list-style-type)
<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
2.有序列表项目样式属性(同上)
<style type="text/css">
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
</style>
3.用图片做列表项目符号(list-style-image)
<style type="text/css">
.xing { list-style-image:url(../../images/list.gif);}
</style>
……
div和span
div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。
盒子(box)
CSS的盒子(box)是由以下几个部分组成的：
内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。
CSS边框(border)
CSS填充属性(padding)
CSS边界属性(marging)
定位
1.相对定位(relative)
2.绝对定位(absolute)
链接(a)
对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。
1.改变整个页面的链接样式。
就是上面的这段CSS代码改变了页面的链接样式。其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。
2.只改变局部的链接样式。
层叠的意义
当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：p { text-align: left;}
而在内部样式表中又定义了如下样式：p {text-indent: 24px;}
那么最终网页内p标签的样式将为： p { text-align: left;text-indent: 24px;}。
三种样式表的优先级由高到低排列如下：
- 行内样式表(内嵌样式表)
- 内部样式表
- 外部样式表
- 补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。
- 其他高级规则：CSS中的important!是比较实用的技巧，这里就不多说了。将在后续的CSS技巧中讨论。
CSS文字属性(font属性)
1.定义字体(font-family)
2.定义文字大小(font-size)
3.定义文字样式(font-style)
4.定义文字粗细(font-weigh)
文本属性(text)
1.首行缩进(text-indent)
2.文本颜色(color)
3.文本对齐属性(text-align)
4.文本修饰(text-decoration)
背景属性(background)
1.背景颜色属性(background-color)
2.背景图片(background-image)
3.背景图片的重复设置(background-repeat)
不重复；
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:no-repeat; }
</style>
只在水平方向重复；
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-x;}
</style>
资料：http://www.cainiao8.com/web/css.html
只在垂直方向重复。
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-y;}
</style>
4.背景图片位置(background-position)
5.将背景图片固定在页面的某个位置(background-attachment)
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
