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

上传人:小飞机 文档编号:4647579 上传时间:2023-05-03 格式:PPT 页数:30 大小:228.51KB
返回 下载 相关 举报
PPT02-2CSS基本语法入门(快速).ppt_第1页
第1页 / 共30页
PPT02-2CSS基本语法入门(快速).ppt_第2页
第2页 / 共30页
PPT02-2CSS基本语法入门(快速).ppt_第3页
第3页 / 共30页
PPT02-2CSS基本语法入门(快速).ppt_第4页
第4页 / 共30页
PPT02-2CSS基本语法入门(快速).ppt_第5页
第5页 / 共30页
点击查看更多>>
资源描述

《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定义表格样式,表格颜色、边框、大小、对齐方式跟其它元素样式设置方法类似,

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号