css教程大全Word下载.docx
《css教程大全Word下载.docx》由会员分享，可在线阅读，更多相关《css教程大全Word下载.docx（22页珍藏版）》请在冰豆网上搜索。
HTML>
HEAD>
STYLEtype="
text/css"
H1.mylayout{border-width:
1;
border:
solid;
text-align:
center;
red}
/STYLE>
/HEAD>
BODY>
H1class="
mylayout"
这个标题使用了Style。
/H1>
H1>
这个标题没有使用Style。
/BODY>
/HTML>
内部样式表（InternalSytleSheet）要用到Style这个Tag，写法如下：
......
外部样式表（ExternalStyleSheet）
如果很多网页需要用到同样的样式（Styles），用什么方法呢？
将样式（Styles）写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式（Styles）的网页里引用这个CSS文件。
比如可以用文本编辑器（NotePad）建立一个叫home的文件，文件后缀不要用.txt，改成.css。
文件内容如下：
1;
solid;
center;
color:
然后你建立一个网页，代码如下：
linkhref="
../asdocs/css_tutorials/home.css"
rel="
stylesheet"
type="
使用外部（Extenal）样式表，相对于内嵌（Inline）和内部式（Internal）的，有以下优点：
∙样式代码可以复用。
一个外部CSS文件，可以被很多网页共用。
∙便于修改。
如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
∙提高网页显示的速度。
如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区（其它网页早已经引用过它），网页显示的速度就比较快。
串联（Cascading）
CSS第一个字母，是Cascading，意为串联。
它是指不同来源的样式（Styles）可以合在一起，形成一种样式。
Cascading的顺序是：
∙浏览器缺省（browserdefault）（优先级最低）
∙外部样式表（ExtenalStyleSheet）
∙内嵌样式表（InlineStyle）（优先级最高）
样式（Styles）的优先级依次是内嵌（inline）,内部（internal）,外部（external）,浏览器缺省（browserdefault）。
假设内嵌（Inline）样式中有font-size:
30pt,而内部（Internal）样式中有font-size:
12pt，那么内嵌（Inline）式样式就会覆盖内部（Internal）样式。
CSS语法
基本语法
一个样式（Style）的语法由三部分构成：
Selector（中文叫选择器有点怪怪的，就用英文吧），属性（Property），属性值（Value）。
selector{property:
value}
举个例子，下面的代码p就是selector，color就是属性，blue就是属性值。
p{color:
blue}
HTML中所有的Tag都可以作为selector。
注：
如果你想为Style加多个属性，在两个属性之间要用分号加以分隔。
下面的Style就包含2个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。
p{text-align:
red}
为了提高Style代码的可读性，你也可以分行写：
p
{
text-align:
black;
font-family:
arial
}
组合（Grouping）
你也可以将相同的属性和属性值赋予多个Selector。
Selector之间用逗号分隔。
h1,h2,h3,h4,h5,h6
red
}
上面的例子是将所有正文标题（<
到<
h6>
）的字体颜色都变成红色。
ClassSelector
利用ClassSelector，你可以用同样的HTMLTag构成不同的样式。
比如说，你希望段落<
有两种样式，一种是居中对齐，一种是居右对齐。
你就可以写如下样式：
p.right{text-align:
right}
p.center{text-align:
center}
其中right和center就是两个class。
然后你就可以引用这两个class，示例代码如下：
pclass="
center"
这一段居中显示。
right"
这一段是居右显示。
演示示例
你也可以不用HTMLTag，直接用.加上Class名称作为一个Selector。
示例代码如下：
.center{text-align:
center}
这种通用的ClassSelector就没有Tag的局限性，可以用于不同的Tag。
比如：
h1class="
这个标题居中显示。
/h1>
pclass="
这个段落居中显示。
ContextualSelector
你可以为嵌入其它Tag的Tag定义样式，示例代码如下：
pem{color:
red}
Em这个Tag嵌套在P里面。
pem就叫做ContextualSelector，定义嵌套于P里的Em的样式。
这个例子表示，在P里面的用Em这个Tag标记的字体颜色是红色。
CSS注释
为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。
CSS代码注释以/*开头，以*/结束。
/*段落样式*/
/*居中显示*/
CSS字体属性
字体名称属性（font-family）
这个属性设定字体名称，如Arial,Tahoma,Courier等。
例句如下：
.s1{font-family:
Arial}
字体大小属性（font-size）
这个属性可以设置字体的大小。
字体大小的设置可以有多种方式，最常用的就是pt和px（pixel）。
.s2{font-size:
16pt}
字体风格属性（font-style）
这个属性有三个值可选：
normal,italic,oblique。
normal是缺省值，italic,oblique都是斜体显示。
.s1{font-sytle:
italic}
字体浓淡属性（font-weight）
这个属性常用值是normal和bold，normal是缺省值。
pstyle="
font-weight:
bold"
这段文字字体的浓淡属性（font-weight）值是bold。
字体变量属性（font-variant）
这个属性有两个值，normal和small-caps，normal是缺省值。
small-caps表示小的大写字体。
.s1{font-variant:
small-caps}
字体属性（font）
这个属性是各种字体属性的一种快捷的综合写法。
这个属性可以综合字体风格属性（font-style），字体变量属性（font-variant），字体浓淡属性（font-weight），字体大小属性（font-size）等属性。
.s1{font:
italicnormalbold11ptarial}
字体颜色（color）
字体颜色用CSS中的color属性来表示。
参见CSS常用文本属性。
CSS常用文本属性
文本对齐属性（text-align）
这个属性用来设定文本的对齐方式。
有以下值：
∙left（居左，缺省值）
∙right（居右）
∙center（居中）
∙justify（两端对齐）
.p2{text-align:
文本修饰属性（text-decoration）
这个属性主要设定文本划线的属性。
∙none（无，缺省值）
∙underline（下划线）
∙overline（上划线）
∙line-through（当中划线）
.p2{text-decoration:
underline}
文本缩进属性（text-indent）
这个属性设定文本首行缩进。
其值有以下设定方法：
∙length（长度，可以用绝对单位（cm,mm,in,pt,pc）或者相对单位（em,ex,px））
∙percentage（百分比，相当于父对象宽度的百分比）
.p1{text-indent:
8mm}
行高属性（line-height）
这个属性设定每行之间的距离。
∙normal（缺省值）
∙length（长度，可以用绝对单位（cm,mm,in,pt,pc）或者相对单位（em,ex,px））
∙percentage（百分比，相当于父对象高度的百分比）
.p1{line-height:
1cm}
字间距属性（letter-spacing）
这个属性用来设定字符之间的距离。
∙length（长度，可以用绝对单位（cm,mm,in,pt,pc）或者相对单位（em,ex,px））
.p1{letter-spacing:
3mm}
颜色属性（color）
用颜色属性（color）可以改变文本的字体颜色。
字体颜色代码请参见HTML颜色参考（HTMLColorReference）。
.p1{color:
gray}
CSS背景属性
背景颜色属性（background-color）
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body{background-color:
#99FF00;
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
背景图片属性（background-image）
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
bodystyle="
background-image:
url（../images/css_tutorials/background.jpg）"
上面的代码为Body这个HTML元素设定了一个背景图片。
背景重复属性（background-repeat）
这个属性和background-image属性连在一起使用，决定背景图片是否重复。
如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
∙repeat-x背景图片横向重复
∙repeat-y背景图片竖向重复
∙no-repeat背景图片不重复
body{background-image:
url（../images/css_tutorials/background.jpg）;
background-repeat:
repeat-y}
上面的代码表示图片竖向重复。
背景附着属性（background-attachment）
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。
这个属性有两个值，一个是scroll，一个是fixed。
缺省值是scroll。
no-repeat;
background-attachment:
fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
背景位置属性（background-position）
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
background-repeat:
background-position:
20px60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
背景属性（background）
这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color,background-image,background-repeat,backgroundattachment,background-position。
body{background:
#99FF00url（../images/css_tutorials/background.jpg）no-repeatfixed40px100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
CSS边框属性
边框风格属性（border-style）
这个属性用来设定上下左右边框的风格，它的值如下：
∙none（没有边框，无论边框宽度设为多大）
∙dotted（点线式边框）
∙dashed（破折线式边框）
∙solid（直线式边框）
∙double（双线式边框）
∙groove（槽线式边框）
∙ridge（脊线式边框）
∙inset（内嵌效果的边框）
∙outset（突起效果的边框）
演示示例：
分别使用none,dotted,dashed,solid,double,groove,ridge,inset,outset的CSS边框风格属性示例
边框宽度属性（border-width）
这个属性用来设定上下左右边框的宽度，它的值如下：
∙medium（是缺省值）
∙thin（比medium细）
∙thick（比medium粗）
∙用长度单位定值。
可以用绝对长度单位（cm,mm,in,pt,pc）或者用相对长度单位（em,ex,px）。
分别用medium,thin,thick和长度单位定制的CSS边框宽度属性示例
边框颜色属性（border-color）
这个属性用来设定上下左右边框的颜色。
.d5{border-color:
gray;
border-style:
边框属性（border）
这个属性是边框属性的一个快捷的综合写法，它包含border-width,border-style和border-color。
.d1{border:
5pxsolidgray;
演示示例
单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top,border-top-width,border-top-style,border-top-color。
设定下边框属性，你可以使用border-bottom,border-bottom-width,border-bottom-style,border-bottom-color。
设定左边框属性，你可以使用border-left,border-left-width,border-left-style,border-left-color。
设定上边框属性，你可以使用border-right,border-right-width,border-right-style,border-right-color。
设置单边边框属性的示例
CSS边距属性
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性（margin-left）
这个属性用来设定左边距的宽度。
示例如下：
.d1{margin-left:
右边距属性（margin-right）
这个属性用来设定右边距的宽度。
.d1{margin-right:
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。
上边距属性（margin-top）
这个属性用来设定上边距的宽度。
.d1{margin-top:
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。
下边距属性（margin-bottom）
这个属性用来设定下边距的宽度。
.d1{margin-bottom:
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。
边距属性（margin）
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
你可以为上下左右边距设置相同的宽度。
示例入下：
.d1{margin:
你也可以分别设置边距，顺序是上，右，下，左。
1cm2cm3cm4cm}
上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
上下左右边距宽度相同
上下左右边距宽度各不相同
CSS间隙属性
间隙属性（padding）是用来设置元素内容到元素边界的距离。
左间隙属性（padding-left）
这个属性用来设定左间隙的宽度。
.d1{padding-left:
右间隙属性（padding-right）
这个属性用来设定右间隙的宽度。
.d1{padding-right:
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。
上间隙属性（padding-top）
这个属性用来设定上间隙的宽度。
.d1{padding-top:
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。
下间隙属性（margin-bottom）
这个属性用来设定下间隙的宽度。
.d1{padding-bottom:
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。
间隙属性（padding）
这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。
你可以为上下左右间隙设置相同的宽度。
.d1{padding:
你也可以分别设置间隙，顺序是上，右，下，左。
上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。
上下左右间隙宽度相同
上下左右间隙宽度各不相同
CSS盒子模式（BoxModel）
CSS中有个重要的概念，就是盒子模式（Boxmodel）。
胡戈的"
一个馒头引发的血案"
中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子（Box）。
盒子里由外至里依次是：
∙margin边距
∙border边框
∙padding间隙（也有人称做补丁）
∙content（内容，比如文本，图片等）
CSS边距属性（margin）是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS边框属性（border）用来设定一个元素的边线。
CSS间隙属性（padding）是用来设置元素内容到元素边框的距离。
CSS背景属性指的是content和padding区域。
CSS属性中的width和height指的是content区域的宽和高。
CSS列表样式属性
列表样式类型属性（list-style-type）
这个属性用来设定列表项标记（list-itemmarker）的类型。
∙disc（缺省值，黑圆点）
∙circ
升级会员 