PPT-单元3层叠样式表CSS的使用 (1)讲解.pptx

HTML5+CSS3网页设计任务教程单元3层叠样式表CSS的使用

目录任务3-1使用CSS设置body样式任务3-2使用CSS详细设置不同段落内样式CONTANTS任务3-3全局样式和局部样式的使用任务3-4样式的并列和从属关系的应用任务3-5样式优先级的测试任务3-6使用伪类选择器定义超链接的显示效果任务3-7创建盒子模型任务3-8CSS浮动float属性的使用任务3-9常用文本样式属性的使用任务3-10常用图片样式属性的使用任务3-11CSS3图片背景的使用

HTML5+CSS3网页设计任务教程1使用CSS设置body样式任务3-1CSS是CascadingStyleSheets的缩写，即层叠样式表，在标准网页设计中，CSS负责网页内容在浏览器内的显示样式，如文字大小、字体颜色、字体加粗等。CSS由选择符和声明两部分组成，其中选择符又可称作选择器，是网页中要应用样式的元素；声明由属性和属性值两部分组成，属性与值之间用冒号隔开，每一个属性设置完属性值后，用分号结束，声明部分可以有多组属性和属性值组成，由一对｛｝括起来。例如：p{font-size:12px;color:red;}

HTML5+CSS3网页设计任务教程2使用CSS设置body样式任务3-1由CSS样式代码插入的形式可以将CSS分为内联式、嵌入式和外部式三种。具体如下：1、内联式：把CSS代码直接作为标签的style属性的内容写在现有的HTML标签（如p,span...）中，如：pstyle=color:red;font-size:12px;表示这个段落中的文字大小是12像素，字体颜色是红色。

HTML5+CSS3网页设计任务教程3使用CSS设置body样式任务3-12、嵌入式：也称作内部样式表，把CSS样式写在标签styletype=text/css/style之间，并且一般情况下嵌入式CSS样式写在head/head之间。

HTML5+CSS3网页设计任务教程4使用CSS设置body样式任务3-13、外部式：把CSS代码写在一个单独的外部文件中存放在根目录的css文件夹下面，这个CSS样式文件以“.css”为扩展名，在head标签内使用link标签将CSS样式文件链接到HTML文件内：linkhref=style.cssrel=stylesheettype=text/css/一般外部式的样式文件名字为style.css。

HTML5+CSS3网页设计任务教程5使用CSS设置body样式任务3-1这三种样式是有优先级的，原则上是就近原则，但如果CSS样式在相同权值的情况下，他们的优先级是：内联式嵌入式外部式。

HTML5+CSS3网页设计任务教程6使用CSS设置body样式任务3-112网页背景颜色、背景图像的设置。网页字体样式的设置。3网页页边距的设置。

HTML5+CSS3网页设计任务教程7使用CSS设置body样式任务3-11、background-color:背景颜色，background-image:背景图像，background-repeat:背景重复，background-position:背景图像位置，background-attachment:如何设置固定的背景图像，background:#ff0000url(/i/eg_bg_03.gif)no-repeatfixedcenter/cover;这些参数从左到右依次是：background-color、background-image、background-repeat、background-attachment、background-position/background-size。值得注意的是background-size是CSS3的属性，它要与background-position配合使用，中间有一个斜杠分隔符。

HTML5+CSS3网页设计任务教程8使用CSS设置body样式任务3-12、margin:外边距，此处是指页边距，margin:20px;（上、下、左、右各20px），margin:20px40px;（上、下20px；左、右40px），margin:20px40px60px;（上20px；左、右40px；下60px），margin:20px40px60px80px;（上20px；右40px；下60px；左80px）在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。

HTML5+CSS3网页设计任务教程9使用CSS设置body样式任务3-13、font-size:字