您的位置：首页 > Web前端 > CSS

Css样式表（常用基础）

2015-08-01 00:09 597 查看

1、CSS（Cascading Stylesheets，层叠样式表  级联样式单）

是一组格式设置规则，用于控制网页内容的外观。通过使用CSS样式设置页面的格式，可以把页面的内容与表现形式分离开。

特点：利用它不仅可以减少网页的格式代码，而且可以快速的更新网站的风格。

2、CSS样式表的格式

一般来说，样式表的声明分为选择符（selector）和块{}（block），块里包含属性（properties）和属性的取值（value）。

(1)基本格式如下：

选择符 {属性:值;} 选择器（类，标签，ID）

(2)其它格式：

选择符1，选择符2，选择符3 {属性1：值1；属性2：值2；属性3：值3}

例: <p style=“font-size:12px;color:blue”>

蓝色12号文字

</p>

注：有时候多个选择符将使用相同的设置，为了简化代码，我们可以一次性为它们设置样式，并在多个选择符之间加上“，”来分隔它们。当有多个属性的时候，必须在两个属性之间用“；”来分隔。

3、CSS按其位置可以分成三种（CSS样式在HTML文档中的位置）：

• 内联样式(行内样式)

• 内部样式表(内嵌样式)

• 外部样式表(分为两种类型：链接样式，导入样式)

１）内联样式

• 内联样式是写在标签里面的，它只针对自己所在的标签起作用。

例：<p style=“font-size:12px;color:blue”>

　　蓝色12号文字

　　　　</p>

2 ）内部样式表

• 把CSS样式放在<head>标记中格式如下：

<head>

<style type=“text/css”>



</style>

</head>

3 ）外部样式表

• 把所有的样式存放在一个以.css为结尾的文件里，然后将这个CSS文件链接到各个网页中。

Ø 链接样式表

Ø 导入样式表

链接样式表

• 在网页中应有样式表的位置：在HTML的头信息标识符<head>内：

<head>

<link rel=“stylesheet” href=“style.css”>

</head>

注意：*.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀。

导入样式表

• 同样是添加在HTML的头信息标识符<head>内：

<head>

<style type=“text/css”>



</style>

</head>

优先级:

内联样式><link>标记的链接样式>内部样式表>@import导入样式表

CSS单位应用 ——长度单位：

• 绝对长度单位

常用的绝对单位有：cm(厘米)、mm(毫米)、in(英寸)、点(pt)、pc(派卡)。

• 相对长度单位：

px(像素)：是相对于屏幕分辨率而言的。

em(字高)：em代表的高度就是大写字母M或H的高度。

ex：表示字母x的高度。此高度通常为字体大小的一半。

• 百分比单位：

%：百分比值是相对于另一个值而言的。

DW中CSS样式表

在CSS中根据选择器类型的不同分为“类样式（类选择器），标签样式（标签选择器），高级样式（ID选择器）”

类：在网页中对同一种对象要创建两种以上样式时使用。

注意：类的名称是自定义的，但不能使用中文和首字符不能使用数字，类的名称前面以“.”开头

（定义不同的字体样式、表格边框线样式等）

类的应用：1）选中对象，在“属性面板”上的“样式”中选择“类的名称”

2）选中对象，在“CSS面板”中的“类的名称”上鼠标右键单击，选择“套用”

********************************************************************

标签：整个页面是一种样式，比如TD标签。

注意：标签的名称不能自定义，标签的名称前面没有以“.”开头

标签的应用：软件自动应用，不需要其他操作

********************************************************************

高级：超链接样式（a:link:、a:visited:、a:hover:、a:active:）

a:link:          未访问过的状态

a:visited:      访问过的状态

a:hover:      鼠标悬停状态

a:active:      激活状态

注意:创建时要按照先后顺序设置其效果

********************************************************************

新建样式表文件：以单独文件的格式存放起来

仅对该文档：只对当前文档起作用

正文的字体大小：font-size:12PX~14PX;

文字颜色：color:英文单词｜十六进制;

首行缩进：text-indent:2em(字体高);

1em=10px

行间距：line-height:120%~200%;

字体类型：font-family:"华文行楷,隶书,华文中宋";

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html

相关文章推荐

新的分享

章节导航

Css样式表 （常用基础）

Css样式表（常用基础）