CSS入门教程——样式表的基本语法(一)
--------------------------------------
加在head部分的分别被浏览器识别为CSS的开始和结束。而注释标
--------------------------------------
加在head部分的分别被浏览器识别为CSS的开始和结束。而注释标
签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：选择器 {
属性: 属性值; }
例如：h1 {font-size: 12px;}
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
h2,h4 {font-size: 12px; display:inline;}
是大傻瓜！傻瓜
语句“h2,h4 {font-size: 12px; display:inline;} ”同时为h2和,h4两个标签定义了两个样式。定义
多个样式，样式之间用分号“;”隔开。
注意1：在
中，我们没有看到选择器，这是因为插入CSS的位置不同，它将
直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效
率。
CSS注释 : “/*”开始，以“*/”结束，
而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
class和id的用法:
首先我们要在部分定义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入门教程——样式表加入网页方式
--------------------------------------
内部样式表:
行内样式表(内嵌样式表):
<标签 style="符合CSS语法结构的CSS语句">
例如：
例如：
段落内容
外部样式表:
使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，
你需要在网页的部分插入以下内容：
层叠的意义:
那么最终网页内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;}
我是斜体
定义文字粗细(font-weigh):
例如: p.b
例如: p.b
我是粗体
首行缩进(text-indent):
{ text-indent: 24px; }
加入上面CSS语句的页面，所有的段落首行都将自动缩进24个像素。
{ text-indent: 24px; }
加入上面CSS语句的页面，所有的段落首行都将自动缩进24个像素。
文本颜色(color):
例如: p.lv{color:green;}
p.hong{color: red;}
例如: p.lv{color:green;}
p.hong{color: red;}
我是绿色
我是红色
文本对齐属性(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;}
居中
clss="zuo">左对齐
class="you">右对齐
文本修饰(text-decoration):
p.shang{text-decoration: oveline;}
p.xia{text-decoration: underline;}
p.zhong{text-decoration: line_through;}
a.none{text-decoration: none;}
1.背景颜色属性(background-color):
2.背景图片(background-p_w_picpath):
3.背景图片的重复设置(background-repeat)
不重复；
只在垂直方向重复:
4.背景图片位置(background-position):
5.将背景图片固定在页面的某个位置(background-p_w_upload)
--------------------------------------
列表
--------------------------------------
1.无序列表项目样式属性(list-style-type)
.w1 {list-style-type: circle;}
.w2 {list-style-type: square;}
.w3 {list-style-type: disc}
- 无序列表项目1
- 无序列表项目2
- 无序列表项目3
- 无序列表项目1
- 无序列表项目2
- 无序列表项目3
- 无序列表项目1
- 无序列表项目2
- 无序列表项目3
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-p_w_picpath)
.xing { list-style-p_w_picpath:url(../../p_w_picpaths/list.gif);}
- 无序列表项目1
- 无序列表项目2
- 无序列表项目3
--------------------------------------
div和span是什么意思?
相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到标签，
你知道里面是标题，当你看到标签的时候你知道里面是一个新的自然段。可是div和span标签并
没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，
一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)
，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会
。
我在div内，类为boxhead
我在div内
我在div内
我在div内
我在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的宽度。
行级标签(行内标签):
本实例在上面实例的基础之上，只修改一段文本的颜色。修改如下代码：
将第一个“
我在div内
”修改为我在div内，也在span内，属性为box。
以上只是关于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)
相对定位是指相对它本来应该处的位置所做的移动。
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
--------------------------------------
定位:
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
我是一段正常的文本
我本来应该在它的正下方，可是relative相对定位让我在正常位置的基础上向右
移动了50个像素。