层叠样式表(CSS)

CSS(Cascading Style Sheet)中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计，它以HTML语言为基础，在学习CSS前你要具备HTML基础知识。CSS提供丰富的格式化功能，如字体、颜色、背景及整体排版等，Web设计者可以设置不同的样式风格。

一、CSS样式表嵌入网页常用的三种方法

1、内联样式

内联样式是直接在html标签上定义该标签的css样式，如区块标签：

<div style="width:300px; color:#color:#0000ff;">内联样式</div>

div的内联样式style定义div标签内的文字为蓝色（width:300px）、div区块标签的宽度为300像素（color:#0000ff）。

2、内部样式

内部样式写在html文件头中（style写在head里面），且包含在<style></style>标签中。如：

<style>

  div{color:#ff0000; font-size:15pt;}

  .myFL{color:#00ff00; font-size:12pt;}

  #myID{color:#0000ff; font-weight:bold;}

  div b{color:#ff00ff;}

</style>

上面四行内部样式，分别为html文档体<body>内所有指定标签定义样式，相应指定标签如下：

<body>

  <div>内部标签选择符样式</div>

  <div class="myFL">内部calss类选择符样式</div>

  <div id="myID">内部id择符样式</div>

  <div><b>内部关联选择符</b></div>

</body>

这些标签在网页中显示效果：

内部标签选择符样式

内部calss类选择符样式

内部id择符样式

内部关联选择符

3、外部样式

外部样式是通过在html中引用外部css文件来控制样式，如在html文件头中写入引用语句，

<link href="../css/style1.css" rel="stylesheet"/>

这段HTML代码是为所在网页引用外部样式文件style1.css，改样式文件被保存在网页所在目录的上两级目录中（相对路径）。和内部样式相比，外部样式把内部样式包含在<style></style>标签中样式代码独立保存为后缀为.css的样式文件，其书写格式为：

div{color:#ff0000; font-size:15pt;}

.myFL{color:#00ff00; font-size:12pt;}

#myID{color:#0000ff; font-weight:bold;}

div b{color:#ff00ff;}

<body>指定标签方式和内部样式完全一致。下面这段代码引用了外部样式，

<div class="oUL">我的calss类属性值“oUL”由外部样式指定为枣红色16磅楷体粗体字</div>

区块代码div内文字外观，

我的由外部样式指定为枣红色16磅楷体粗体字

二、CSS常用属性名称和属性值

字体大小：“font-size:12pt;"，字体大小为12磅，就是小4号字。
字体样式：“font-style:oblique;(偏斜体)\italic;(斜体)\normal;(正常)”。
文字行高：“line-height:12pt;"，或为像素单位“line-height:20px;"。
文字粗细：“font-weight: bold;(粗体)\lighter;(细体)\normal;(正常)”。
大小写：&nbsp&nbsp&nbsp “text-transform:capitalize;(首字母大写)\uppercase;(大写)\lowercase;(小写)\none;(无)”。
文字修饰：“text-decoration:underline;(下划线)\overline;(上划线)\line-through;(删除线)\blink;(闪烁)”。
常用字体：“font-family:Courier New;\Courier;\monospace;\Times New Roman;\Times;\serif;\Arial;\Helvetica;\sans-serif;\Verdana;”。
背景颜色：“background-color:#00ffff;”。更多代码颜色参考颜色对照表
文字间距：“letter-spacing:20px;”。
单词间距：“word-spacing:5px”，适用于英文。
文字对齐：“text-align: justify;(两端对齐)\left;(左对齐)\right;(右对齐)\center;(居中)”。
文字缩进：“text-indent:20px;”。
垂直对齐：“vertical-align: baseline;(基线)\sub;(下标)\super;(下标)\top;\text-top;\middle;\bottom;\text-bottom;”。
边框样式：“border-style: dotted;(点线)\dashed;(虚线)\solid;\double;(双线)\groove;(槽线)\ridge;(脊状)\inset;(凹陷)\outset;”。
边框宽度：“border-width:2px;”。
边框颜色：“border-color:#ff6666;”。
边框属性：“border:1px solid #ff6666;(四边宽度1像素、实线、颜色代码)\border-left:1px solid #000000;(左边线)\border-right:1px solid #000000;(右边线)\border-top:1px solid #000000;(上边线)\border-bottom:1px solid #000000;(下边线)”。
列表属性：“list-style-type:disc;(圆点)\circle;(圆圈)\square;(方块)\decimal;(数字)\lower-roman;(小罗码数字)\upper-roman;\lower-alpha;\upper-alpha;”。

注意，样式：“font-style:oblique;(偏斜体)\italic;(斜体)\normal;(正常)”中的反斜杠“\”为任选分隔符。

三、CSS样式设计练习

CSS常用属性名称和属性值设计方法参见本站提供的银河统计CSS练习教程和W3School CSS在线教程。

秒客网

层叠样式表(CSS)