PPT02-2CSS基本语法入门(快速).ppt

《PPT02-2CSS基本语法入门(快速).ppt》由会员分享，可在线阅读，更多相关《PPT02-2CSS基本语法入门(快速).ppt（30页珍藏版）》请在三一办公上搜索。

1、一.CSS基本语法入门,韩山师范学院教育科学学院,CSS快速入门,关键内容：（1）CSS语法、选择器类型及虚类（2）不同选择器类的应用方式 类自动，ID认名字，标签和虚类自动（3）引入方式（即样式代码写在什么位置）（4）DW图形化样式设置-写“样式代码”文本：字体、大小、颜色、行高、对齐等列表：链接：的四种状态，display:block变成“块”图片：边框、边框样式、边框宽度、大小环绕方式：float浮动、padding内边距、position：fixed,1.CSS概念CSS:Cascading Style Sheets 层叠（级联）样式表，习惯叫CSS样式表CSS是层叠样式表，多重样式定

2、义被层叠在一起成为一个整体，在网页设置中是标准的布局语言，用来控制元素的尺寸、颜色和排版等。使用样式表：将“网页结构代码”和“网页格式风格代码”分离，从而使网页设计者可以对网页的布局进行更多的控制。,(一)CSS基础知识介绍,2.CSS的基本语法一个样式（style）由selector选择器、property属性和value属性值三部分组成，形式如下：selector property:value 在selector大括号里，使用属性名和属性值参数对来定义选择器里面的样式。多个属性和属性值，中间用分号隔开。selector property1:value1；property2:value2 s

3、electorproperty1:value1；property2:value2 selectorproperty1:value1；property2:value2；,(一)CSS基础知识介绍,2.1 CSS选择器HTML选择器、Class选择器、ID选择器（1）HTML selector：指HTML标签（2）class selector：“.类名”定义，使用HTML标签的class属性值的选择器（3）ID selector：“#ID名”定义，使用HTML标签的ID属性定义的选择器，一个网页文件中只能有一个元素使用某一个ID的属性值，即ID名不能重复（可以理解为元素的名字）id，name属性：

4、以前用name，现在习惯用id,(一)CSS基础知识介绍,虚类(伪类)选择器 即链接的4种状态 a:link(a)a:visited a:active a:hover,(一)CSS基础知识介绍,一般情况下建议所有定义名称都用小写例子1-1 了解三种选择器的应用方式（包括虚类）重点，理解应用方式,(一)CSS基础知识介绍,2.2 选择器声明 集体声明和嵌套声明（1）集体声明（并列）例子：h1,h2,h3,h4,p color:red;,(一)CSS基础知识介绍,（2）嵌套声明（包含）一定要掌握它的含义，虽然不难。对特殊位置的HTML标签进行声明，例子：,(一)CSS基础知识介绍,例子1：P b

5、color:blue;font-family:arial,例子2:区别？a color:blue;.list1 a color:red;,3.CSS的引入方式(1)CSS代码直接添加到HTML标签里，style属性：内联式 test(2)放在头部块里：嵌入式.(3)链接样式表：链接式,(一)CSS基础知识介绍,当页面存在多个（多种）样式时（1）冲突，则“就近使用”原则（2）不冲突，则同时起作用,(一)CSS基础知识介绍,4.CSS里的单位和值颜色：推荐使用十六进制长度单位：绝对单位（in、cm、mm、pt）和相对单位（em、ex、px），px使用较多 网页路径：绝对路径和相对路径“/”:根 r

6、oot,(一)CSS基础知识介绍,例子1-2 CSS基本语法的演练,巩固练习,（二）通过CSS控制字体样式,1.通过CSS控制文本样式字体样式 font:font-style font variant font-weight font-size font-family颜色 color:颜色 例子：test字体 font:font-size font-family(1)pfont:italic 12px 宋体(2)pfont-family:宋体；font-size:12px 范例：2-1 字体颜色+字体设置,粗细和斜体 font-weight:100-900|bold|bolder|lighte

