详细速成教程.pptx
《详细速成教程.pptx》由会员分享,可在线阅读,更多相关《详细速成教程.pptx(63页珍藏版)》请在咨信网上搜索。
1、CSSCSS专题专题CSS在页面风格设计中的作用在页面风格设计中的作用CSS语法基础语法基础用用DIV+CSS的方式来写的方式来写HTML页面页面用用CSS设置图像样式扮靓网页设置图像样式扮靓网页CSS与与XML的综合运用的综合运用CSS简介简介一、一、CSSCSS简介简介lCSSCascading Style SheetCascading Style Sheet层叠样式表层叠样式表l样式格式,对于网页来说,像网页显示的文字的大小、颜色以格式,对于网页来说,像网页显示的文字的大小、颜色以及图片位置以及段落、列表等,都是网页显示的样式。及图片位置以及段落、列表等,都是网页显示的样式。l层叠HTM
2、LHTML文件引用多个文件引用多个CSSCSS样式时,如果样式时,如果CSSCSS的定义发生冲突,的定义发生冲突,浏览器将依据层次的先后顺序来应用样式,如果不考虑样浏览器将依据层次的先后顺序来应用样式,如果不考虑样式的优先级时,一般会遵循式的优先级时,一般会遵循“最近优选原则最近优选原则”。二、二、CSSCSS在页面风格设计中的作用在页面风格设计中的作用l网页的标准网页的标准网页主要由网页主要由3 3个部分组成:个部分组成:结构(Structure)表现(Presentation)行为(Behavior)在一个网页中,分若干个组成部分,包括各级标题、正文段落、各种在一个网页中,分若干个组成部分
3、,包括各级标题、正文段落、各种列表结构等,这就构成了一个网页的列表结构等,这就构成了一个网页的“结构结构”。网页各组成部分的字号、字体和颜色等属性就构成了它的网页各组成部分的字号、字体和颜色等属性就构成了它的“表现表现”。网页与用户的交互网页与用户的交互二、二、CSSCSS在页面风格设计中的作用在页面风格设计中的作用l网页标准的涵义:网页标准的涵义:“结构”决定了网页“是什么”“表现”决定了网页看起来是“什么样子”“行为”决定了网页“做什么”l网页标准对应的技术:网页标准对应的技术:(X)HTML决定网页的结构和内容CSS设定网页的表现样式JavaScript控制网页的行为lCSSCSS的核心
4、目的:的核心目的:实现网页结构内容和表现形式的分离,将原来由HTML语言所承担的一些与结构无关的功能剥离出来,改由CSS来完成。三、三、CSSCSS语法基础语法基础lCSSCSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行设置,然后指定进行设置,然后指定对该对象的哪个方面的对该对象的哪个方面的“属性属性”进行设置,最后给出该设置进行设置,最后给出该设置的的“值值”。lCSSCSS规则的构造规则的构造对象属性值三、三、CSSCSS语法基础语法基础l样式表规则的组成:样式表规则的组成:选择符(selector)l决定哪些因素要受到影响声明(declaration)l一个或多个属
5、性值对组成基本语法:lselector属性:属性值;属性:属性值语法说明:selector表示希望进行格式化的元素;声明部分包括在选择器后的大括号中;用“属性:属性值”描述要应用的格式化操作;声明中的多个属性值对之间必须用分号隔开。三、三、CSSCSS语法基础语法基础l选择器(选择器(selectorselector)CSS的对象是很重要的,它指定了对哪些网页元素进行设置,因此,它有一个专门的名称选择器(selector)类型:l普通选择器l复合选择器标签三、三、CSSCSS语法基础语法基础l普通选择器普通选择器标签选择器标签选择器标签pfont-size:16px;color:red;三、三
6、、CSSCSS语法基础语法基础l普通选择器普通选择器类别选择器类别选择器.biaotifont-size:16px;color:red;普通文字普通文字赋于标记符类所产生的格式赋于标记符类所产生的格式类选择器所定义的格式类选择器所定义的格式三、三、CSSCSS语法基础语法基础l普通选择器普通选择器IDID选择器选择器#biaotifont-size:16px;color:red;普通文字普通文字赋于标记符赋于标记符id所产生的格式所产生的格式ID选择器所定义的格式选择器所定义的格式三、三、CSSCSS语法基础语法基础l复合选择器复合选择器交集选择器交集选择器p/*标记选择器标记选择器*/col
7、or:blue;p.Special/*标记标记.类别选择器类别选择器*/color:red;.special/*类别选择器类别选择器*/color:green;普通段落文本(蓝色)普通段落文本(蓝色)普通标题文本(黑色)普通标题文本(黑色)指定了指定了.special类别的段落文本(红色)类别的段落文本(红色)指定了指定了.special类别的标题文本(绿色)类别的标题文本(绿色)三、三、CSSCSS语法基础语法基础l复合选择器复合选择器并集选择器并集选择器并集选择器并集选择器/*/*并集并集选择器器*/*/*集体声明集体声明*/h1,h2,h3,h4,h5,ph1,h2,h3,h4,h5,p
8、 color:purple;color:purple;font-size:15px;font-size:15px;h2.special,.special,#oneh2.special,.special,#one text-decoration:underline;text-decoration:underline;示例文字示例文字h1 示例文字示例文字h2 示例文字示例文字h3 示例文字示例文字h4 示例文字示例文字h5 示例文字示例文字p1 示例文字示例文字p2 示例文字示例文字p3三、三、CSSCSS语法基础语法基础l复合选择器复合选择器后代后代选择器选择器后代选择器后代选择器/*/*嵌套
9、声明嵌套声明*/p spanp span color:red;color:red;spanspan color:blue;color:blue;嵌套使嵌套使用用CSSCSS(红色)(红色)标记的方法标记的方法 嵌套之外的嵌套之外的标记(蓝色)标记(蓝色)不生效不生效三、三、CSSCSS语法基础语法基础l继承继承是CSS的一个主要特征,许多CSS属性不但影响选择符所定义的元素,而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。CSS的继承性的继承性CSS的的继承性继承性 三、三、CSSCSS语法基础语法基础l样式表的定义与使用样式表的定义与使用直接定义标记的直接定
10、义标记的stylestyle属性属性定义内部样式表定义内部样式表嵌入外部样式表嵌入外部样式表链接外部样式表链接外部样式表import url(style.css);一段话一段话三、三、CSSCSS语法基础语法基础示例示例ID和类的定义和类的定义 此段文字以默认方式显示此段文字以默认方式显示 此段文字以此段文字以16像素大小,红色字体显示像素大小,红色字体显示 此段文字以此段文字以26像素大小,玫红色字体显示像素大小,玫红色字体显示 三、三、CSSCSS语法基础语法基础字体字体lcolor color 字体颜色字体颜色lfont-size font-size 字号字号 lfont-family
11、font-family 字体字体lfont-style font-style 字体样式字体样式normal|italic|oblique(歪斜体)lfont-weight font-weight 字体加粗字体加粗normal|bold|bolder|lighter|100|200|300 lfont-variant font-variant 字体变体字体变体font-variant:normal|small-caps(小型的大写字母)ltext-decoration text-decoration 文字效果属性文字效果属性none|underline|blink|overline|line-t
12、hrough lfont font 综合字体属性综合字体属性font-style font-weight font-variant font-size/line-height font-family三、三、CSSCSS语法基础语法基础字体排版字体排版ltext-indent text-indent 首行缩进属性首行缩进属性normal|长度单位lletter-spacing letter-spacing 字符间距属性字符间距属性normal|长度单位lline-height line-height 行距属性行距属性normal|比例|长度单位|百分比ltext-align text-align
13、 水平对齐属性水平对齐属性left|right|center|justifyltext-transform text-transform 转换英文大小写转换英文大小写uppercase|lowercase|capitalize|none三、三、CSSCSS语法基础语法基础背景颜色背景颜色lbackground-colorbackground-color:关键字:关键字|RGB|RGB值值|transparent|transparentlCSSCSS则有四种定义颜色的方法:则有四种定义颜色的方法:十六进制数RGB函数(整数)RGB函数(百分比)颜色名称三、三、CSSCSS语法基础语法基础背景颜色
14、背景颜色 背景颜色的属性背景颜色的属性 此行文字以红色背景显示此行文字以红色背景显示n 此行文字以黄色背景显示此行文字以黄色背景显示 三、三、CSSCSS语法基础语法基础背景颜色背景颜色三、三、CSSCSS语法基础语法基础背景图片背景图片lbackground-imagebackground-image:插入背景图片插入背景图片lbackground-attachment:background-attachment:插入背景附件插入背景附件lbackground-repeat:background-repeat:设置重复背景图片设置重复背景图片lbackground-position:back
15、ground-position:设置背景图片位置设置背景图片位置background-imagebackground-image插入背景图片插入背景图片 lbackground-imagebackground-image设置背景图片设置背景图片基本语法:background-image:url|none语法说明:url表示要插入背景图片的路径,路径可以是绝对路径也可以是相对路径,none表示不加载图片。background-attachmentbackground-attachment插入背景附件插入背景附件lbackground-attachmentbackground-attachment
16、背景附件属性是用来设置背景图片是背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。否随着滚动条的移动而一起移动。基本语法:background-attachment:scroll|fixed语法说明:scroll表示背景图片是随着滚动条的移动而移动,是浏览器的默认值;fixed表示背景图片固定在页面上不动,不随着滚动条的移动而移动。background-repeatbackground-repeat设置重复背景图片设置重复背景图片 lbackground-imgbackground-img属性设置网页的背景图片重复显示方式。属性设置网页的背景图片重复显示方式。基本语法:backgr
17、ound-repeat:repeat|repeat-x|repeat-y|no-repeat语法说明:repeat表示背景图片在水平和垂直方向平铺,是默认值;repeat-x表示背景图片在水平方向平铺;repeat-y表示背景图片在垂直方向平铺;no-repeat表示背景图片不平铺。background-positionbackground-position设置背景图片位置设置背景图片位置l当在网页中插入背景图片时,每一次插入的位置,都是位于网页的左上当在网页中插入背景图片时,每一次插入的位置,都是位于网页的左上角,所以通过角,所以通过background-positionbackground
18、-position属性来改变图片的插入位置。属性来改变图片的插入位置。基本语法:background-position:百分比|长度|关键字语法说明:利用百分比和长度来设置图片位置时,都要指定两个值,并且这两个值都要用空格隔开。一个代表水平位置,一个代表垂直位置。水平位置的参考点是网页页面的左边,垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right,关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。三、三、CSSCSS语法基础语法基础盒子盒子的概念与使用的概念与使用l盒子模块盒子模块 l设置边界设置边界 l设置元
19、素边框设置元素边框 l设置元素内边界设置元素内边界 盒子模块盒子模块l在在CSSCSS中,将样式调用在每一个元素上,都以一个假想的矩形中,将样式调用在每一个元素上,都以一个假想的矩形格式模型看待格式模型看待 .一般使用矩形模块的时候,搭配一般使用矩形模块的时候,搭配marginmargin属性、属性、borderborder属性以及属性以及paddingpadding属性,可以更好的控制元素的样式。属性,可以更好的控制元素的样式。设置边界设置边界 lmarginmargin的四个属性主要是控制元素边界与文件其他内容的空的四个属性主要是控制元素边界与文件其他内容的空白距离,四个边界一般按顺时针方
20、向上(白距离,四个边界一般按顺时针方向上(margin-topmargin-top)、右)、右(margin-rightmargin-right)、下()、下(margin-bottommargin-bottom)、左()、左(margin-margin-leftleft)属性。四个边界的设置语法一样。)属性。四个边界的设置语法一样。基本语法:margin-(top、right、bottom、left):长度单位|百分比单位|auto设置元素边框设置元素边框 lborder-styleborder-style边框样式属性边框样式属性lborder-widthborder-width边框宽度属性
21、边框宽度属性lborder-colorborder-color边框色彩属性边框色彩属性lborderborder属性的综合设置属性的综合设置border-styleborder-style边框样式属性边框样式属性l利用边框样式属性不仅可以设置单位边框样式属性,还可以利用边框样式属性不仅可以设置单位边框样式属性,还可以对单位边框进行设置,而且也可以利用复合边框样式属性来对单位边框进行设置,而且也可以利用复合边框样式属性来统一设置四条边框的样式。统一设置四条边框的样式。基本语法:border-style:样式值border-top-style:样式值border-bottom-style:样式值b
22、order-left-style:样式值border-right-style:样式值border-styleborder-style边框样式属性边框样式属性语法说明:语法说明:border-style是一个复合属性,复合属性的值有四种设置方法,其他4个都是单个边框的样式属性,只能取一个值。样式值属性的具体说明见表10-8。设置一个值:四条边框宽度均使用一个值。设置两个值:上边框和下边框宽度调用第一个值,左边框和右边框宽度调用第二个值。设置三个值:上边框宽度调用第一个值,右边框与左边框宽度调用第二个值,下边框调用第三个值。设置四个值:四条边框宽度的调用顺序为上、右、下、左。border-widt
23、h边框宽度属性lborder-widthborder-width属性,是控制元素边框的宽度的一个综合属性,属性,是控制元素边框的宽度的一个综合属性,和和border-styleborder-style一样也有四种单独的设置方法,分别来定义一样也有四种单独的设置方法,分别来定义四条边框的宽度,设置方法和边框样式一样。四条边框的宽度,设置方法和边框样式一样。基本语法:border-width边框宽度属性语法说明:thin、medium、thick分别表示细、中等、粗,length表示长度单位 border-colorborder-color边框色彩属性边框色彩属性lborder-colorbord
24、er-color属性是用来控制边框显示的颜色,和边框宽度、属性是用来控制边框显示的颜色,和边框宽度、边框样式的设置方法一样,也可以分别来设置每个边框的颜边框样式的设置方法一样,也可以分别来设置每个边框的颜色色 .基本语法:border-color:颜色关键字|RGB值 border-top-color:颜色关键字|RGB值 border-bottom-color:颜色关键字|RGB值border-left-color:颜色关键字|RGB值border-right-color:颜色关键字|RGB值borderborder属性的综合设置属性的综合设置l在在CSSCSS中,中,borderborde
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 详细 速成 教程
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【天****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【天****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。