栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS样式的基础学习总结

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS样式的基础学习总结

一.CSS基本介绍

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。

CSS是英语CascadingStyle Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

二.CSS的使用方法

有三种方法可以在站点网页上使用样式表:

外部样式:将网页链接到外部样式表。

内页样式:在网页上创建嵌入的样式表。

行内样式:应用内嵌样式到各个网页元素。

每一种方法均有其优缺点:

当要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表中修改一次,而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名,例如牛腩新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来,如:



当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如:



如果网页链接到外部样式表,为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式,可将该网页链接到样式表,方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页,或到在文件夹列表中的所选网页,或到站点上的全部网页。

该“样式” 框列出标准 HTML 标记符,例如标题

1,还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素,请选定该样式然后单击 “样式” 框中的样式或选择器。

在 Microsoft FrontPage 2000中,某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令(在 “格式” 菜单上)在普通段落周围应用框,FrontPage 会写下格式设置信息,作为段落标记符的内嵌样式属性(例如∶ )。然而某些属性的应用需要使用 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表单运用:

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单

九、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样式的基础学习,如有出入,还请见谅。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/217400.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号