7、r|noraml;大小和行高 大小：font-size:数值;行高：line-height:数值;例如：font-size:12px;line-height:50px;line-height:120%;下划线、顶划线、删除线text-decoration:inherit|none|underline|overline|line-through 范例2-2：下划线等的综合应用,（二）通过CSS控制字体样式,2.控制字间距和对齐方式间距 letter-spacing:数值这里的间距这里的间距这里的间距 留意负值（-）的效果对齐 text-align:left|right|center|justif

8、y,（二）通过CSS控制字体样式,3.通过CSS定义（项目）列表HTML标签无序列表控制 list-style-type:disc|circle|square|none有序列表控制 list-style-type:dcimal|lower-roman|upperroman|lower-alpha|upper-alpha|none 范例 2-3：有序列表和无序列表,（二）通过CSS控制字体样式,例子 2-4：实训-CSS字体样式综合演练,巩固练习,（三）通过CSS定义链接样式,主要学习内容：（1）为超链接定义CSS伪类属性的方法（2）超链接效果（3）通过CSS定义列表的方法,1.基本概念 添加超

9、链接后，有其特殊样式CSS伪类（虚类）a:link a:visited a:active a:hover 范例3-1：CSS伪类别,（三）通过CSS定义链接样式,2.定义丰富的超链接效果（1）给文字链接添加文字提示（2）按钮式超链接：“display:block”范例3-2：按钮超链接 注意：使用和不使用“块”的效果区别（3）为超链接添加背景图 范例3-3：超链接使用背景图,（三）通过CSS定义链接样式,（四）通过CSS定义图片样式,主要学习内容：（1）CSS定义图片样式的方法（2）CSS设置图文交互效果的方法（3）CSS设置背景图片的方法（4）CSS处理背景图片样式的方法,1.定义图片样式（

10、1）图片边框 border:类型 宽度 颜色;boder-style:参数；border-width：数值；border-color：参数；边框线类型 boder-style常用参数：none:无边框线 dotted:由点组成的虚线 dashed:由短线组成的虚线 solid:实线边框 double:双线边框,（四）通过CSS定义图片样式,边框线宽度border-width 可以自定义像素宽度如1pt、5px、2cm等，也以选择边框线宽度的三个标准值：thin（细线）、medium（中粗线）和thick（粗线）.pic1 border:3px double#bfbfbf;A:hover.pic

11、1 BORDER-LEFT-COLOR:#ae8e90;BORDER-BOTTOM-COLOR:#ae8e90;BORDER-TOP-COLOR:#ae8e90;BORDER-RIGHT-COLOR:#ae8e90;.pic1border:1px solid#fff;padding:5px;.pic1border:3px double#cccccc;,（四）通过CSS定义图片样式,（2）图片大小 imgwidth:数值；height：数值；（3）保证图片不变形 max-width 图片大小用百分比，实现“缩放”（4）对齐方式 横向：靠外层元素定位 纵向：vertical-align:参数,（四

12、）通过CSS定义图片样式,2.设置图文交互效果文字环绕效果float属性 float:left|right|none;padding属性 padding:top数值 right数值 bottom数值 left数值;顺时针：上 右 下 左 范例4-1：图文环绕+图文间距,（四）通过CSS定义图片样式,浮动广告 position:fixed 范例4-2：浮动广告,（四）通过CSS定义图片样式,3.背景颜色和背景图像背景颜色 background-color:颜色背景图像（1）background-image:url(图片路径);（2）background-repeat:repeat-x|repeat-y|no-repeat;（3）background-position:长度值|百分比值|top|left|bottom|right|center;（4）background-attachment:scroll|fixed;,（四）通过CSS定义图片样式,body background-image:url(images/pic.gif);background-repeat:no-repeat;background-position:right bottom;,（四）通过CSS定义图片样式,（五）通过CSS定义表格样式,表格颜色、边框、大小、对齐方式跟其它元素样式设置方法类似,