网页设计与制作课件 第8章 CSS3基础.pptx

CSS3基础PowerPointdesign

01CSS3概述CONTENTS目录CSS的语法结构02添加CSS样式表0301

CSS3概述Part01

（1）打开Dreamweaver，单击“代码”按钮，进入“代码”视图。（2）在head/head标记之间添加代码，表示设置网页中文字大小、颜色与背景。（3）在body/body标记之间添加代码，表示在网页中输入文字“编写CSS”。p编写CSS/p（4）保存文件，浏览网页。课堂案例——编写CSS

CSS是CascadingStyleSheets的简称，也称为“层叠样式表”。CSS是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文件的标志（TAG）里，也可以在外部附件文件中。如果是附件文件，一个样式表可以用于多个页面，甚至整个站点，因此具有更好的易用性和扩展性。创建的CSS样式表可以应用到很多页面中，从而使不同的页面获得相同的布局和外观，因此CSS具有更好的易用性与扩展性。DreamweaverCC中对样式表的支持达到了一个比较高的程度。通过样式面板可以对网页中的样式表进行管理，其中建立样式表的几种方式将样式表的应用优点体现得淋漓尽致，而且通过扩展可以用样式表制作比较复杂的样式。什么是CSS

CSS样式可以为网页上的元素精确地定位和控制传统的格式属性（如字体、尺寸、对齐等），还可以设置如位置、特殊效果、鼠标滑过之类的HTML属性。可以将CSS优越性归纳为以下几点：1.将格式和结构分离2.以前所未有的能力控制页面布局3.制作体积更小、下载更快的网页4.将许多网页同时更新，比以前更快更宜易5.浏览器将成为更友好的界面CSS的优越性

CSS语句是内嵌在HTML文档内的，所以编写CSS的方法和编写HTML文档的方法是一样的，可以用任何一种文本编辑工具来编写，比如Dreamweaver和Windows下的记事本与写字板以及专门的HTML文本编辑工具（Ultraedit）。CSS的代码都是由一些最基本的语句构成，它的基本语句的语法如下。Selector{property:value}在以上语法中，property:value指的是样式表定义，property表示属性，value表示属性值，属性与属性值之间用冒号（:）隔开，属性值与属性值之间用分号（;）隔开，因此以上语法也可以表示如下。选择符{属性1:属性值1;属性2:属性值2}Selector是选择符，一般都是定义样式HTML的标记，比如table、body、p等，请看以下代码示例。p{font-size:50;font-style:bold;color:blue}这里P是来定义该段落内的格式，font-size、font-style和color是属性，分别定义P中字体的大小（size）、样式（style）和颜色（color），而50、bold、blue是属性值，意思是以50pt、粗体、蓝色的样式显示该段落。CSS3的基础语法

CSS样式位于文档签之间，其作用范围由class或其他任何符合CSS规范的文本设置。CSS层叠样式表包含4种类型：1自定义CSS样式2包含特定ID属性的标签3定义HTML标签4复合内容CSS样式的类型

CSS的语法结构Part02

（1）打开Dreamweaver，单击“代码”按钮，进入“代码”视图。（2）在head/head标记之间添加代码。（3）在body/body标记之间添加代码，表示在网页中输入文字“设置背景颜色”。（4）保存文件，浏览网页。课堂案例——定义网页背景颜色与字体

CSS的语法结构由三部分组成：选择符（Selector）、属性（property）和值（value),简单的CSS规则如下所示：选择符{属性：值}CSS属性与选择符号011.选择符（Selector)是指这组样式编码所要针对的对象，可以是一个HTML标签，如body，h1；也可以是定义了特定id或class的标签，如#main选择符表示选择divid=”main”，即一个名称为main的id对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。

CSS属性与选择符号022.属性(property)是CSS样式控制的核心，对于每一个HTML中的标签，CSS者提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。033.值(value)是指属性的值，形式有两种：一种是指定范围的值，如float属性，只可能应用left、right、none、inherit四种值；另一种为数值，如width能够使用0-9999px，或其他单位来指定。

在上一节中的body{}便是一种类型选择符。所谓类型选择符，是指网页中已有