书签 分享 收藏 举报 版权申诉 / 78
上传文档赚钱

类型BTC-CS-HTML-01-第5章-CSS基础知识-课件.pptx

  • 上传人(卖家):三亚风情
  • 文档编号:3376617
  • 上传时间:2022-08-25
  • 格式:PPTX
  • 页数:78
  • 大小:2.06MB
  • 【下载声明】
    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

    25、font-size属性示例42CSS字体属性-设置字体大小 pfont-family:宋体;.p1font-size:10px;.p2font-size:20px;.p3font-size:200%;.p4font-size:x-large;自古无鱼不成宴。自古无鱼不成宴。自古无鱼不成宴。自古无鱼不成宴。CSSCSS常用属性常用属性uCSSCSS字体字体lfont-style属性:字体的样式。l语法:lfont-style具体取值:43font-style:字体样式的取值;属性值描述normal默认的正常字体italic以斜体显示文字oblique属于中间状态,以偏斜体显示CSSCSS常用属性

    26、常用属性uCSSCSS字体字体lfont-style属性示例:44CSS字体属性-设置字体风格 .p1 font-style:normal;.p2 font-style:italic;.p3 font-style:oblique;设置字体风格为normal 设置字体风格为itailc 设置字体风格为obliqueCSSCSS常用属性常用属性uCSSCSS字体字体lfont-weight属性:字体的粗细。l语法:lfont-weight属性取值:45font-weight:字体粗细取值;属性值描述normal默认的正常字体bold标准粗体bolder特粗体,相对值lighter细体,相对值整数使

    27、用100,200,.900表示字体的粗细,100最细,900最粗,400相当于normal,700相当于boldCSSCSS常用属性常用属性uCSSCSS字体字体lfont-weight属性示例:46CSS字体属性-设置字体粗细 pfont-family:宋体;.p1font-weight:normal;.p2font-weight:bold;.p3font-weight:bolder;.p4font-weight:lighter;.p5font-weight:700;正常字体normal 标准粗体bold 特粗体bolder 细体lighter 通过整数值设定字体粗细700CSSCSS常用属

    28、性常用属性uCSSCSS文本文本l文本属性主要用来修饰HTML文件中的文本内容、水平对齐方式以及行间距等。l常用文本属性47文本属性属性值描述text-indentlength(常用单位pt)设置文字的首行缩进距离line-heightlength(常用单位pt)定义行间距letter-spacinglength(常用单位px)定义字符间距text-decorationunderline显示下划线overline显示上划线line-through显示删除线none无任何修饰text-alignleft左对齐center居中对齐right右对齐justify两端对齐CSSCSS常用属性常用属性u

    29、CSSCSS文本文本ltext-indent:段落的缩进。l基本语法:l说明p文本的缩进值必须是一个长度单位(相对或绝对单位)或一个百分比单位。48text-indent:缩进值;.k font-family:宋体;font-size:10pt;text-indent:25px;浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院,1998年被山东省教育厅批准成立山东浪潮计算机进修学院,学校以浪潮集团IT企业背景为依托,拥有得天独厚的行业知识、技术开发经验、人力资源优势等,自成立以来,累计培训计算机专业相关人才超过10万人。CSSCSS常用属性常用属性uCSSCSS文本文本llin

    30、e-height:文本行高。l基本语法:l说明pnormal:默认行高p行高值:可以为长度、倍数或百分比,百分比基于字体的高度尺寸,允许使用负值,如果使用负值,那么首行会被缩进到左边。49line-height:normal|行高值;CSSCSS常用属性常用属性uCSSCSS文本文本l文本行高。50 CSS文本属性-设置行距 .k1 font-size:10pt;line-height:15px;.k2 font-size:10pt;line-height:2em;行距15px浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院,1998年被山东省教育厅批准成立山东浪潮计算机进修学

    31、院。行距2em学校以浪潮集团IT企业背景为依托,拥有得天独厚的行业知识、技术开发经验、人力资源优势等,自成立以来,累计培训计算机专业相关人才超过10+万人。CSSCSS常用属性常用属性uCSSCSS文本文本lletter-spacing属性:字符间隔。l基本语法:l说明pNormal表示默认间距,长度一般为正值,也可以为负值,取决于浏览器是否支持。51letter-spacing:normal|字符间距;CSSCSS常用属性常用属性uCSSCSS文本文本l字符间隔示例。52CSS文本属性-设置字符间距 .k1 font-family:宋体;font-size:10pt;letter-spaci

    32、ng:3px;.k2 font-family:宋体;font-size:10pt;letter-spacing:10px;字符间距3px浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院,1998年被山东省教育厅批准成立山东浪潮计算机进修学院。字符间距10px学校以浪潮集团IT企业背景为依托,拥有得天独厚的行业知识、技术开发经验、人力资源优势等,自成立以来,累计培训计算机专业相关人才人才超过10万人。CSSCSS常用属性常用属性uCSSCSS文本文本ltext-decoration属性:文字修饰。l基本语法:l属性取值53text-decoration:线条显示方式;属性值描述u

    33、nderline显示下划线overline显示上划线Line-through显示删除线none无任何修饰CSSCSS常用属性常用属性uCSSCSS文本文本l文字修饰示例。54CSS文本属性-设置文字修饰 .k1text-decoration:underline;.k2text-decoration:overline;.k3text-decoration:line-through;下划线浪潮集团在80年代初期就重视对IT人才的培养。上划线学校以浪潮集团IT企业背景为依托。删除线线拥有得天独厚的行业知识、技术开发经验、人力资源优势。CSSCSS常用属性常用属性uCSSCSS文本文本ltext-al

    34、ign属性:水平对齐方式。l基本语法:l属性取值55text-align:水平对齐方式;属性值含义left左对齐center居中对齐right右对齐justify两端对齐CSSCSS常用属性常用属性uCSSCSS文本文本l水平对齐方式示例。56 CSS文本属性-设置水平对齐方式 .k1text-align:center;.k2text-align:left;.k3text-align:right;居中对齐浪潮集团在80年代初期就重视对IT人才的培养。左对齐学校以浪潮集团IT企业背景为依托。右对齐拥有得天独厚的行业知识、技术开发经验、人力资源优势。CSSCSS常用属性常用属性uCSSCSS文本文

    35、本lword-break属性:文本自动换行。l基本语法:l说明pbreak-all,允许单词中间换行。pkeep-all,不允许单词中间换行。57word-break:break-all|keep-all;CSSCSS常用属性常用属性uCSSCSS文本文本l文本自动换行示例。58 CSS文本属性-文本自动换行 div width:192px;height:80px;background-color:brown;word-break:keep-all Behind every successful man there is a lot unsuccessful yeas.word-break:b

    36、reak-all Behind every successful man there is a lot unsuccessful yeas.CSSCSS常用属性常用属性uCSSCSS颜色和背景颜色和背景属性属性lcolor属性:文本颜色。l基本语法:l说明p颜色值可以是十六进制数、内置颜色名和三原色。59color:#000000(十六进制数)|颜色名字|rgb(r%,g%,b%);CSSCSS常用属性常用属性uCSSCSS颜色和背景颜色和背景属性属性lbackground属性:背景。l基本语法:l属性取值60background:background-color background-ima

    37、ge background-repeat background-position属性属性值含义background-color颜色值设定一个元素的背景颜色background-imageURL(image_file_path)设定一个元素的背景图像background-repeatrepeat-x设置图像横向重复repeat-y设置图像纵向重复repeat设置图像横向及纵向重复no-repeat设置图像不重复b a c k g r o u n d-positionleft设置图像居左放置right设置图像居右放置center设置图像居中放置top设置图像向上对齐bottom设置图像向下对齐CS

    38、SCSS常用属性常用属性uCSSCSS颜色和背景颜色和背景属性示例属性示例61background h3color:#0FF;background-color:#666;text-align:center;#p1background-image:url(flower.jpg);background-repeat:repeat;background-position:center center;#p2background:#9FF url(yunduo.jpg)no-repeat center center;width:100%;height:150px;设置背景图像、位置 图像垂直居中CSS即

    39、层叠样式表(Cascading Stylesheet)。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。背景复合属性应用一个人至少拥有一个梦想,有一个理由去坚强。心若没有栖息的地方,到哪里都是在流浪。CSSCSS常用属性常用属性u列表列表样式样式l列表属性可以设置、改变列表项标志,设置不同的列表项标记为有序列表或者无序列表,或者将图像作为列表项标志。l语法l属性说明62属性描述list-style-image设置图片作为列表中的项目符号list-style-position设置项目符号的放置位置list-style-type设置项目符号的默认方

    40、式list-style:list-style-type|list-style-position|list-style-image CSSCSS常用属性常用属性u列表列表样式样式llist-style-type属性:项目符号的类型。l属性值63属性值描述none不使用任何项目符号disc默认值,实心圆circle空心圆square实心矩形decimal数字1、2、3、4、5decimal-leading-zero以0打头的数字,01、02、03、04、05lower-alpha小写英文字母,a、b、c、d、eCSSCSS常用属性常用属性u列表列表样式样式64.disc list-style-ty

    41、pe:disc;.cir list-style-type:circle;.zero list-style-type:decimal-leading-zero;.lower list-style-type:lower-alpha;.upper list-style-type:upper-roman;disc:默认值,实心圆 circle:空心圆 decimal-leading-zero:以0打头的数字 01、02 lower-alpha:小写英文字母a、b、c、d、e upper-roman:大写罗马数字、CSSCSS常用属性常用属性u列表列表样式样式llist-style-position属性

    42、:设置列表项目符号的位置及列表项的对齐方式。l属性值poutside 表示列表项目符号放置在内容框以外,列表项以内容为准对齐,默认值。pinside 表示列表项目符号放置在内容框以内,列表项以项目符号为准对齐。65CSSCSS常用属性常用属性u列表列表样式样式llist-style-position属性。66background ul padding:7px;border:1px solid#444;list-style-type:square;.outlist-style-position:outside;.inlist-style-position:inside;outside的列表.in

    43、side的列表。CSSCSS常用属性常用属性u列表列表样式样式llist-style-image属性:定义一幅图像,来取代默认的列表项目符号。l属性值p默认值为none,表示使用 list-style-type属性指定的列表项目符号;purl()表示使用 url 指定的图像来取代默认的列表项目符号,如果图像无效,则 list-style-type属性会生效。67CSSCSS常用属性常用属性u列表列表样式样式llist-style-image属性68background ul list-style-image:url(imgs/truepng.png);list-style属性 list-sty

    44、le-type属性 list-style-position属性 list-style-image属性CSSCSS常用属性常用属性uCSSCSS表格表格lborder属性:表格边框。l语法69border:宽度 线型样式 颜色;table,th,td border:1px solid black;CSSCSS常用属性常用属性uCSSCSS表格表格lborder-collapse属性:折叠边框。l语法70border-collapse:collapse|separate;table border-collapse:collapse;table,td,th border:1px solid blac

    45、k;CSSCSS常用属性常用属性uCSSCSS表格表格lwidth和height属性:表格宽度和高度。l语法71Width:数值|百分比;Height:数值;tablewidth:100%;thheight:50px;CSSCSS常用属性常用属性uCSSCSS轮廓轮廓l轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。l常用属性72属性描述outline在一个声明中设置所有的轮廓属性。outline-color设置轮廓的颜色。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。CSSCSS常用属性常用属性uCSSCSS轮廓轮廓loutlin

    46、e属性:绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。l语法loutline-color属性:设置元素整个轮廓中可见部分的颜色。l语法73outline:outline-color|outline-style|outline-widthoutline-color:十六进制数|颜色名字|rgb|invert(默认值)|inherit;CSSCSS常用属性常用属性uCSSCSS轮廓轮廓loutline-style属性:设置元素的整个轮廓的样式。l语法l轮廓样式取值74outline-style:轮廓显示方式;值描述none默认。定义无轮廓。dotted定义点状的轮廓。dashe

    47、d定义虚线轮廓。solid定义实线轮廓。double定义双线轮廓。双线的宽度等同于 outline-width 的值。groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。inherit规定应该从父元素继承轮廓样式的设置。CSSCSS常用属性常用属性uCSSCSS轮廓轮廓loutline-width属性:置元素整个轮廓的宽度,只有当轮廓

    48、样式不是 none 时,这个宽度才会起作用。l语法l属性取值75outline-width:轮廓的宽度取值;值描述thin规定细轮廓。medium默认。规定中等的轮廓。thick规定粗的轮廓。length允许您规定轮廓粗细的值。inherit规定应该从父元素继承轮廓宽度的设置。CSSCSS常用属性常用属性uCSSCSS轮廓轮廓76轮廓样式设置 /*设置第一个段落轮廓颜色为#00ff00,轮廓样式为dotted 轮廓宽度为thick*/p outline:#00ff00 dotted thick;/*设置第二个段落轮廓颜色为aqua,轮廓样式为solid 轮廓宽度为thin*/.p1 outli

    49、ne-style:solid;outline-color:aqua;outline-width:thin;outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。注释:轮廓线不会占据空间,也不一定是矩形。outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。注释:轮廓线不会占据空间,也不一定是矩形。本本章章总结总结uCSSCSS规则由选择器和声明组成规则由选择器和声明组成,即,即“属性:属性值属性:属性值”。u选择器包括标记选择器、选择器包括标记选择器、idid选择器、类选择器、伪类选选择器、类选择器、伪类选择器等,提供了不同的选取页面标记的方式。择器等,提供了不同的选取页面标记的方式。uCSSCSS分为内联样式表、内部样式表、链接外部样式表、分为内联样式表、内部样式表、链接外部样式表、导入外部样式表。导入外部样式表。uCSSCSS的各种样式属性,包括文字样式、文本样式、颜色、的各种样式属性,包括文字样式、文本样式、颜色、背景、列表、背景、列表、CSSCSS表格、表格、CSSCSS轮廓等。轮廓等。77谢谢谢谢!78

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:BTC-CS-HTML-01-第5章-CSS基础知识-课件.pptx
    链接地址:https://www.163wenku.com/p-3376617.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库