文档介绍：CSS样式表和页面布局技术
为什么需要CSS样式
文本样式属性
css盒子模型
边框样式属性
超链样式属性
制作图片按钮
样式的三类应用方式
使用Dreamweaver制作样式表
网站开发流程
页面布局技术
纯CSS+DIV实战
发布站点
为什么需要CSS样式表
HTML标签的外观样式比较单一
页面色彩不生动
样式修改不方便
样式表的作用相当于华丽的衣服
内容相同
外观不同
为什么需要CSS样式表
样式表能实现内容与样式的分离,方便团队开发
程序员写代码
美工做样式
内容与样式和谐统一的完整网页
CSS 指层叠样式表(Cascading Style Sheets) 定义如何显示 HTML 元素。
样式表的基本语法
样式表的基本结构
<STYLE type="text/css">
P {color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
声明文档样式表结束
文档样式表开始,类型为CSS样式
样式规则
选择器
样式规则
P {color:red; font-size:30px; font-family:隶书;}
属性
属性的值
样式表的基本语法
1、标签样式
标签名{属性:值;……}
2、类样式
.样式名{属性:值;……}
3、div样式
#div层的ID{属性:值;……}
CSS样式表3种选择器定义语法:
样式表的基本语法
<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
P { color:red; font-family:"隶书"; font-size:24px;}
</STYLE>
</HEAD>
<BODY>
<H2>静夜思</H2>
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>
</BODY>
</HTML>
本页面中所有的P标签都应用了此样式
所有的段落都采用P样式,保证风格统一
用分号隔开
选择器
如何编写此样式?字体类型为隶书、大小24px
<STYLE type="text/css">
.red {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
样式表的基本语法
其他标签和P标签应该采用相同的样式,所以要为它们定义一个共享样式——类样式(就像衣服)。
定义类样式(class)——制作衣服
.类名
样式规则
使用类样式(class)——穿衣服
<H2 class="red">静夜思</H2>
通过标签的class属性引用要使用的样式。
样式表的基本语法
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
.red
{ color:red; font-family:"隶书"; }
</STYLE>
</HEAD>
<BODY>
<H2 class="red">静夜思</H2>
<P class="red">床前明月光,</P>
<P class="red">疑是地上霜。</P>
<P>我是郭德刚,</P>
<P class="red">低头思故乡。</P>
</BODY>
CLASS类选择器
为类选择器定义的样式规则
应用类选择器
class=“类名”
<H2>和<P>标签要应用同一样式
如何实现这样的样式效果?字体类型都为隶书
文本常用的样式属性
文本属性
文本属性
说明
font-size
字体大小
font-family
字体类型
font-style
字体样式
color
设置或检索文本的颜色
text-align
文本对齐
背景常用的样式属性
背景属性
背景属性
说明
background-color
设置背景颜色
background-image
设置背景图像
background-repeat
设置一个指定的图像如何被重复
可取值repeat-x、 repeat、 no-repeat、repeat-y