今天小编跟大家讲解下有关CSS样式的基础学习总结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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="/css/Common.css"rel="stylesheet" type="text/css"/> 当人们只是要定义当前网页的样式 可使用嵌入的样式表。嵌入的样式表是一种级联样式表 “嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如： <style type="text/css"><!-- body {background:grey;} </style> 使用内嵌样式以应用级联样式表属性到网页元素上。如： <pstyle="@importurl('style3.css');">CSS document</p> <!-- [email protected] --> 如果网页链接到外部样式表 为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。 要在网页上使用外部样式表的样式 可将该网页链接到样式表 方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页 或到在文件夹列表中的所选网页 或到站点上的全部网页。 该“样式” 框列出标准 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样式的基础学习 如有出入 还请见谅。来源：爱蒂网
