PPT
【文档说明】BTC-CS-HTML-01-第5章-CSS基础知识-课件.pptx，共(78)页，2.060 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-2814.html
以下为本文档部分文字说明：
第5章CSS基础知识本章目标◆了解CSS的概念及发展史◆掌握CSS的基本语法◆掌握CSS选择器◆掌握CSS创建方法◆掌握CSS常用属性，并灵活运用这些属性设计页面样式2CSS概述◆CSS简介⚫CSS(CascadingStyleSheets，层叠样式表，也称作级联
样式表)⚫用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。⚫1996年通过W3C审核认证，并推荐使用。⚫CSS解决了网页界面排版布局的难题。HTML的Tag主要是定义网页的内容(Content)，
而CSS决定这些网页内容如何显示(Layout)3CSS概述◆CSS发展史⚫CSS经历了CSS1、CSS2、CSS2.1、CSS3，CSS3是正在进行中的标准。⚫1996年12月17日，CSS1正式推出,CSS1
中主要定义了具体的颜色、字体、文本样式、外边距、边框、背景等最基本的样式。⚫1998年5月12日，CSS2正式推出，CSS2定义了许多高级特性（如，浮动和定位）以及一些高级的选择器（如，子选择器、相邻同胞
选择器、通用选择器）。⚫2010年，推出了一个全新的版本CSS3。CSS3是CSS规范的最新版本。4CSS概述◆CSS特点①在制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。②只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式
。③可以用多套样式,使网页有任意样式切换的效果。④降低服务器的成本等。5CSS概述◆CSS优势⚫页面表现力加强HTML标签的外观样式比较单一。字体颜色只有黑白，字体类型和大小无变化，而CSS可以更加精确地控制网页内容的格式
。⚫提高页面浏览速度传统的HTML中控制网页布局样式比较麻烦，倘若引入CSS网页布局将会事半功倍，大大缩减页面代码，提高页面浏览速度，缩减带宽成本。⚫内容与样式的分离将设计部分剥离出来放在一个独立样式文件中，可以减少网页无效的可能，缩短改版时间，只要简单地修改几
个CSS文件就可以重新设计一个有成百上千页面的站点，方便团队开发。6CSS语法◆CSS基本语法⚫CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。7选择器（Selector）{Property：Value;属性1：属性1的值;属性2：属性2的值;…
…….}CSS语法◆CSS基本语法⚫选择器（Selector）指这组样式编码所要针对的对象。可以是一个HTML标签，如body、h1；也可以是定义了特定id或class的标签。⚫属性（Property
）指这组样式要设置对象的属性样式。对于每一个HTML标签，CSS都提供了丰富的属性样式，如颜色、大小、定位、浮动方式等。⚫值（Value）是指属性的值。形式有两种，一种是指定范围的值，如float属性，只能用left、right、non
e三种值；另一种为数值，如width能够使用0~9999px或其他数学单位来指定。8body{background-color:red;}CSS语法◆CSS注释⚫注释即代码的解释和说明，一般放在代码的上方或者尾部。⚫CS
S注释以“/*”开始，以“*/”结束。9/*这是多行注释，CSS文件名为：test.css功能描述：定义样式*//*单行注释样式规则应用于段落<p>*/p{background-color：red;/*行尾注释定义背景颜色*/font-size:10px;/*行
尾注释定义字体大小*/color:black;/*行尾注释定义字体颜色*/}CSS语法◆CSS编辑方式⚫主要有两种：⚫第一种是在HTML文件中直接编写CSS规则；在指定的某个元素的style属性直接赋值；在head标记对中，通过style标记包含。⚫第二种是在单独的
文件中编写CSS规则，然后在需要使用此应用规则的HTML文件中引用此CSS文件。在单独的文件中编写CSS规则，这种文件我们称之为CSS文件，是一个纯文本文件，文件的后缀名为.css。在使用此应用规则的HTML文件中引用此CSS文件即可，实现了内容与样式的分离。10CSS语法◆CSS语法案例11
<html><head><title>myfirstpage</title><styletype="text/css">/*选择了页面中的body元素作为操作对象*/body{/*属性和属性值，设定网页的背景色为红色*/backgro
und-color:red}</style></head><body>山东浪潮优派科技教育有限公司欢迎您....</body></html>CSS语法◆CSS编写规范⚫CSS属性书写规范：书写顺序按照元素模型由外及内，由整
体到细节书写属性写在一行内时，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”使用CSS缩写属性,CSS有些属性是可以缩写的。12例如：padding,margin,font等复合属
性例如：.class{width:200px;height:100px}。位置->大小->文字系列->背景->其他CSS选择器◆CSS选择器主要有⚫标签选择器⚫id选择器⚫类选择器⚫伪类选择器⚫属性选择器⚫后代选择器⚫子元素选择器⚫相邻兄弟选择器等13CSS选择
器◆标签选择器⚫CSS标签选择器用来声明哪些标签采用哪种CSS样式。⚫标签的名称作为相应的标签选择器的名称。14<styletype="text/css">h1{color:red;font-size:25px;}</style>说明：设置<h1>标
记字体的颜色，页面中所有<h1>标记的字体都会以红色显示CSS选择器◆类选择器⚫类选择器由句点“.”及class属性值直接相连组成。15.类选择器{/*CSS规则;*/}说明：在<p>标记中定义class属性
,用户可以将class的属性值“a1”作为CSS的类选择器使用。.a1{color:yellow;font-weight:bold;}<pclass=”a1”>类选择器</p>CSS选择器◆id选择器⚫使用HTML标记的id属性作为CSS选择器⚫id选择器前面有一个“#”号，也称之为棋盘号
或井号16#id选择器{/*CSS规则;*/}。#a2{color:#99FF66;font-size:20px;}<pid=”a2”>ID选择器</p>CSS选择器◆伪类选择器⚫伪类是指通过元素的基本特征对元素进行分类，而不是通过元素的名字、属性等进行分类。⚫伪类通
过冒号”:”来定义，它定义了元素的状态，如：点击按下，点击完成等⚫语法格式17标记：伪类名｛/*CSS规则*/｝CSS选择器◆伪类选择器⚫常用伪类18伪类名描述link设置a标记在未被访问前的样式hover设置a标记在鼠标悬停时的样式active设置a标记在鼠标点击时的样式visited
设置a标记在被访问后的样式first-letter作用于块，设置第一个字符的样式first-line作用于块，设置第一个行的样式表first-child设置第一个子标记的样式lang设置具有lang属性的标记的样式CS
S选择器◆伪类选择器⚫示例19<title>伪类选择器</title><styletype="text/css">a:link{color:#0FF;}a:visited{color:#999;}a:hover{color:#F00;}a:
active{color:#333;}p:first-letter{font-weight:bolder;color:#F00;}p:first-line{font-size:16px;color:#0F0;}</st
yle><body><p>在支持CSS的浏览器中，链接不同的状态都可以以不同的方式显示，这些状态包括：活动状态、未被访问状态、已被访问状态、鼠标悬停状态<br/>注意：伪类选择器的使用时机，a:hover必须放置在a:visited和a:link之后才是有效
的。a:active必须放在a:hover之后才会有效。</p><ahref="http://www.baidu.com">百度搜索</a></body>注意：伪类选择器的使用时机，a:hover必须防止在a:visited和a:link之后才是有效的。a
:active必须放在a:hover之后才会有效。CSS选择器◆属性选择器⚫性选择器可以根据元素的属性及属性值来选择元素。⚫语法格式20[属性]｛/*CSS规则*/｝<head><styletype="text/css">[title]
{color:red;}</style></head><body><h1>可以应用样式：</h1><h2title="Helloworld">Helloworld</h2><atitle="baidu"href="www.baidu.com">百度</a></body>CSS选择器◆属性
选择器⚫可以只对某一元素（<a>）的属性（href）的应用样式。⚫可以根据多个属性进行选择，只需将属性选择器链接在一起即可。21a[href][title]{color:red;}a[href]{color:red;}CSS选择器◆后代选择器⚫后代选择器
是根据文档的上下文关系来确定某个标签的样式。⚫选择器一端包括两个或多个用空格分隔的选择器⚫语法格式：22标签子标签｛/*CSS规则*/｝listrong{font-style:italic;font-
weight:normal;}CSS选择器◆子元素选择器⚫子元素选择器只能选择作为某元素子元素的元素。⚫子选择器时使用大于号“>”。⚫语法格式：23元素>子元素｛/*CSS规则*/｝/*只选择h2元素的子元素strong元素*/h2>strong{color:red;}CSS选择器◆相邻兄弟选
择器⚫相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。⚫相邻兄弟选择器使用加号（+）连接。⚫语法格式：24元素1+元素2｛/*CSS规则*/｝/*h1和p元素拥有共同的父元素*/h1+p{color:red;}CSS选择器
◆选择器选择器⚫选择器分组实际上是标签选择器的升级，我们可以将多个标签选择器组合在一起共同使用某一些样式。。⚫选择器之间使用逗号“,”分隔。⚫语法格式：25元素1,元素2｛/*CSS规则*/｝/*nogrouping*/h1{color:blue;}h2{color:blu
e;}h3{color:blue;}h4{color:blue;}h5{color:blue;}h6{color:blue;}/*grouping*/h1,h2,h3,h4,h5,h6{color:blue;}CSS选择器◆选择器的应用范例26<html><head><ti
tle>CSS选择器综合案例</title><metahttp-equiv="Ccontent-Type"content="text/css"><styletype="text/css">/*设置id属性值为title的标签的样式规则*/#title1{font-
size:40px;text-align:center;font-weight:bolder;color:brown;}/*设置class属性值为title的h2标签的样式规则*/h2.title2{font
-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;}</style></head><body><h1id="title1">选择器的应用范例</h1><h2class="title2">上元夫人</h2><pclass="graph"
>上元谁夫人,偏得王母娇。<br>嵯峨三角髻,余发散垂腰。<br>裘披青毛锦,身著赤霜袍。<br>手提嬴女儿,闲与凤吹箫。<br>眉语两自笑,忽然随风飘。<br></p></body></html>CSS创建◆添加CSS有四种方式：⚫内
联样式⚫内部样式表⚫链接外部样式⚫导入外部样式表。27CSS创建◆内联样式⚫内联样式是所有样式应用方式中最为直接的一种，它通过对HTML标记使用style属性，将CSS代码直接写在其中。28<pstyle=”color
:#0066FF;font-size:12px;”>实例内容1</p><pstyle=”color:#CCFF66;font-style:oblique;”>实例内容2</p><pstyle=”color:#9933FF;font-si
ze:30px;”>实例内容3</p>CSS创建◆内联样式⚫特点内联样式是混合在HTML标记里使用的，可以很简单地对某个元素单独定义样式，它主要在body内实现。内联样式是最简单、最直接的CSS使用
方法，但它的针对性也很明显。只能作用于当前页面中的标记，造成代码冗余，维护起来比较困难。29CSS创建◆内部样式表⚫内部样式表一般位于HTML文件的头部，即<head>与</head>标签内，并且以<style>开始，以</style>结束。30<style>
P{color:#0066FF;}</style>CSS创建◆内部样式表⚫特点将CSS代码集中放在<style>标记中，这样方便查找，对后期维护也比较方便，代码页面也会减少。如果多个网页的某个标记使用相同的样式效果，内
部样式也会出现代码冗余和维护困难的问题。内部样式比较适合个别风格特殊页面的效果设置31CSS创建◆链接外部样式表⚫链接外部样式表是最常见的，也是效果最好的。⚫链接外部样式表的特点是将CSS代码单独放在一个或多个.css文件中⚫需要时在<head>标记对之间使用<link
>标记的相关属性指明外部CSS文件的路径，并应用在当前网页元素上。32<head><!--href表示.css文件路径；type表示文件的类型是样式表文件；rel是指在页面中使用外部的样式表--><linkhref=”test.css”type=”
text/css”rel=”stylesheet”></head>CSS创建◆链接外部样式表⚫特点：将CSS代码和HTML代码分离，这样就可以实现将一个CSS文件链接到不同的HTML网页中。将多个页面都会用
到的CSS样式定义在一个或多个.css文件中，然后在需要用到该样式的HTML网页中通过<link>标记链接这些.css文件,通过链接式CSS可以降低整个网站的页面代码冗余，并提高网站的可维护度。最适合大型网站的CSS样式定
义。33CSS特性◆层叠性⚫CSS的层叠性是指，在权重(优先级)相同的情况下，同一个标签的样式发生冲突，最后设置的样式会层叠（覆盖）之前的样式。注意：与定义样式的顺序有关，与调用的顺序无关。34<styletype="text
/css">div{width:200px;height:200px;text-align:center;background:black;}/*样式的定义顺序为div1div2*//*样式1*/.div1{c
olor:red;}/*样式2*/.div2{color:blue;}</style><body><!--div2的样式会覆盖div1的样式，从而字体的颜色为蓝色--><divclass="div2div1">山东浪潮优派科技教育有限公司</div></body>CSS特性◆继承性⚫
CSS的继承性是指，发生在有嵌套关系的元素中。如果子元素没有设置样式，那么该子元素会继承父元素的中可被继承的样式。只有部分样式能继承，一些特殊的标签不会受父元素字体样式的影响35<styletype="text/css">div{width:2
00px;height:200px;text-align:center;background:black;}/*样式的定义顺序为div1div2*//*样式1*/.div1{color:red;}/*样式2*/.div2{color:blue;}</style><body><!--
div2的样式会覆盖div1的样式，从而字体的颜色为蓝色--><divclass="div2div1">山东浪潮优派科技教育有限公司<div>是浪潮集团旗下专门从事IT教育的产业单位</div></div></body>CSS特性◆特殊性（优先级）⚫CSS
的特殊性也可以称之为CSS的优先级多个选择器定义的样式发生冲突，则CSS按选择器的优先级，让元素应用优先级高的选择器样式。选择优先级从高到低为：内联样式>id选择器样式>类选择器别样式>标签选择器样式。36
<head><style>/*样式1*/.div1{color:red;}</style></head><body><!--为div设置相同的属性color，那么最终调用哪个样式规则呢，根据选择器的优先级顺序，内联样式的优先级高，所以，div中文本颜色应该是黄色。--
><divstyle="color:yellow"class="div1">山东浪潮优派科技教育有限公司</div></body>CSS常用属性◆常用的样式规则：⚫CSS字体⚫CSS文本⚫CSS颜色和背景⚫CSS列
表⚫CSS表格⚫CSS轮廓等。37CSS常用属性◆CSS字体⚫常用font子属性38属性属性值描述font-size绝对大小|相对大小|百分数|具体某个值（单位：pt|px|in）设置字体大小font
-family宋体，黑体…设置字体类型font-weightnormal设置字体常规格式显示lighter设置字体加粗bold设置字体加粗bolder设置字体特粗font-stylenormal设置字体常
规式显示italic设置字体为斜体oblique与italic效果一样CSS常用属性◆CSS字体⚫font-family属性：设置字体。⚫语法：⚫说明：font-family属性可以同时声明多种字体，字体之间用逗号(,)隔开。如果字
体的名称中出现了空格，必须使用双引号将字体名称引起来，比如TimesNewRoman39font-family:字体1,字体2,.....,字体n;<style>P{font-family:SimSun,MicrosoftYaHei;}<style>CSS常用属性◆CSS字体⚫f
ont-size属性：字体的大小。⚫语法：⚫说明：绝对大小：可以使用in、cm、mm、pt、pc等单位作为font-size的属性值相对大小：可以使用em、ex、px、%等单位作为font-size的属性值length:可采用百分比或长度
值，不可为负值，其百分比取值是基于父对象中字体的尺寸，建议使用相对单位定义字号40font-size:length（绝对大小|相对大小）;CSS常用属性◆CSS字体⚫font-size属性值关键字。41属性值描述xx-s
mall绝对字体尺寸，最小x-samll绝对字体尺寸,较小small绝对字体尺寸,小medium绝对字体尺寸,正常默认值。Large绝对字体尺寸，大X-large绝对字体尺寸,较大xx-large绝对字体尺寸
，最大large相对字体尺寸，相对于父对象中字体尺寸进行相对增大CSS常用属性◆CSS字体⚫font-size属性示例42<head><title>CSS字体属性-设置字体大小</title><styletype="text/css">p{font-famil
y:"宋体";}.p1{font-size:10px;}.p2{font-size:20px;}.p3{font-size:200%;}.p4{font-size:x-large;}</style></head><body><pclass="p1">自古无鱼不成宴。</p><pc
lass="p2">自古无鱼不成宴。</p><pclass="p3">自古无鱼不成宴。</p><pclass="p4">自古无鱼不成宴。</p></body>CSS常用属性◆CSS字体⚫font-style属性：字体的样式。⚫语法：⚫font-style具体取值：43font-style:字
体样式的取值;属性值描述normal默认的正常字体italic以斜体显示文字oblique属于中间状态，以偏斜体显示CSS常用属性◆CSS字体⚫font-style属性示例：44<head><title>CSS字体属性-设置
字体风格</title><styletype="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><bo
dy><spanclass="p1">设置字体风格为normal</span><br/><spanclass="p2">设置字体风格为itailc</span><br/><spanclass="p3">设置字体风格为oblique</span><b
r/></body>CSS常用属性◆CSS字体⚫font-weight属性：字体的粗细。⚫语法：⚫font-weight属性取值：45font-weight：字体粗细取值;属性值描述normal默认的正常字体bold标准粗体bolder
特粗体，相对值lighter细体，相对值整数使用100,200，....900表示字体的粗细，100最细，900最粗，400相当于normal，700相当于boldCSS常用属性◆CSS字体⚫font-weight属性示例：46<he
ad><title>CSS字体属性-设置字体粗细</title><styletype="text/css">p{font-family:"宋体";}.p1{font-weight:normal;}.p2{font-weight:bold;}.p3{font-weigh
t:bolder;}.p4{font-weight:lighter;}.p5{font-weight:700;}</style></head><body><pclass="p1">正常字体normal</p
><pclass="p2">标准粗体bold</p><pclass="p3">特粗体bolder</p><pclass="p4">细体lighter</p><pclass="p5">通过整数值设定字体粗细700</
p></body>CSS常用属性◆CSS文本⚫文本属性主要用来修饰HTML文件中的文本内容、水平对齐方式以及行间距等。⚫常用文本属性47文本属性属性值描述text-indentlength（常用单位pt）设置文字的首行缩进距离line-heightlength（常用单位pt）定义行间距
letter-spacinglength（常用单位px）定义字符间距text-decorationunderline显示下划线overline显示上划线line-through显示删除线none无任何修饰text-alignleft左对齐center居中对齐r
ight右对齐justify两端对齐CSS常用属性◆CSS文本⚫text-indent：段落的缩进。⚫基本语法：⚫说明文本的缩进值必须是一个长度单位（相对或绝对单位）或一个百分比单位。48text-indent：缩进值;<head><style
type="text/css">.k{font-family:"宋体";font-size:10pt;text-indent:25px;}</style></head><body><pclass="k">浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院，1998年被山
东省教育厅批准成立山东浪潮计算机进修学院，学校以浪潮集团IT企业背景为依托，拥有得天独厚的行业知识、技术开发经验、人力资源优势等，自成立以来，累计培训计算机专业相关人才超过10万人。</p></body>CSS常用属性◆CSS文本⚫
line-height：文本行高。⚫基本语法：⚫说明normal:默认行高行高值：可以为长度、倍数或百分比，百分比基于字体的高度尺寸,允许使用负值,如果使用负值，那么首行会被缩进到左边。49line-height：normal|行高值;CSS常用属性◆C
SS文本⚫文本行高。50<head><title>CSS文本属性-设置行距</title><styletype="text/css">.k1{font-size:10pt;line-height:15px;}.k2{font-size:10pt;line-height:2em;}</st
yle></head><body><spanclass="k1">[行距15px]浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院，1998年被山东省教育厅批准成立山东浪潮计算机进修学院。</span><br/><spanclass="k2">[行距2em]学校以浪潮
集团IT企业背景为依托，拥有得天独厚的行业知识、技术开发经验、人力资源优势等，自成立以来，累计培训计算机专业相关人才超过10+万人。</span></body>CSS常用属性◆CSS文本⚫letter-spacing属性：字符间隔。⚫基
本语法：⚫说明Normal表示默认间距，长度一般为正值，也可以为负值，取决于浏览器是否支持。51letter-spacing：normal|字符间距;CSS常用属性◆CSS文本⚫字符间隔示例。52<head><title>CSS文本属性-设置字符间距</title>
<styletype="text/css">.k1{font-family:"宋体";font-size:10pt;letter-spacing:3px;}.k2{font-family:"宋体";font-size:10pt;letter-spacing:10px;}</style></he
ad><body><spanclass="k1">[字符间距3px]浪潮集团在80年代初期就重视对IT人才的培养并成立了浪潮培训学院，1998年被山东省教育厅批准成立山东浪潮计算机进修学院。</span><br/><spanc
lass="k2">[字符间距10px]学校以浪潮集团IT企业背景为依托，拥有得天独厚的行业知识、技术开发经验、人力资源优势等，自成立以来，累计培训计算机专业相关人才人才超过10万人。</span></body>CSS常用属性◆CSS文本⚫text-decoration属性：文字修饰。⚫基本语
法：⚫属性取值53text-decoration:线条显示方式;属性值描述underline显示下划线overline显示上划线Line-through显示删除线none无任何修饰CSS常用属性◆CSS文本⚫文字修饰示例。5
4<head><title>CSS文本属性-设置文字修饰</title><styletype="text/css">.k1{text-decoration:underline;}.k2{text-deco
ration:overline;}.k3{text-decoration:line-through;}</style></head><body><spanclass="k1">[下划线]浪潮集团在80年代初期就重视对
IT人才的培养。</span><br/><br/><spanclass="k2">[上划线]学校以浪潮集团IT企业背景为依托。</span><br/><br/><spanclass="k3">[删除线线]拥有得天独厚的行业知识、技术开发经验、人力资源优势。</span></body>CSS
常用属性◆CSS文本⚫text-align属性：水平对齐方式。⚫基本语法：⚫属性取值55text-align：水平对齐方式;属性值含义left左对齐center居中对齐right右对齐justify两端对齐CSS常用属性◆CSS文本⚫水平对齐方式示例
。56<head><title>CSS文本属性-设置水平对齐方式</title><styletype="text/css">.k1{text-align:center;}.k2{text-align:left;}.k3{text-alig
n:right;}</style></head><body><pclass="k1">[居中对齐]浪潮集团在80年代初期就重视对IT人才的培养。</p><pclass="k2">[左对齐]学校以浪潮集团IT企业背景为依托。</p><pclass="k3">[右对齐]拥有得天独厚的行业知识、技术开
发经验、人力资源优势。</p></body></html>CSS常用属性◆CSS文本⚫word-break属性：文本自动换行。⚫基本语法：⚫说明break-all，允许单词中间换行。keep-all，不允许单词中间换行。57
word-break:break-all|keep-all;CSS常用属性◆CSS文本⚫文本自动换行示例。58<head><title>CSS文本属性-文本自动换行</title><styletype="text/css">div{width:192px;height:80px;ba
ckground-color:brown;}</style></head><body><!--不允许在单词中换行-->word-break:keep-all<divstyle="word-break:keep-
all">Behindeverysuccessfulmanthereisalotunsuccessfulyeas.</div><br><!--指定允许在单词中换行-->word-break:break-all<div
style="word-break:break-all">Behindeverysuccessfulmanthereisalotunsuccessfulyeas.</div></body>CSS常用属性◆CSS颜色和背景属性⚫color属性：文本颜色。⚫基本语法：⚫说明颜色值
可以是十六进制数、内置颜色名和三原色。59color:#000000(十六进制数)|颜色名字|rgb(r%,g%,b%);CSS常用属性◆CSS颜色和背景属性⚫background属性：背景。⚫基本语法：⚫属性取值60background:background-colorbackground-
imagebackground-repeatbackground-position属性属性值含义background-color颜色值设定一个元素的背景颜色background-imageURL（image_file_
path）设定一个元素的背景图像background-repeatrepeat-x设置图像横向重复repeat-y设置图像纵向重复repeat设置图像横向及纵向重复no-repeat设置图像不重复background-positionleft设置图像居左放置right
设置图像居右放置center设置图像居中放置top设置图像向上对齐bottom设置图像向下对齐CSS常用属性◆CSS颜色和背景属性示例61<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><
title>background</title><styletype="text/css">h3{color:#0FF;background-color:#666;text-align:center;}#p1{background-image:url(flower.jpg);backgroun
d-repeat:repeat;background-position:centercenter;}#p2{background:#9FFurl(yunduo.jpg)no-repeatcentercenter;width:100%;height:150px;}</style></head
><body><h3>设置背景图像、位置</h3><pid="p1">[图像垂直居中]CSS即层叠样式表（CascadingStylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其
它效果实现更加精确的控制。</p><pid="p2">[背景复合属性应用]一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。</p></body>CSS常用属性◆列表样式⚫列表属性可以设置、改变列表项标志，设置不同的列表
项标记为有序列表或者无序列表，或者将图像作为列表项标志。⚫语法⚫属性说明62属性描述list-style-image设置图片作为列表中的项目符号list-style-position设置项目符号的放置位置list-style-type设置项目符号的
默认方式list-style：[list-style-type]||[list-style-position]||[list-style-image]CSS常用属性◆列表样式⚫list-style-type属性
：项目符号的类型。⚫属性值63属性值描述none不使用任何项目符号disc默认值，实心圆circle空心圆square实心矩形decimal数字1、2、3、4、5decimal-leading-zero以0打头的数字，01、0
2、03、04、05lower-alpha小写英文字母，a、b、c、d、eCSS常用属性◆列表样式64.disc{list-style-type:disc;}.cir{list-style-type:circl
e;}.zero{list-style-type:decimal-leading-zero;}.lower{list-style-type:lower-alpha;}.upper{list-style-type:u
pper-roman;}<ul><liclass="disc">disc：默认值，实心圆</li><liclass="cir">circle：空心圆</li><liclass="zero">decimal-leading-zero：以0打头的数字01、02
</li><liclass="lower">lower-alpha：小写英文字母a、b、c、d、e</li><liclass="upper">upper-roman：大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ</li></ul>CSS常用
属性◆列表样式⚫list-style-position属性：设置列表项目符号的位置及列表项的对齐方式。⚫属性值outside表示列表项目符号放置在内容框以外，列表项以内容为准对齐，默认值。inside表示列
表项目符号放置在内容框以内，列表项以项目符号为准对齐。65CSS常用属性◆列表样式⚫list-style-position属性。66<head><title>background</title><styletyp
e="text/css">ul{padding:7px;border:1pxsolid#444;list-style-type:square;}.out{list-style-position:outside;}.in{list-styl
e-position:inside;}</style></head><body><ulclass="out"><li>outside的列表.</li></ul><ulclass="in"><li>inside的列表。</li></ul></body>CSS常用属性◆列表样式⚫list
-style-image属性：定义一幅图像，来取代默认的列表项目符号。⚫属性值默认值为none，表示使用list-style-type属性指定的列表项目符号；url()表示使用url指定的图像来取代默认的列表项目符号，如果图像无效，则list-style-ty
pe属性会生效。67CSS常用属性◆列表样式⚫list-style-image属性68<head><title>background</title><styletype="text/css">ul{list
-style-image:url(imgs/truepng.png);}</style></head><body><ul><li>list-style属性</li><li>list-style-type
属性</li><li>list-style-position属性</li><li>list-style-image属性</li><ul></body>CSS常用属性◆CSS表格⚫border属性：表格边框。⚫语法69border:宽度线型样式颜色;<st
yle>table,th,td{border:1pxsolidblack;}</style>CSS常用属性◆CSS表格⚫border-collapse属性：折叠边框。⚫语法70border-collapse：collapse|separate;<style>table{border-col
lapse:collapse;}table,td,th{border:1pxsolidblack;}</style>CSS常用属性◆CSS表格⚫width和height属性：表格宽度和高度。⚫语法71Wid
th:数值|百分比;Height:数值;<style>table{width:100%;}th{height:50px;}</style>CSS常用属性◆CSS轮廓⚫轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。⚫常用属性72属性描述outli
ne在一个声明中设置所有的轮廓属性。outline-color设置轮廓的颜色。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。CSS常用属性◆CSS轮廓⚫outline属性：绘制于元素周围的一条线，位于边框边缘的外围，可
起到突出元素的作用。⚫语法⚫outline-color属性：设置元素整个轮廓中可见部分的颜色。⚫语法73outline：outline-color|outline-style|outline-widthoutline-color:十六进制数|颜色名字
|rgb|invert（默认值）|inherit;CSS常用属性◆CSS轮廓⚫outline-style属性：设置元素的整个轮廓的样式。⚫语法⚫轮廓样式取值74outline-style:轮廓显示方式;值描述none默认。定义
无轮廓。dotted定义点状的轮廓。dashed定义虚线轮廓。solid定义实线轮廓。double定义双线轮廓。双线的宽度等同于outline-width的值。groove定义3D凹槽轮廓。此效果取决于outline
-color值。ridge定义3D凸槽轮廓。此效果取决于outline-color值。inset定义3D凹边轮廓。此效果取决于outline-color值。outset定义3D凸边轮廓。此效果取决于outline-
color值。inherit规定应该从父元素继承轮廓样式的设置。CSS常用属性◆CSS轮廓⚫outline-width属性：置元素整个轮廓的宽度，只有当轮廓样式不是none时，这个宽度才会起作用。⚫语法
⚫属性取值75outline-width:轮廓的宽度取值;值描述thin规定细轮廓。medium默认。规定中等的轮廓。thick规定粗的轮廓。length允许您规定轮廓粗细的值。inherit规定应该从父元素继承轮廓宽度的设置。CSS常用属性◆C
SS轮廓76<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>轮廓样式设置</title><styletype="text/css
">/*设置第一个段落轮廓颜色为#00ff00，轮廓样式为dotted轮廓宽度为thick*/p{outline:#00ff00dottedthick;}/*设置第二个段落轮廓颜色为aqua，轮廓样式为solid轮廓宽度为thin*/.p1{outline-style:solid;outl
ine-color:aqua;outline-width:thin;}</style><body><p>outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。<b>注释：轮廓线不会占据空间，也不一定是矩形。</b></p><pclass="p1">outline是绘制于
元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。<b>注释：轮廓线不会占据空间，也不一定是矩形。</b></p></body></html>本章总结◆CSS规则由选择器和声明组成，即“属性：属性值”。◆选择器包括标记选择器、id选择器、类选择器、伪类选
择器等，提供了不同的选取页面标记的方式。◆CSS分为内联样式表、内部样式表、链接外部样式表、导入外部样式表。◆CSS的各种样式属性，包括文字样式、文本样式、颜色、背景、列表、CSS表格、CSS轮廓等。7
7谢谢!78
辽公网安备 21102102000191号
营业执照
