[计算机软件及应用]cssxin.ppt

CSS相关的核心基础知识 CSS的核心机制——盒子模型 CSS布局的重点和难点——浮动和定位 文字和图像的排版。 链接和导航相关的设置方法 CSS的概念 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 HTML用于结构化内容；CSS用于格式化结构化的内容 CSS是（Cascading Styles Sheets）： 中文名称是层叠样式表。 用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。 CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立出来单独管理。 要改变网页的外观时，只需更改CSS样式。 基本的CSS模型 1.创建CSS样式表 1.创建CSS样式表 1.创建CSS样式表 1.创建CSS样式表 1.创建CSS样式表 1.创建CSS样式表 p {font-family: sans serif} h1, h2, h3, h4, h5, h6 { color: green } body {color: black} p {font-family: sans serif} 1.创建CSS样式表 HTML中引入CSS的方法 1.行内式???在标记的style属性中设定css样式，没体现css优势，不推荐 html head title例子/title /head body style=background-color: #FF0000; h1 style=color:white;background-color:blueThis is a line of Text /h1 p这个页面是红色的/p /body /html 2.嵌入式?? 对页面中各种元素的设置集中在head之间 html head title例子/title style type=text/css body {background-color: #FF0000;} /style /head body p这个页面是红色的/p /body /html 外部样式表是一个扩展名为css的文本文件 3、导入外部样式表 ?? style type=text/css????????@import mystyle.css;? /style 4链入外部样式表 ?? link href=mystyle.css rel=stylesheet type=text/css/ 区别：连接式：会在装载页面主体部分之前装载css文件，网页一开始就带样式效果 ??导入式：会在整个页面装载完成后再装载CSS文件，可能会出现先显示无样式页面，闪烁后再出现样式效果 如果引入一个CSS文件，则使用连接方式， 如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS，这个“目录” CSS文件中再使用导入式引入其他CSS文件。 CSS样式表属性选项设置 2.使用CSS样式表 2.使用CSS样式表 CSS属性 在“CSS规则定义” “分类”列表框中，有八大类。 类型：定义文字的字体、大小、样式、颜色等属性 背景：定义页面的背景颜色或背景图像。 区块：定义间距和对齐方式。 方框：定义元素在页面上的位置。 边框：元素周围的边框，如边框的宽度、颜色和样式等。 列表：列表各种属性，如列表项目符号、位置等。 定位：层的大小、位置、可见性、溢出方式、剪辑等。 CSS属性 在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。根据CSS样式表的用途和要求，分别设置不同类型的参数。 类型属性 类型属性主要用来定义文字的字体、大小、样式、颜色等属性。下面以新建的类“.word”为例，来说明如何设置类型属性。应用“.word”样式的文字效果。 背景属性 背景属性主要用来定义页面的背景颜色或背景图像。应用背景颜色和背景图像的效果。 区块属性 区块属性主要用来定义间距和对齐方式。 方框属性 方框属性主要用来定义元素在页面上的位置。应用在“.word”样式中设置方框属性后的效果，可以控制文本区域的大小、位置、与边界的距离等。 边框属性 边框属性用来定义元素周围的边框，例如边框的宽度、颜色和样式等。应用边框属性样式的表格效果，表格边框为1像素虚线。 列表属性 列表属性主要用来定义列表各种属性，如列表项目符号、位置等。应用列表属性的效果，分别为设置了项目符号图像的效果，设置了项目类型、位置在内的效果，设置了项目类型、位置在外的效果。具体操作步骤如下： 定位属性 定位属性主要用来定义层的大小、位置、可见性、溢出方式、剪辑