BTC-CS-HTML-01-第5章-CSS基础知识-课件.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《BTC-CS-HTML-01-第5章-CSS基础知识-课件.pptx》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- BTC CS HTML 01 CSS 基础知识 课件
- 资源描述:
-
1、第第5 5章章 CSSCSS基础知识基础知识本章目标本章目标u了解了解CSSCSS的概念及发展史的概念及发展史u掌握掌握CSSCSS的基本语法的基本语法u掌握掌握CSSCSS选择器选择器u掌握掌握CSSCSS创建方法创建方法u掌握掌握CSSCSS常用属性,并灵活运用这些属性设计页面样式常用属性,并灵活运用这些属性设计页面样式2CSSCSS概述概述uCSSCSS简介简介lCSS(Cascading Style Sheets,层叠样式表,也称作级联样式表)l用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。l1996年通过W3C审核认证,并推荐使用。lCSS解决了网页界面排版布局的难
2、题。HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)3CSSCSS概述概述uCSSCSS发展史发展史lCSS经历了CSS1、CSS2、CSS2.1、CSS3,CSS3是正在进行中的标准。l1996年12月17日,CSS1正式推出,CSS1中主要定义了具体的颜色、字体、文本样式、外边距、边框、背景等最基本的样式。l1998年5月12日,CSS2正式推出,CSS2定义了许多高级特性(如,浮动和定位)以及一些高级的选择器(如,子选择器、相邻同胞选择器、通用选择器)。l 2010 年,推出了一个全新的版本CSS3。CSS3是CSS规范的最新版本。
3、4CSSCSS概述概述u CSS CSS特点特点 在制作网页时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改,就可以改变网页的外观和格式。可以用多套样式,使网页有任意样式切换的效果。降低服务器的成本等。5CSSCSS概述概述u CSS CSS优势优势l页面表现力加强pHTML标签的外观样式比较单一。字体颜色只有黑白,字体类型和大小无变化,而CSS可以更加精确地控制网页内容的格式。l提高页面浏览速度p传统的HTML中控制网页布局样式比较麻烦,倘若引入CSS网页布局将会事半功倍,大大缩减页面代码,提高页面浏览速度,缩减带宽成本
4、。l内容与样式的分离p将设计部分剥离出来放在一个独立样式文件中,可以减少网页无效的可能,缩短改版时间,只要简单地修改几个CSS文件就可以重新设计一个有成百上千页面的站点,方便团队开发。6CSSCSS语法语法uCSSCSS基本基本语法语法lCSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。7选择器(Selector)Property:Value;属性1 :属性1的值;属性2 :属性2的值;.CSSCSS语法语法uCSSCSS基本基本语法语法l选择器(Selector)指这组样式编码所要针对的对象。可以是一个HTML标签,如body、h1;也可以是定义了特定id或class的标签。l属
5、性(Property)指这组样式要设置对象的属性样式。对于每一个HTML标签,CSS都提供了丰富的属性样式,如颜色、大小、定位、浮动方式等。l值(Value)是指属性的值。形式有两种,一种是指定范围的值,如float属性,只能用left、right、none三种值;另一种为数值,如width能够使用09999px或其他数学单位来指定。8body background-color:red;CSSCSS语法语法uCSSCSS注释注释l注释即代码的解释和说明,一般放在代码的上方或者尾部。lCSS注释以“/*”开始,以“*/”结束。9/*这是多行注释,CSS文件名为:test.css功能描述:定义样式
6、*/*单行注释 样式规则 应用于段落*/p background-color:red;/*行尾注释 定义背景颜色*/font-size:10px;/*行尾注释 定义字体大小*/color:black;/*行尾注释 定义字体颜色*/CSSCSS语法语法uCSSCSS编辑方式编辑方式l主要有两种:l第一种是在HTML文件中直接编写CSS规则;p在指定的某个元素的style属性直接赋值;p在head标记对中,通过style标记包含。l第二种是在单独的文件中编写CSS规则,然后在需要使用此应用规则的HTML文件中引用此CSS文件。p在单独的文件中编写CSS规则,这种文件我们称之为CSS文件,是一个纯文
7、本文件,文件的后缀名为.css。p在使用此应用规则的HTML文件中引用此CSS文件即可,实现了内容与样式的分离。10CSSCSS语法语法uCSSCSS语法案例语法案例11 my first page /*选择了页面中的body元素作为操作对象*/body/*属性和属性值,设定网页的背景色为红色*/background-color:red 山东浪潮优派科技教育有限公司欢迎您.CSSCSS语法语法uCSSCSS编写编写规范规范lCSSCSS属性书写规范属性书写规范:p书写顺序按照元素模型由外及内,由整体到细节书写p属性写在一行内时,属性之间、属性名和值之间以及属性与“”之间应减少空格,去掉最后一个
8、“;”p使用CSS缩写属性,CSS有些属性是可以缩写的。12例如:padding,margin,font等复合属性例如:.classwidth:200px;height:100px。位置-大小-文字系列-背景-其他 CSSCSS选择器选择器uCSSCSS选择器主要选择器主要有有l标签选择器lid选择器l类选择器l伪类选择器l属性选择器l后代选择器l子元素选择器l相邻兄弟选择器等13CSSCSS选择器选择器u标签标签选择选择器器lCSS标签选择器用来声明哪些标签采用哪种CSS样式。l标签的名称作为相应的标签选择器的名称。14 h1 color:red;font-size:25px;说明:设置标记
9、字体的颜色,页面中所有标记的字体都会以红色显示CSSCSS选择器选择器u类类选择器选择器l类选择器由句点“.”及class属性值直接相连组成。15.类选择器类选择器/*CSS规则;*/说明:在标记中定义class属性,用户可以将class的属性值“a1”作为CSS的类选择器使用。.a1 color:yellow;font-weight:bold;类选择器CSSCSS选择选择器器uidid选择选择器器l使用HTML标记的id属性作为CSS选择器lid选择器前面有一个“#”号,也称之为棋盘号或井号16#id选择器/*CSS规则;*/。#a2color:#99FF66;font-size:20px;
10、ID选择器CSSCSS选择选择器器u伪类选择伪类选择器器l伪类是指通过元素的基本特征对元素进行分类,而不是通过元素的名字、属性等进行分类。l伪类通过冒号”:”来定义,它定义了元素的状态,如:点击按下,点击完成等l语法格式17标记:伪类名/*CSS规则*/CSSCSS选择选择器器u伪类选择伪类选择器器l常用伪类18伪类名描述link设置a标记在未被访问前的样式hover设置a标记在鼠标悬停时的样式active设置a标记在鼠标点击时的样式visited设置a标记在被访问后的样式first-letter作用于块,设置第一个字符的样式first-line作用于块,设置第一个行的样式表first-chi
11、ld设置第一个子标记的样式lang设置具有lang属性的标记的样式CSSCSS选择选择器器u伪类选择伪类选择器器l示例19伪类选择器a:linkcolor:#0FF;a:visitedcolor:#999;a:hovercolor:#F00;a:activecolor:#333;p:first-letterfont-weight:bolder;color:#F00;p:first-linefont-size:16px;color:#0F0;在支持CSS的浏览器中,链接不同的状态都可以以不同的方式显示,这些状态包括:活动状态、未被访问状态、已被访问状态、鼠标悬停状态 注意:伪类选择器的使用时机,
12、a:hover必须放置在a:visited和a:link之后才是有效的。a:active必须放在a:hover之后才会有效。百度搜索注意:伪类选择器的使用时机,a:hover必须防止在a:visited和a:link之后才是有效的。a:active必须放在a:hover之后才会有效。CSSCSS选择选择器器u属性选择属性选择器器l性选择器可以根据元素的属性及属性值来选择元素。l语法格式20 属性/*CSS规则*/title color:red;可以应用样式:Hello world百度 CSSCSS选择选择器器u属性选择属性选择器器l可以只对某一元素()的属性(href)的应用样式。l可以根据多
13、个属性进行选择,只需将属性选择器链接在一起即可。21ahreftitle color:red;ahref color:red;CSSCSS选择选择器器u后代后代选择器选择器l后代选择器是根据文档的上下文关系来确定某个标签的样式。l选择器一端包括两个或多个用空格分隔的选择器l语法格式:22标签 子标签/*CSS规则*/li strong font-style:italic;font-weight:normal;CSSCSS选择选择器器u子元素子元素选择器选择器l子元素选择器只能选择作为某元素子元素的元素。l子选择器时使用大于号“”。l语法格式:23元素 子元素/*CSS规则*/*只选择h2元素的
14、子元素strong元素*/h2 strong color:red;CSSCSS选择选择器器u相邻兄弟相邻兄弟选择器选择器l相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。l相邻兄弟选择器使用加号(+)连接。l语法格式:24元素1+元素2/*CSS规则*/*h1和p元素拥有共同的父元素*/h1+p color:red;CSSCSS选择选择器器u选择器选择器选择器选择器l选择器分组实际上是标签选择器的升级,我们可以将多个标签选择器组合在一起共同使用某一些样式。l选择器之间使用逗号“,”分隔。l语法格式:25元素1,元素2/*CSS规则*/*no grouping*/h1 color
15、:blue;h2 color:blue;h3 color:blue;h4 color:blue;h5 color:blue;h6 color:blue;/*grouping*/h1,h2,h3,h4,h5,h6 color:blue;CSSCSS选择选择器器u选择器的应用选择器的应用范例范例26 CSS选择器综合案例 /*设置id属性值为title的标签的样式规则*/#title1 font-size:40px;text-align:center;font-weight:bolder;color:brown;/*设置class属性值为title的h2标签的样式规则*/h2.title2 fon
16、t-weight:100;text-align:center;color:yellow;/*设置网页body标签的样式规则*/body background-color:orange;/*设置class属性值为graph的p标签的样式规则 */p.graph font-size:23px;color:red;text-align:center;选择器的应用范例 上元夫人 上元谁夫人,偏得王母娇。嵯峨三角髻,余发散垂腰。裘披青毛锦,身著赤霜袍。手提嬴女儿,闲与凤吹箫。眉语两自笑,忽然随风飘。CSSCSS创建创建u添加添加CSSCSS有四种方式有四种方式:l内联样式l内部样式表l链接外部样式l导入
17、外部样式表。27CSSCSS创建创建u内联内联样式样式l内联样式是所有样式应用方式中最为直接的一种,它通过对HTML标记使用style属性,将CSS代码直接写在其中。28实例内容1实例内容2 实例内容3CSSCSS创建创建u内联样式内联样式l特点p内联样式是混合在HTML标记里使用的,可以很简单地对某个元素单独定义样式,它主要在body内实现。p内联样式是最简单、最直接的CSS使用方法,但它的针对性也很明显。p只能作用于当前页面中的标记,造成代码冗余,维护起来比较困难。29CSSCSS创建创建u内部样式内部样式表表l内部样式表一般位于HTML文件的头部,即与标签内,并且以开始,以结束。30Pc
18、olor:#0066FF;CSSCSS创建创建u内部样式内部样式表表l特点p将CSS代码集中放在标记中,这样方便查找,对后期维护也比较方便,代码页面也会减少。p如果多个网页的某个标记使用相同的样式效果,内部样式也会出现代码冗余和维护困难的问题。p内部样式比较适合个别风格特殊页面的效果设置31CSSCSS创建创建u链接外部链接外部样式表样式表l链接外部样式表是最常见的,也是效果最好的。l链接外部样式表的特点是将CSS代码单独放在一个或多个.css文件中l需要时在标记对之间使用标记的相关属性指明外部CSS文件的路径,并应用在当前网页元素上。32CSSCSS创建创建u链接外部链接外部样式表样式表l特
19、点:p将CSS代码和HTML代码分离,这样就可以实现将一个CSS文件链接到不同的HTML网页中。p将多个页面都会用到的CSS样式定义在一个或多个.css文件中,然后在需要用到该样式的HTML网页中通过标记链接这些.css文件,通过链接式CSS可以降低整个网站的页面代码冗余,并提高网站的可维护度。p最适合大型网站的CSS样式定义。33CSSCSS特性特性u层叠层叠性性lCSS的层叠性是指,在权重(优先级)相同的情况下,同一个标签的样式发生冲突,最后设置的样式会层叠(覆盖)之前的样式。p注意:与定义样式的顺序有关,与调用的顺序无关。34div width:200px;height:200px;te
20、xt-align:center;background:black;/*样式的定义顺序为div1 div2*/*样式1*/.div1 color:red;/*样式2*/.div2 color:blue;山东浪潮优派科技教育有限公司CSSCSS特性特性u继承性继承性lCSS的继承性是指,发生在有嵌套关系的元素中。p如果子元素没有设置样式,那么该子元素会继承父元素的中可被继承的样式。p只有部分样式能继承,一些特殊的标签不会受父元素字体样式的影响35 div width:200px;height:200px;text-align:center;background:black;/*样式的定义顺序为di
21、v1 div2*/*样式1*/.div1color:red;/*样式2*/.div2color:blue;山东浪潮优派科技教育有限公司 是浪潮集团旗下专门从事IT教育的产业单位 CSSCSS特性特性u特殊性(优先级特殊性(优先级)lCSS的特殊性也可以称之为CSS的优先级p多个选择器定义的样式发生冲突,则CSS按选择器的优先级,让元素应用优先级高的选择器样式。p选择优先级从高到低为:内联样式id选择器样式类选择器别样式标签选择器样式。36 /*样式1*/.div1color:red;山东浪潮优派科技教育有限公司 CSSCSS常用属性常用属性u常用的样式常用的样式规则:规则:lCSS字体lCSS
22、文本lCSS颜色和背景lCSS列表lCSS表格lCSS轮廓等。37CSSCSS常用属性常用属性uCSSCSS字体字体l常用font子属性38属性属性值描述font-size绝对大小|相对大小|百分数|具体某个值(单位:pt|px|in)设置字体大小font-family宋体,黑体设置字体类型font-weightnormal设置字体常规格式显示lighter设置字体加粗bold设置字体加粗bolder设置字体特粗font-stylenormal设置字体常规式显示italic设置字体为斜体oblique与italic效果一样CSSCSS常用属性常用属性uCSSCSS字体字体lfont-famil
23、y属性:设置字体。l语法:l说明:pfont-family属性可以同时声明多种字体,字体之间用逗号(,)隔开。如果字体的名称中出现了空格,必须使用双引号将字体名称引起来,比如 Times New Roman39font-family:字体1,字体2,.,字体n;Pfont-family:SimSun,Microsoft YaHei;CSSCSS常用属性常用属性uCSSCSS字体字体lfont-size属性:字体的大小。l语法:l说明:p绝对大小:可以使用in、cm、mm、pt、pc等单位作为font-size的属性值p相对大小:可以使用em、ex、px、%等单位作为font-size的属性值p
24、length:可采用百分比或长度值,不可为负值,其百分比取值是基于父对象中字体的尺寸,建议使用相对单位定义字号40font-size:length(绝对大小|相对大小);CSSCSS常用属性常用属性uCSSCSS字体字体lfont-size属性值关键字。41属性值描述xx-small绝对字体尺寸,最小x-samll绝对字体尺寸,较小small绝对字体尺寸,小medium绝对字体尺寸,正常默认值。Large绝对字体尺寸,大X-large绝对字体尺寸,较大xx-large绝对字体尺寸,最大large相对字体尺寸,相对于父对象中字体尺寸进行相对增大CSSCSS常用属性常用属性uCSSCSS字体字体l
展开阅读全文