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

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

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

3、； property2:value2 selectorproperty1: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

4、名不能重复（可以理解为元素的名字） id，name属性：以前用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）嵌套声明（包含） 一定要掌握它的含义，虽然不难。对特殊位置

5、的HTML标签进行声明，例子：,(一)CSS基础知识介绍,例子1： P b 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、

6、cm、mm、pt）和相对单位（em、ex、px），px使用较多 网页路径：绝对路径和相对路径 “/”:根 root,(一)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 范例

7、：2-1 字体颜色+字体设置,粗细和斜体 font-weight:100-900|bold|bolder|lighter|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-spacin

8、g:数值 这里的间距 这里的间距 这里的间距 留意负值（-）的效果 对齐 text-align:left|right|center|justify,（二）通过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字体样式综合演练,巩固练习

9、,（三）通过CSS定义链接样式,主要学习内容： （1）为超链接定义CSS伪类属性的方法 （2）超链接效果 （3）通过CSS定义列表的方法,1.基本概念 添加超链接后，有其特殊样式 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定义图

10、片样式,主要学习内容： （1）CSS定义图片样式的方法 （2）CSS设置图文交互效果的方法 （3）CSS设置背景图片的方法 （4）CSS处理背景图片样式的方法,1. 定义图片样式 （1）图片边框 border:类型 宽度 颜色; boder-style: 参数； border-width：数值； border-color：参数； 边框线类型 boder-style常用参数： none:无边框线 dotted:由点组成的虚线 dashed:由短线组成的虚线 solid:实线边框 double:双线边框,（四）通过CSS定义图片样式,边框线宽度border-width 可以自定义像素宽度如1pt、

11、5px、2cm等，也以选择边框线宽度的三个标准值：thin（细线）、medium（中粗线）和thick（粗线） .pic1 border: 3px double #bfbfbf; A:hover .pic1 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定义图

12、片样式,（2）图片大小 imgwidth:数值；height：数值； （3）保证图片不变形 max-width 图片大小用百分比，实现“缩放” （4）对齐方式 横向：靠外层元素定位 纵向：vertical-align:参数,（四）通过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-attac