CSS样式定义、应用、框模型

来源：互联网发布：东莞网站关键字优化编辑：程序博客网时间：2024/05/19 16:07

CSS样式定义、应用、框模型

CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术

CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面，统一风格。

样式表的基本语法

规则选择器

属性

值

color:red;

font-size:30px;

font-family:隶书;

}

类样式(class)或ID样式(id)

样式表的基本语法(ID样式)

<HTML>

<HEAD>

<TITLE>ID选择器</TITLE>

<STYLETYPE="text/css">

#control{color:red}

</STYLE>

</HEAD>

<BODY>

<Pid="control">这是火焰的颜色</P>

<BR>

<P>本段没有应用样式</P>

</BODY>

</HTML>

任何标签都具有class,id属性

定义样式的一般语法是:

属性:值;

文本样式属性

文本样式属性可用于任何标签

font-size 字体大小

font-family 字体类型

font-style 字体样式

color 设置或检索文本的颜色

vertical-align 文本垂直对齐方式

text-align 文本水平对齐方式

超链接样式属性

a:link 正常状态下的链接样式

a:hover 鼠标滑入链接时的样式

a:active 按下链接但不松开时的样式，即激活状态

a:visited 访问过的链接样式

text-decoration none, underline, overline

背景样式属性

背景样式属性可用于任何标签

background-color 背景颜色

background-image 背景图片,值为url(“地址”);

cursor 鼠标图片，值为url(“ani文件地址或cur文件地址”);

在HTML中引用样式表

行内样式表：只在该标记中对本标记起作用，不能被其他的元素共享

内嵌样式表：在本页面中直接定义样式（前面的所有案例都是使用这种方式）

外部样式表文件：将样式表单独作为一个文件，能被整个网站中的所有页面使用

行内样式表

任何标签都具有style属性

外部样式表文件

根据样式文件与网页的关联方式又分为：

链接（LINK ）外部样式表

导入（@import）外部样式表

常用的样式属性

方框属性

边界属性

margin-top 设置对象的上边距

margin-right 设置对象的右边距

margin-bottom 设置对象的下边距

margin-left 设置对象的左边距

边框属性

border-style 设置边框的样式

border-width 设置边框的宽度

border-color 设置边框的颜色

填充属性

padding-top 设置内容与上边框之间的距离

padding-right 设置内容与右边框之间的距离

padding-bottom 设置内容与下边框之间的距离

padding-left 设置内容与左边框之间的距离

边框样式

边框样式使用border属性，任何元素都具有四个边框，每个边框都可以单独定义粗细，颜色和样式。

这些属性和四个边框可以组合使用，即：

border-top-style、border-top-color、border-top-width

共形成12种边框属性.

也可以这样使用：

border-top:solid 1px red; //只设置上边框

border:solid red 1px; //同时设置四个边框

即同时设置粗细、颜色、样式，并且不计顺序

内边距样式

内边距样式使用padding属性，它专门定义边框内的内容距边框的间距，也是四个.

外边距样式

外边距样式使用margin属性，它专门定义元素距其他元素的距离，也是四个。

网页颜色模型

R表示红色，G表示绿色，B表示蓝色.这种颜色模型称为RGB模式

阅读全文

0 0