前言：
而今你们对“css样式表文件扩展名”大约比较珍视，同学们都需要剖析一些“css样式表文件扩展名”的相关知识。那么小编同时在网摘上收集了一些有关“css样式表文件扩展名””的相关知识，希望各位老铁们能喜欢，咱们快快来学习一下吧！如果说HTML是新建的毛坯房，CSS就是对房屋进行装潢。
CSS(Cascading Style Sheet)中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计，它以HTML语言为基础，在学习CSS前你要具备HTML基础知识。CSS提供丰富的格式化功能，如字体、颜色、背景及整体排版等，Web设计者可以设置不同的样式风格。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在网页设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
一、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>内所有指定标签定义样式，相应指定标签如下：
<div>内部标签选择符样式</div><div class="myFL">内部calss类选择符样式</div><div id="myID">内部id择符样式</div><div><b>内部关联选择符</b></div>
这些标签在网页中显示效果：
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;}二、CSS常用属性名称和属性值
字体大小：“font-size:12pt;"，字体大小为12磅，就是小4号字。字体样式：“font-style:oblique;(偏斜体)\italic;(斜体)\normal;(正常)”。文字行高：“line-height:12pt;"，或为像素单位“line-height:20px;"。文字粗细：“font-weight: bold;(粗体)\lighter;(细体)\normal;(正常)”。大小写： “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;(正常)”中的反斜杠“\”为任选分隔符
三、HTML+CSS基本网页实例
<HTML><HEAD><TITLE>网页标题</TITLE><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link href="../css/style1.css" rel="stylesheet"><style> span {color:#660000; font-size:25pt;} .mySClass{color:#660000; font-size:12pt;} #mySID{color:#660000; font-weight:bold;} span b{color:#660000;}</style></HEAD><BODY><h3>1、内联样式</h3><span style="color:#00ff00;">内联样式1</span><br/><span style="color:#00ff00;">内联样式1</span><br/><div style="width:300px; color:#color:#0000ff;">内联样式2</div><br/><div style="width:300px; color:#color:#0000ff;">内联样式2</div><h3>2、内部样式</h3> <div class="mySClass">选择器以 "." 来定义，可以定义多个相同class名称的标签。</div> <div class="mySClass">中选择器以 "." 来定义，可以定义多个相同class名称的标签。</div> <div id="mySID">CSS中选择器以 "#" 来定义，标签id名称唯一。</div> <div id="mySID">CSS中选择器以 "#" 来定义，标签id名称唯一。</div> <span>内部样式3</span><br/> <span>内部样式3</span><br/> <span><b>内部样式4</b></span><br/> <span><b>内部样式4</b></span><br/><h3>3、外部样式</h3> <div>外部样式1</div> <div>外部样式1</div> <div class="myFL">外部样式2</div> <div class="myFL">外部样式2</div> <div id="myID">外部样式3</div> <div id="myID">外部样式3</div> <div><b>外部样式4</b></div> <div><b>外部样式4</b></div></BODY></HTML>注：网页中<、>转义字符可以在网页中显示原代码
网页代码解释：
第4行：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>，【charset=UTF-8】表示网页采用UTF-8字符集（绝大多数网页使用的字符集），这时注意网页保存时要选择对应字符格式。如图：
图1：网页保存时选择UTF-8字符格式
第5行：<link href="../css/style1.css" rel="stylesheet">，外部样式文档【style1.css】被保存在网页所在目录的上两级目录中（相对路径）。如图：
图2：网页文件在ststPage目录中，外部CSS文档style1.css在ststPage目录中的css子目录中
style1.css样式文档内容：
div{color:#ff0000; font-size:15pt;}.myFL{color:#00ff00; font-size:12pt;}#myID{color:#0000ff; font-weight:bold;}div b{color:#ff00ff;}CSS样式表嵌入网页的三种方法的优先级顺序为：内联样式、内部样式和外部样式。
标签： #css样式表文件扩展名
