本文所分享的知识点是【CSS样式的基础学习总结】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
CSS样式的基础学习总结
一．CSS基本介绍
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
CSS是英语CascadingStyle Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
二．CSS的使用方法
有三种方法可以在站点网页上使用样式表：
外部样式：将网页链接到外部样式表。
内页样式：在网页上创建嵌入的样式表。
行内样式：应用内嵌样式到各个网页元素。
每一种方法均有其优缺点：
当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如牛腩新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来，如：
<link href=http://www.jb51.net/css/"/css/Common.css"rel="stylesheet" type="text/css"/>
当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如：
<style type="text/css"><!--
body {background:grey;}
</style>
使用内嵌样式以应用级联样式表属性到网页元素上。如：
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style属性中使用@import -->
如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。
要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。
该“样式” 框列出标准 HTML 标记符，例如标题
1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。
在 Microsoft FrontPage 2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <pstyle="border-style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式”按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。
三、CSS文字属性：
color: #999999;
font-family: 宋体,sans-serif;
font-size: 9pt;
font-style:itelic;
font-variant:small-caps;
letter-spacing: 1pt;
line-height: 200%;
font-weight:bold;
vertical-align:sub;
vertical-align:super;
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;
text-decoration:none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-align:right;
text-align:left;
text-align:center;
text-align:justify;
vertical-align属性
vertical-align:top;
vertical-align:bottom;
vertical-align:middle;
vertical-align:text-top;
vertical-align:text-bottom;
四、CSS符号属性：
list-style-type:none;
list-style-type:decimal;
list-style-type:lower-roman;
list-style-type:upper-roman;
list-style-type:lower-alpha;
list-style-type:upper-alpha;
list-style-type:disc;
list-style-type:circle;
list-style-type:square;
list-style-image:url(/dot.gif);
list-style-position:outside;
list-style-position:inside;
五、CSS背景样式：
background-color:#F5E2EC;
background:transparent;
background-image: url(/image/bg.gif);
background-attachment: fixed;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
指定背景位置
background-position: 90% 90%;
background-position: top;
background-position: buttom;
background-position: left;
background-position: right;
background-position: center;
六、CSS连接属性：
a
a:link
a:visited
a:active
a:hover
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}
七、CSS框线一览表：
border-top: 1px solid #6699cc;
border-bottom: 1px solid #6699cc;
border-left: 1px solid #6699cc;
border-right: 1px solid #6699cc;
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color: #369
border-top-width:1px
border-top-style: solid
其他框线样式
solid
dotted
double
groove
ridge
inset
outset
八、CSS表单运用：
文字方块 <input type="text" name="T1"size="15">
按钮 <input type="submit" value="submit"name="B1">
复选框 <input type="checkbox" name="C1">
选择钮 <input type="radio" value="V1" checkedname="R1">
多行文字方块 <textarea rows="1" name="S1"cols="15"></textarea>
下拉式菜单 <select size="1" name="D1"><option>选项1</option>
<option>选项2</option></select>
九、CSS边界样式：
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
十、CSS边框空白
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
十一、滚动条样式
Scrollbar-face-color:#f3f3f3;
Scrollbar-highlight-color:#f1f1f1
Scrollbar-shadow-color:#fcfcfc
Scrollbar-3dlight-color:#fcfcfc
Scrollbar-arrow-color:#34837
Scrollbar-track-color:#fcfcfc
Scrollbar-darkshadow-color:#66c0f4
Scrollbar-base-color:#fcfcfc
以上是对CSS样式的基础学习，如有出入，还请见谅。
关于CSS样式的基础学习总结的相关讨论如下：
相关问题：CSS样式表的基本语言格式
答：最基本，最常见的格式有以下两种： #box{width:300px;height:200px;}.box{width:300px;height:200px;}由此可见，css的基本格式组成是： 定义对象{属性名:属性值;} 例子中#box表示给id为box的元素定义的样式； .box表示给class类名为box的元素定... >>详细
相关问题：跪求，各位大神。帮帮忙。如何快速学会div+css的布...
答：你好，你可以到百度上搜李炎恢，找到他的XHTML视频从布局那一集看起到最后，讲的很不错的保证一看就懂。 >>详细
相关问题：零基础学HTML+CSS怎么样
答：《零基础学HTML+CSS》分成四篇，第一篇主要讲解了HTML语言的语法以及用法；第二篇主要讲解了DIV+CSS布局，是HTML语言与CSS样式关联的关键部分，同时介绍了多种样式表示形式，第三篇主要介绍CSS属性，CSS主要由属性组成，属性后所接的值为属性值... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-