HTML5+CSS3+JavaScript+Bootstrap网站开发实用技术（第3版）课件 第3章 美化网页——使用CSS技术.pptx

第3章美化网页——使用CSS技术CSS概述1CSS基本选择器2在HTML中使用CSS的方法3CSS复合选择器4用CSS设置文本样式5用CSS设置颜色与背景6用CSS设置图像效果7应用案例8小结9

3.1CSS概述CSS(CascadingStyleSheet)称为层叠样式表，也称样式表，其文件扩展名为.css。CSS是用于控制网页样式，并允许将网页内容与样式信息分离的一种标记语言。结构和风格分离扩充了HTML标记提高了网站维护的效率可以实现精美的页面布局CSS的优点

3.1CSS概述1996年12月，W3C发布CSS1.0规范。1998年5月，CSS2规范发布。2001年5月，W3C完成了CSS3的工作草案。CSS的发展CSS的引入HTML语言更好地适应页面的美工设计在提供了丰富的格式化功能，如字体、颜色、背景和整体排版等可以针对各种可视化浏览器来设置不同的样式风格

3.1CSS概述浏览器对CSS3的支持主济浏览器都支持CSS3样式。少数标记需要在不同浏览器中加以说明。CSS的编辑器CSS文件是文本格式文件NodePad++、记事本等DreamweaverCS6，WebStorm等

3.2CSS基本选择器选择器，selector。根据功能或作用范围，将选择器主要分为标记选择器、类别选择器和ID选择器3种。CSS可以认为是由多个选择器组成的集合，每个选择器由3个基本部分组成：“选择器名称”、“属性”和“值”。selector{property:value;}

3.2CSS基本选择器3.2.1标记选择器一个HTML页面由很多不同的标记组成p、h1、div、……标记选择器用于控制页面中所有同类标记的显示样式tagName{ property:value;}

3.2CSS基本选择器3.2.2类选择器类选择器用来为一系列标记定义相同的呈现方式.className{property:value}className是选择器的名称，具体名称由用户命名。

3.2CSS基本选择器demo0303.html

3.2CSS基本选择器3.2.3ID选择器对特定属性的属性值进行设置ID选择器和类选择器的区别一个HTML文件中ID的属性值是唯一的#idName{property:value;}idName是选择器名称，可以由CSS定义者自己命名。

3.2CSS基本选择器demo0304.html

3.3在HTML中使用CSS的方法为了设置的CSS样式能够在网页中产生作用，必须将CSS和HTML文件联接在一起，才可以正常工作。在HTML文件中使用CSS的方式有4种：行内样式、嵌入式、链接式和导入式。

3.3在HTML中使用CSS的方法CSS的样式行内样式把CSS代码添加到HTML标记上嵌入样式定义样式集，通过style和/style声明链接样式用Link标记声明导入样式style标记中，使用@import导入外部的CSS文件h1style=color:blue;font-style:bold“/h1linkrel=”stylesheet”type=”text/css”href=”mystyle.css”/styletype=text/css“@importmystyle.css;/style

3.3在HTML中使用CSS的方法示例demo0305.htmldemo0306.htmldemo0307.html

3.3在HTML中使用CSS的方法各种方式的优先级同一个页面使用多种引用CSS样式表的方法，比如同时使用行内样式、链接样式和嵌入样式，当几种方式的样式定义共同作用于同一属性，会出现优先级问题。导入样式链接样式嵌入样式行内样式样式的优先级按箭头方向逐渐升高

3.4CSS复合选择器复合选择器就是两个或多个基本选择器，通过不同方式组合而成的选择器.实现更强、更方便的选择功能。包括交集选择器、并集选择器和后代选择器等。伪类选择器和伪对象选择器。

3.4CSS复合选择器3.4.1交集选择器交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。第一个必须是标记选择器，第二个必须是类选择器或ID选择器。tagName.className{ property:value;}demo0311.html

3.4CSS复合选择器3.4.2并集选择器并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开每个选择器可以是任何类型的选择器selector1,selector2,…{property:value;}demo0312.html

3.4CSS复合选择器3.4.3后代选择