CSS笔记
CSS入门教程――样式表的基本语法(一)
--------------------------------------
加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标
--------------------------------------
加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标
签<!-- -->则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：选择器 {
属性: 属性值; }
例如：h1 {font-size: 12px;}
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
<h3 style="display:none">是大傻瓜！傻瓜</h3>
h2,h4 {font-size: 12px; display:inline;}
<h3 style="display:none">是大傻瓜！傻瓜</h3>
语句“h2,h4 {font-size: 12px; display:inline;} ”同时为h2和,h4两个标签定义了两个样式。定义
多个样式，样式之间用分号“;”隔开。
注意1：在<h3 style="display:none">中，我们没有看到选择器，这是因为插入CSS的位置不同，它将
直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效
率。
CSS注释 : “/*”开始，以“*/”结束，
而注释标签<!-- -->则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
class和id的用法:
首先我们要在<head>部分定义class(类)或id。
class的定义方法： 指定标签.类名 {样式}
id的定义方法：指定标签#id名 {样式}
然后我们在想要应用类的标签上加上class(类)或者id属性：
class的应用方法：<指定标签 class="类名">
id的应用方法：<指定标签 id="id名">
不局限于一个标签。只需要将定义部分的h1.xinwen改为.xinwen。
class(类)与id的区别:
class和id看起来除了一个.和#的区别之外，id就类似元素的省份证号码，它必须是唯一的，而class则
class和id看起来除了一个.和#的区别之外，id就类似元素的省份证号码，它必须是唯一的，而class则
是一类具有共同属性的元素的合称，是一类。
--------------------------------------
--------------------------------------
CSS入门教程――样式表加入网页方式
--------------------------------------
内部样式表:
<head>
<style type="text/css">
body {background-color: blue;}
</style>
</head>
行内样式表(内嵌样式表):
<标签 style="符合CSS语法结构的CSS语句">
例如：<p style="text-indent:24px;">段落内容</p>
例如：<p style="text-indent:24px;">段落内容</p>
外部样式表:
使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，
你需要在网页的<head>部分插入以下内容：
<head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
</head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
</head>
层叠的意义:
那么最终网页内p标签的样式将为： p { text-align: left;text-indent: 24px;}。
几种样式表的优先级:
1.行内样式表(内嵌样式表)
2.内部样式表
3.外部样式表
4.补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。
5.其他高级规则：CSS中的important!是比较实用的技巧，这里就不多说了。将在后续的CSS技巧中讨论
2.内部样式表
3.外部样式表
4.补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。
5.其他高级规则：CSS中的important!是比较实用的技巧，这里就不多说了。将在后续的CSS技巧中讨论
。
--------------------------------------
文字的属性:
1.定义字体(front-family)
例如: p.song { font-family: "宋体"; }
请注意中文的字体要使用引号，而英文字体则不需要。而且在实际应用中你可能遇到这样的问题：网站
文字的属性:
1.定义字体(front-family)
例如: p.song { font-family: "宋体"; }
请注意中文的字体要使用引号，而英文字体则不需要。而且在实际应用中你可能遇到这样的问题：网站
浏览者的电脑并没有你设置的字体。为了避免这种情况我们可以定义备用字体，方法如下：
p { font-family: "黑体", "宋体", "新宋体"; }
定义文字大小(font-size):
例如: p.ita{font-style: italic;}
<p class="ita">我是斜体</p>
定义文字粗细(font-weigh):
例如: p.b<font-weight: bold; >
<p class="b">我是粗体</p>
例如: p.b<font-weight: bold; >
<p class="b">我是粗体</p>
首行缩进(text-indent):
{ text-indent: 24px; }
加入上面CSS语句的页面，所有的段落首行都将自动缩进24个像素。
{ text-indent: 24px; }
加入上面CSS语句的页面，所有的段落首行都将自动缩进24个像素。
文本颜色(color):
例如: p.lv{color:green;}
p.hong{color: red;}
<p class="lv">我是绿色</p>
<p class="hong">我是红色</p>
例如: p.lv{color:green;}
p.hong{color: red;}
<p class="lv">我是绿色</p>
<p class="hong">我是红色</p>
文本对齐属性(text-align):
p.zhong{ text-align: center;}
p.zuo{text-align: left;}
p.you{text-align: right;}
p.zhong{ text-align: center;}
p.zuo{text-align: left;}
p.you{text-align: right;}
<p class="zhong">居中</p>
<p> clss="zuo">左对齐</p>
<p> class="you">右对齐</p>
<p> clss="zuo">左对齐</p>
<p> class="you">右对齐</p>
文本修饰(text-decoration):
p.shang{text-decoration: oveline;}
p.xia{text-decoration: underline;}
p.zhong{text-decoration: line_through;}
a.none{text-decoration: none;}
<p class="shang">上划线</p>
<p class="xia">下划线</p>
<p class="zhong">中划线</p>
<p > <a href=" [url]http://www.mnnbaa.com/[/url]" class="none">
<p class="xia">下划线</p>
<p class="zhong">中划线</p>
<p > <a href=" [url]http://www.mnnbaa.com/[/url]" class="none">
1.背景颜色属性(background-color):
<style type="text/css">
body{background-color: red;}</style>
<style type="text/css">
body{background-color: red;}</style>
2.背景图片(background-image):
<style type="text/css">
body {background-image:url( [url]http://www.snzou.com/snzou/sn.gif[/url]);}</style>
<style type="text/css">
body {background-image:url( [url]http://www.snzou.com/snzou/sn.gif[/url]);}</style>
3.背景图片的重复设置(background-repeat)
不重复；
<style type="text/css">
body {background-image=url( [url]http://www.snzou.com/snzou/sn.gif[/url]);
background-repeat : no-repeat; }
只在水平方向重复；
<style type="text/css">
body {background-image=url( [url]http://www.snzou.com/snzou/sn.gif[/url]);
background-repeat: repeat-x; }
</style>
</style>
<style type="text/css">
body {background-image=url( [url]http://www.snzou.com/snzou/sn.gif[/url]);
background-repeat: repeat-x; }
</style>
</style>
只在垂直方向重复:
<style type="text/css">
body {backgroud-image:url( [url]http://www.snzou.com/snzou/sn.gif[/url])
background-repeat: repeat-y;} </style>
4.背景图片位置(background-position):
<style type="text/css">
body {backgroud-image:url( [url]http://www.snzou.com/snzou/sn.gif[/url])
background-position: center;
background-repeat: no-repeat;} </style>
5.将背景图片固定在页面的某个位置(background-attachment)
<style type="text/css">
body {backgroud-image:url( [url]http://www.snzou.com/snzou/sn.gif[/url])
background-attachment:fixed;
background-repeat: no-repeat;} </style>
--------------------------------------
列表
--------------------------------------
1.无序列表项目样式属性(list-style-type)
.w1 {list-style-type: circle;}
.w2 {list-style-type: square;}
.w3 {list-style-type: disc}
<ul class="w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
2.有序列表项目样式属性(同上)
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
3.用图片做列表项目符号(list-style-image)
.xing { list-style-image:url(../../images/list.gif);}
<ul class="xing" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
--------------------------------------
div和span是什么意思?
相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，
你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并
没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，
一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)
，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会
。
<style type="text/css">
<!--
.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;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
</body>
</html>
<style type="text/css">
<!--
.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;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
</body>
</html>
在上面的例子中，我们首先在页面内放了一个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的用法是非常灵活的。
--------------------------------------
盒子(box) :
CSS盒子又称为CSS盒模式，是CSS非常重要的一部分。尤其在网页的布局中更是必不可少的。
首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：
内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充
、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；
而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子
摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。
CSS边框(border);
border: 1px solid #000000;
border: 1px solid #000000;
在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，其实它等效与下面的
CSS语句：
border-style:solid;
border-color:#000000;
border-width:1px;
border-style:solid;
border-color:#000000;
border-width:1px;
CSS填充属性(padding):
padding: 5px;
看看修改之后的页面，是不是boxhead div中的内容距离边框有了一段距离？与边框属性(border)一样
，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。
CSS边界属性(marging):
这就是边界属性的作用。当然了，边界属性与其他两个构成盒子的属性一样都可以单独定义某一个方向
。
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
定位:
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
<style type="text/css">
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
定位:
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
<style type="text/css">
.dingwei{ position:relative;
left:50px;}
left:50px;}
</style>
<p>我是一段正常的文本</p>
<p class="dingwei">我本来应该在它的正下方，可是relative相对定位让我在正常位置的基础上向右
移动了50个像素。</p>
</body>
</html>
</body>
</html>
2.绝对定位(absolute)
绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
<p class="dingwei1">CSS</p>
<p class="dingwei2">绝对定位</p>
如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。
(绝对定位为其实也是相对定位)
“什么？你不是在搞笑吧？”
没错，绝对定位会按照我们给定的坐标x，y来准确地定位你一个元素。但是问题在于，坐标系的原点在
哪里呢？答案就是父元素。
上例中，class为"dingwei2"的元素设置为绝对定位，它的父元素为body，所以它其实是相对body位置
来定位的的
--------------------------------------
链接(a):
--------------------------------------
<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分别对
链接(a):
--------------------------------------
<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.只改变局部的链接样式。
2.只改变局部的链接样式。
就以菜鸟吧本身为例子吧。您也许已经注意到了，在菜鸟吧页面的导航部分(页面上方)的链接和教程部
分的链接具有不同的样式。事实上是我们只为导航部分的链接定义了样式，而教程主体部分的链接则是
正常的链接样式，不受定义影响。如何实现这种对局部链接的样式定义呢？其实这是很简单的。我们只
要在链接样式的定义前面加上相应class或者id即可。例如本页面导航部分的id是navbar，那么定义的
语句就应该是：
<a id="nvbar" href=" [url]http://www.snzou.com/[/url]">神州网</a>
如果你一直尝试着跟着本节教程，自己书写代码，那么预览结果一定会令你失望的，因为它的样式根本
就没有改变。而如果将链接的代码改为：
<div id="nvbar"><a href="
[url]www.snzou.com[/url] /">神州网</a></div>
这次CSS正常工作了。也就是说我们必须有一个id为“nvbar”的div或者是p之类的标签，然后包含在它
里面的链接标签a的样式才会受到影响。
补充：本节的链接内容涉及在CSS官方，以及w3schools.com和其它的一些权威教程中被叫做pseudo-
classes的概念。国内的高手们似乎习惯译做伪类。本教程主要是CSS入门，以实践中常用的CSS为主，
并不会深入研究“伪类”这个术语的具体含义。如果你对术语的研究比较感兴趣可以查看pseudo-
classes的详细信息。
--------------------------------------
--------------------------------------