信息技术 PPT02-2CSS基本语法入门(快速)

一.CSS基本语法入门,韩山师范学院教育科学学院,CSS快速入门,关键内容：（1）CSS语法、选择器类型及虚类（2）不同选择器类的应用方式类自动，ID认名字，标签和虚类自动（3）引入方式（即样式代码写在什么位置）（4）DW图形化样式设置-写“样式代码”文本：字体、大小、颜色、行高、对齐等列表：链接：的四种状态，display:block变成“块”图片：边框、边框样式、边框宽度、大小环绕方式：float浮动、padding内边距、position：fixed,1.CSS概念CSS:CascadingStyleSheets层叠（级联）样式表，习惯叫CSS样式表CSS是层叠样式表，多重样式定义被层叠在一起成为一个整体，在网页设置中是标准的布局语言，用来控制元素的尺寸、颜色和排版等。使用样式表：将“网页结构代码”和“网页格式风格代码”分离，从而使网页设计者可以对网页的布局进行更多的控制。,(一)CSS基础知识介绍,2.CSS的基本语法一个样式（style）由selector选择器、property属性和value属性值三部分组成，形式如下：selectorproperty:value在selector大括号里，使用属性名和属性值参数对来定义选择器里面的样式。多个属性和属性值，中间用分号隔开。selectorproperty1:value1；property2:value2selectorproperty1:value1；property2:value2selectorproperty1:value1；property2:value2；,(一)CSS基础知识介绍,2.1CSS选择器HTML选择器、Class选择器、ID选择器（1）HTMLselector：指HTML标签（2）classselector：“.类名”定义，使用HTML标签的class属性值的选择器（3）IDselector：“#ID名”定义，使用HTML标签的ID属性定义的选择器，一个网页文件中只能有一个元素使用某一个ID的属性值，即ID名不能重复（可以理解为元素的名字）id，name属性：以前用name，现在习惯用id,(一)CSS基础知识介绍,虚类(伪类)选择器即链接的4种状态a:link(a)a:visiteda:activea:hover,(一)CSS基础知识介绍,一般情况下建议所有定义名称都用小写例子1-1了解三种选择器的应用方式（包括虚类）重点，理解应用方式,(一)CSS基础知识介绍,2.2选择器声明集体声明和嵌套声明（1）集体声明（并列）例子：h1,h2,h3,h4,pcolor:red;,(一)CSS基础知识介绍,（2）嵌套声明（包含）一定要掌握它的含义，虽然不难。对特殊位置的HTML标签进行声明，例子：,(一)CSS基础知识介绍,例子1：Pbcolor:blue;font-family:arial,例子2:区别？acolor:blue;.list1acolor:red;,3.CSS的引入方式(1)CSS代码直接添加到HTML标签里，style属性：内联式test(2)放在头部块里：嵌入式.(3)链接样式表：链接式,(一)CSS基础知识介绍,当页面存在多个（多种）样式时（1）冲突，则“就近使用”原则（2）不冲突，则同时起作用,(一)CSS基础知识介绍,4.CSS里的单位和值颜色：推荐使用十六进制长度单位：绝对单位（in、cm、mm、pt）和相对单位（em、ex、px），px使用较多网页路径：绝对路径和相对路径“/”:根root,(一)CSS基础知识介绍,例子1-2CSS基本语法的演练,巩固练习,（二）通过CSS控制字体样式,1.通过CSS控制文本样式字体样式font:font-stylefontvariantfont-weightfont-sizefont-family颜色color:颜色例子：test字体font:font-sizefont-family(1)pfont:italic12px宋体(2)pfont-family:宋体；font-size:12px范例：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-spacing:数值这里的间距这里的间距这里的间距留意负值（-）的效果对齐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字体样式综合演练,巩固练习,（三）通过CSS定义链接样式,主要学习内容：（1）为超链接定义CSS伪类属性的方法（2）超链接效果（3）通过CSS定义列表的方法,1.基本概念添加超链接后，有其特殊样式CSS伪类（虚类）a:linka:visiteda:activea: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.定义图片样式（1）图片边框border:类型宽度颜色;boder-style:参数；border-width：数值；border-color：参数；边框线类型boder-style常用参数：none:无边框线dotted:由点组成的虚线dashed:由短线组成的虚线solid:实线边框double:双线边框,（四）通过CSS定义图片样式,边框线宽度border-width可以自定义像素宽度如1pt、5px、2cm等，也以选择边框线宽度的三个标准值：thin（细线）、medium（中粗线）和thick（粗线）.pic1border:3pxdouble#bfbfbf;A:hover.pic1BORDER-LEFT-COLOR:#ae8e90;BORDER-BOTTOM-COLOR:#ae8e90;BORDER-TOP-COLOR:#ae8e90;BORDER-RIGHT-COLOR:#ae8e90;.pic1border:1pxsolid#fff;padding:5px;.pic1border:3pxdouble#cccccc;,（四）通过CSS定义图片样式,（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-attachment:s