标签：
<span>标签
在HTML中，<span>标签是被用来组合HTML文档中的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时，他才会产生视觉上的变化。
<span>标签可以为<p>标签中的部分文字添加样式，而且不会改变文字的显示方向。他不会像<p>标签和标题标签那样，每对标签独占一个矩形区域。
字体样式
常用字体属性
|
属性名 |
含义 |
举例 |
|
Font-family |
设置字体类型 |
Font-family:"隶书"; |
|
Font-size |
设置字体大小 |
Font-size:12px; |
|
Font-style |
设置字体风格 |
Font-style:italic; |
|
Font-weight |
设置字体的粗细 |
Font-weight:bold; |
|
Font |
在一个声明中设置所有字体属性 |
Font:italic bold 36px "宋体"; |
1、字体类型
在CSS中字体类型是通过font-family属性来控制的。例如，需要将HTML中所有<p>标签中的英文和中文分别使用Verdana和楷体字体显示，则可以通过标签选择器来定义<p>标签中元素的字体样式，其CSS设置如下所示。
P{font-family:Verdana,"楷体";}
这句代码声明了HTML页面中<p>标签的字体样式，并同时声明了两种字体，分别是Verdana和楷体，这样浏览器会优先用英文字体显示文字，如果英文字体里没有包含的字符（通常英文字体不支持中文），则从后面的中文字体里面找，这样就达到了英文使用Verdana、中文使用楷体的不同效果。
这样设置的前提是要确定计算机中有Verdana、楷体这两种字体。如果计算机中没有Verdana，中文和英文都将以楷体显示；如果计算机中没有楷体，那么中文、英文都将以计算机默认的某种字体显示。所以在设置中文、英文不同字体显示时，尽可能设置计算机中有的字体，这样就可以实现中文、英文显示不同字体效果了。
Font-family属性，可以同时声明多种字体，字体之间用英文输入模式下的逗号分隔开。另外，一些字体的名称中间会出现空格，如Times New Roman字体，或者中文，如楷体，这时需要用双引号将其引起来，是浏览器知道这是一种字体的名称。如下：
body{font-family:Times,"Times New Roman","楷体";}
注意：
/1、当需要同时设置英文字体和黄总文字提示，一定要将英文字体设置在中文字体之前，如果中文字体设置于英文字体之前，英文字体设置将不起作用。
/2、在实际网页开发中，网页中的文本如果没有特殊要求，通常设置为“宋体”；宋体是计算机中默认的字体，如果需要其他比较炫的字体则使用图片来替代。
2、字体大小
在网页中，通过文字的大小来突出主体是非常常用的方法，CSS是通过font-size属性来控制文字大小的，常用的单位是px(像素)。在CSS中设置字体大小还有一些其他的单位，如in、cm、mm、pt、pc，有时也会用百分比（%）来设置字体大小，但是在实际的网页制作中，这些单位并不常用。
3、字体风格
在CSS中，使用font-style属性设置字体的风格，font-style属性有3个值，分别是normal、italic和oblique，这三个值分别告诉浏览器显示标准的字体样式、斜体字体样式、倾斜的字体样式，font-style属性的默认值为normal。其中italic和oblique在页面中显示的效果非常相似。
4、字体的粗细
CSS中使用font-weight属性控制文字粗细，重要的是CSS可以将本身是粗体的文字变为正常粗细。
Font-weight属性的值
|
值 |
说明 |
|
Normal |
默认值，定义标准的字体 |
|
Bold |
粗体字体 |
|
Bolder |
更粗的字体 |
|
Lighter |
更细的字体 |
|
100、200、300、400、500、600、700、800、900 |
定义由细到粗的字体，400等同于normal，700等同于bold |
5、字体属性
在前面讲解的几个字体属性都是单独使用的，实际上在CSS中如果对同一部分的字体设置多种字体属性时，需要使用font属性来进行声明，即利用font属性一次设置字体的所有属性，各个属性之间用英文空格分开，但需要注意这几种字体属性的顺序依次为字体风格→字体粗细→字体大小→字体类型，如下。
P span{font:oblique bold 12px "楷体";}
使用CSS排版网页文本
文本属性
|
属性 |
含义 |
举例 |
|
Color |
设置文本颜色 |
Color:#00C; |
|
Text-align |
设置元素水平对齐方式 |
Text-align:right; |
|
Text-indent |
设置首行文本的缩进 |
Text-indent:20px; |
|
Line-height |
设置文本的行高 |
Line-height:25px; |
|
Text-decoration |
设置文本的装饰 |
Text-decoration:underline; |
1、文本颜色
在HTML页面中，颜色统一采用RGB格式，也就是通常人们所说的“红绿蓝”三原色模式。在这十六进制的表示方法中，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。有的颜色为6位，有的为3位，为什么？用3位表示颜色值是颜色属性值的简写，当这6位颜色值相邻数字两两相同时，可两两缩写为以为，如“#336699”可简写为“#369”，“#EEFF66”可简写为“#EF6”。
2、水平对齐方式
在CSS中，文本的水平对齐是通过text-align属性来控制的，通过它可以设置文本左对齐、居中对齐、右对齐和两端对齐。
Text-align属性的常用值
|
值 |
说明 |
|
Left |
把文本排列到左边，默认值，由浏览器决定 |
|
Right |
把文本排列到右边 |
|
Center |
把文本排列到中间 |
|
Justify |
实现两端对齐文本效果 |
3、首行缩进和行高
在CSS中通过line-height属性来设置行高，通过text-indent属性设置首行缩进。
Line-height属性的值与font-size属性值一样，也是以数字来表示的，单位也是px。除了使用像素表示行高外，也可以不加任何单位，按倍数表示，这时行高是字体大小的倍数。例如，<p>标签中的字体大小设置为12px，它的行高设置为“line-height:1.5;”,那么它的行高换算成像素则是18px。这种不加任何单位的方法在实际网页制作中并不常用，通常使用像素的方法表示行高。
在CSS中，text-Indent直接将缩进距离以数字表示，单位为em或px。但是对于中文网页，em用得较多，通常设置为“2em”，表示缩进两个字符，如p{text-indent:2em;}。
这里缩进距离的单位em是相对单位，其表示的长度相当于本行中字符的倍数。无论字体的大小如何变化，他都会根据字符的大小，自动适应，空出设置字符的倍数。
4、文本装饰
在CSS中是通过text-decoration属性来设置文本装饰。
Text-decoration常用值
|
值 |
说明 |
|
None |
默认值，定义的标准文本 |
|
Underline |
设置文本的下划线 |
|
Overline |
设置文本的上划线 |
|
Line-through |
设置文本的删除线 |
|
Blink |
设置文本闪烁。此值只在FireFox浏览器中有效，在IE中无效 |
5、垂直对齐方式
在CSS中通过vertical-align设置垂直方向对齐方式。但是在目前的浏览器中，只能对表格单元格中的对象使用垂直对齐方式属性，而对于一般的标签，如<h1>~<h6>、<p>及后面要学习的<div>标签都是不起作用的，因此vertical-align在设置文本在标签中垂直对齐时并不常用，它反而经常用来设置图片与文本的对齐方式。
在网页实际应用中，通常使用vertical-align属性设置文本与图片的居中对齐，此时他的值为middle。
使用CSS设置超链接
1、超链接伪类
注意：为防止图片加上超链接后出现边框，通常会有CSS文件开头加入“imgh{border:0px;}”来消除图片添加超链接后出现的边框。
超链接单击前和单击后的不同颜色，其实就是超链接的默认伪类样式。所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式，也就是说超链接将根据用户未单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的4个状态显示不同的超链接样式。伪类样式的基本语法为“标签名:伪类名{声明;}”，如图所示。
a : hover { color : #61E461 ; }
标签名 伪类名 声明
超链接伪类
|
伪类名称 |
含义 |
示例 |
|
a:link |
未单击访问时超链接样式 |
a:link{color:#9EF5F9;} |
|
a:visited |
单击访问后超链接样式 |
a:visited{color:#333;} |
|
a:hover |
鼠标悬浮其上的超链接样式 |
a:hover{color:#FF7300;} |
|
a:active |
鼠标单击未释放的超链接样式 |
a:active{color:#999;} |
既然超链接伪类有4中，那么在对超链接设置样式时，有没有顺序区别？当然有，在CSS设置伪类的顺序为a:link→a:visited→a:hover→a:active，如果先设置“a:hover”再设置“a:visited”，在IE中“a:hover”就不起作用了。
现在大家想一个问题，如果设置了4种超链接样式，那么页面上超链接的文本样式就有4种，这样就与大家浏览网页是常见的超链接样式不一样了，大家在上网时看到的超链接无论是单击前还是单击后样式都是一样的，只有在鼠标悬浮在超链接上的样式有所改变，为什么？
大家可能想到的是，“a:hover”设置一种样式，其他3种伪类设置一种样式。是的，这样设置确实能实现网上常见的超连接设置效果，但是在实际的开发中，是不会这样设置的。实际页面开发中，仅设置两种超连接方式，一种是超链接a标签选择器样式，另一种是鼠标悬浮在超链接上的样式。如下所示。
……
<style type="text/css">
img{border:0px;}
p{font-size:12px;}
a{
color:#000;
text-decoration:none;
}
a:hover{
color:#B46210;
text-decoration:underline;
}
</style>
</head>
<body>
<p><a href="#"><img src="image/hetao.jpg" alt="无漂白薄皮核桃"/></a></p>
<p><a href="#">楼兰蜜语新疆野生</a> <a href="#">无漂白薄皮核桃</a></p>
<p><span>500g×2包 ￥48.8</span></p>
</body>
</html>
在浏览器中查看的页面效果，鼠标悬浮在超链接上时显示下划线，并且字体颜色为#B46210，鼠标没有悬浮在超链接上时无下划线，字体颜色为黑色。
a标签选择器样式表示超链接在任何状态下都是这种样式，而之后设置a:hover超链接样式，表示当鼠标悬浮在超链接上时显示的样式，这样既减少了代码量，是代码看起来一目了然，也实现了想要的结果。
使用CSS设置鼠标形状十十十十
在浏览网页时，通常看到的鼠标指针形状有箭头、手型和大写的I,这些效果都是CSS通过cursor属性设置的各式各样的鼠标指针样式。Cursor属性可以在任何选择器中使用，来改变各种页面元素的鼠标指针效果。
Cursor属性常用值
|
值 |
说明 |
示例解说 |
|
Default |
默认光标 |
箭头 |
|
Pointer |
超链接的指针 |
手型 |
|
Wait |
只是程序正在忙 |
沙漏 |
|
Help |
指示可用的帮助 |
箭头和问号 |
|
Text |
指示文本 |
大写的I |
|
Crosshair |
鼠标呈现十字状 |
┼ |
背景样式
1、认识<div>标签
<div>标签可以吧HTML文档分割成独立的、不同的部分，因此<div>标签用来进行网页布局。<div>标签与<p>标签一样，也是成对出现的，它的语法如下。
<div>网页内容……</div>
一对没有添加内容和CSS样式的<div>标签，在dreamweaver中独占一行。只有在使用了CSS央视后，对他进行控制，她才能系那个报纸、杂志版面的信息块那样，对网页进行排版，制作出复杂多样的网页布局来。此外，在使用<div>布局页面时，它可以嵌套<div>,同时也可以嵌套列表、段落等各种网页元素。
关于使用CSS控制<div>标签进行网页布局，将在后续的章节中讲解。本章先认识使用CSS中控制网页元素宽、高的两个属性，分别是width和height。这两个属性的值均以数字表示，单位为px。例如，设置页面中id名称为header的<div>的宽和高，代码如下所示。
#header{
width:200px;
height:280px;
}
2、背景属性
在CSS中，背景包括背景颜色（background-color）和背景图像（background-image）两种方式。
/1/背景颜色
在CSS中，使用background-color属性设置字体、<div>、列表等网页元素的背景颜色，他的值的表示方法与color表示方法一样，也是用十六进制的方法表示背景颜色值，但是他有一个特殊值——transparent，及透明的意思，他是background-color属性的默认值。
/2/背景图像
在网页中不仅能为网页元素设置背景颜色，还可以使用图像作为某个元素的背景，如整个页面的背景使用背景图像设置。CSS中使用background-image属性设置网页元素的背景图像。
在网页中设置背景图像时，通常会与背景重复（background-repeat）方式和背景定位（background-position）两个属性一起使用，下面详细介绍这两个属性。
/1//背景图像
使用background-image属性设置背景图像的方式是background-image:url(图片路径);。
在实际工工作中，图片路径通常写相对路径；此外，background-image还有一个特殊的值，即none，表示不显示背景图像，只是实际工作中这个值很少用。
/2//背景重复方式
如果仅设置了background-image，那么背景图像默认自动向水平和垂直两个方向重复平铺。如过不希望图像平铺，或者只希望图像沿着一个方向平铺，使用background-repeat属性来控制，该属性有4个值为实现不同的平铺方式。
Repeat：沿水平和垂直两个方向平铺。
No-repeat：不平铺，即及背景图像只显示一次。
Repeat-x：只沿水平方向平铺。
Repeat-y：只沿垂直方向平铺。
在实际工作中，repeat通常用于小图片铺平整个页面的背景或铺平页面中某一块内容的背景；no-repeat通常用于小图标的显示或只需要显示一次的背景图像；repeat-x通常用于导航背景、标题背景；repeat-y在页面制作中并不常用。
/3//背景定位
在CSS中，使用background-position来设置图像在背景中的位置。背景图像默认从被修饰过的网页元素的左上角开始显示图像，但也可以使用background-position属性设置背景图像出现的位置，即背景出现一定的偏移量。可以使用具体数值、百分比、关键词3种方式表示水平和垂直方向的偏移量。
Background-position属性对应的取值
|
值 |
含义 |
示例 |
|
Xpos Ypos |
使用像数值表示，第一个值表示水平位置，第二个值表示垂直位置 |
（1）0px 0px(默认，表示从左上角出现背景图像，无偏移) （2）30px 40px(正向偏移，图像向下和向右移动) （3）-50px -60px(反向偏移，图像向上和向左移动) |
|
X% Y% |
使用百分比表示背景的位置 |
30% 50%(垂直方向居中，水平方向偏移30%) |
|
X、Y方向关键词 |
使用关键词表示背景的位置，水平方向的关键词有left、center、right，垂直方向的关键词有top、center、bottom |
使用水平方向和垂直方向的关键词进行自由组合，如省略，则默认为center。例如： right top（右上角出现） Left bottom（左下角出现） Top（上方水平居中位置出现） |
3、背景
如同之前讲解过的font属性在CSS中可以把多个属性综合声明一起实现简写一样，背景样式的CSS属性也可以简写，使用background属性简写背景样式。
上面在类title样式中声明导航标题的背景颜色和背景图像使用了4条规则，使用background属性简写后的代码如下。
.title{
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
上述代码中可以看到，使用background属性可以减少许多代码，在后期的CSS代码维护中会非常方便，因此建议使用background属性来设置背景样式。
设置超链接背景
超链接是网页中最基本的元素、任何页面跳转、提交都会用到超链接。为了使超链接更加美观，CSS中使用背景颜色或背景图像的方式设置超链接背景，常用的有按钮背景图像，导航菜单超链接，这些都是网页中常用到的背景样式。
列表样式
CSS列表有4个属性来设置列表样式，分别是以下4个。
list-style-type,list-style-image,list-style-position,list-style.
1、list-style-type
list-style-type属性设置列表项标记的类型，常用的属性值如下表所示。
List-style-type常用属性值
|
值 |
说明 |
语法示例 |
图示示例 |
|
None |
无标记符号 |
List-style-type:none |
刷牙 洗脸 |
|
Disc |
实心圆，默认类型 |
List-style-type:disc; |
●刷牙 ●洗脸 |
|
Circle |
空心圆 |
List-style-type:circle; |
○刷牙 ○洗脸 |
|
Square |
实心正方形 |
List-style-type:square; |
■刷牙 ■洗脸 |
|
Decimal |
数字 |
List-style-type:decimal; |
|
2、list-style-image
list-style-image属性是使用图像来替换列表项的标记，当设置了list-style-image后，list-style-type属性都将不起作用，页面中仅显示图像标记。但是在实际网页浏览中，为了防止个别浏览器可能不支持list-style-image属性，都会设置一个list-style-type属性以防图像不可用。例如，把某图像设置为列表中的项目标记，代码如下所示。
li{
list-style-image:url(image/arrow-right.gif);
list-style-type:circle;
}
3、list-style-position
list-style-position属性设置在何处放置列表项标记，他有两个值，即inside和outside。Inside表示项目标记放置在文本以内，且环绕文本根据标记对其；outside是默认值，他保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。
4、list-style
与背景属性一样，设置列表样式也有简写属性。list-style简写属性表示在一个声明中设置所有列表的属性。list-style-type→list-style-position→list-style-image顺序设置属性值。例如。
li{
list-style:cicle outside url(image/arrow-right.gif);
}
使用list-style设置列表样式时，可以不设置其中某个值，未设置的属性会使用默认值。例如，“list-style:circle outside;”默认没有图像标记。
S1/使用HTML语言和CSS开发商业站点/05-CSS美化网页
标签：
原文地址：http://www.cnblogs.com/water5832/p/5721911.html
