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文档中的位置):
• 内联样式(行内样式)
• 内部样式表(内嵌样式)
• 外部样式表(分为两种类型:链接样式,导入样式)
1)内联样式
• 内联样式是写在标签里面的,它只针对自己所在的标签起作用。
例:<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”>
<!--
@import url(style.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:"华文行楷,隶书,华文中宋";