第8章CSS基础语法选读.pptx

第8章 CSS基础语法 3.1 CSS概述 CSS指的是Cascading Style Sheets，即层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠”，实际上指的是将显示样式与显示内容分离。 3.1 CSS概述 为了解决设计样式和风格的问题，1997年，W3C在颁布HTML4标准的同时也发布了样式表的第一个标准CSS1.0。 从2010年开始，W3C已开始了对CSS3的研发，现在大部分的浏览器已支持CSS3，下一版的CSS4仍处在开发过程中。 3.1 CSS概述 使用CSS有许多优点，主要表现在： 可以方便地控制页面布局； 整个网站可以统一风格，只要整个网站使用统一的CSS文件即可； 网站的风格维护起来简单，只需要更改相应的CSS文件； 由于HTML文件基本上只包含内容，而不包括样式，因而结构简化，体积更小，下载更快，更加灵活，可读性增强； 浏览器的界面更友好； 认识CSS样式 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 CSS代码语法 CSS的定义是由三部分组成的，包括选择器（selector）、属性（properties）、属性的取值（value）。其语法为： selector{ property1:value; property2:value; … propertyN:value } 其中： selector是选择器，最常见的选择器是HTML标签；property是选择器的属性，value为选择器的属性值。多个选择器属性之间使用分号隔开。 CSS代码语法 可以使用单个选择器，也可以使用多个选择器，选择器之间用逗号隔开，即将一组属性值应用于多个选择器，例如： h1,h2,p{ background-color:#00FF00; color:red } 例1： css1.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 titleCSS使用示例-HTML选择器/title style type=text/css body { background-color: yellow } h1,h2,p { background-color: #00FF00; color: red } /style /head body 这是body内的文字br/ h1这是标题1文字/h1 h2这是标题2文字/h2 p这是段落文字/p /body /html 8.2 在网页上插入CSS样式表 从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。 1.内联式：把css代码直接写在现有的HTML标签中 2.嵌入式css样式，就是可以把css样式代码写在style type=text/css/style标签之间。 有些低版本的浏览器可能不支持style标记，此时，浏览器会忽略style标记，style标记内的内容会以文本的形式显示到页面上。为了避免此种情况的发生，可以在style标记之后添加“ !--”，在/style标记之前添加“--” 。 8.2 在网页上插入CSS样式表 外部式css样式(也可称为外联式)：把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在head内（不是在style标签内）使用link标签将css样式文件链接到HTML文件内 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel=stylesheet type=text/css 是固定写法不可修改。 3、link标签位置一般写在head标签之内。 8.2 在网页上插入CSS样式表 在使用样式表的各种方法中，外部样式表使用最为常见。 使用外部样式表有以下优点： 多个样式可以重复利用，一个外部CSS文件可以被多个网页使用； 修改、维护简单。当需要修改样式时，只需要修改CSS文件，不需要修改页面源代码； 可以有效地减少页面的代码量，提高网页的加载速度，CSS可以驻留在缓存中，再次使用时不需要加载； 整个网站的风格很容易统一，只要网站中的文件都链接同样的CSS文件即可。 8.2 在网页上插入CSS样式表 除了可以使用link标记链接外部样式表之外，还可以使用CSS提供的@import标记导入样式表，其格式如下： style type=“text/css” @import url(“…”); /style css9.html: !DOCTYP