DivCSS搭建静态网页.ppt

第三课 Div+CSS搭建静态网页,PHP程序员特训班,课程内容,表格布局重点难点回顾 CSS简介 CSS语法 CSS的使用 CSS使用手册 常用CSS代码,,为什么要学习本课,通过上节课大家对表格布局知识的学习，相信大家都有佷深刻的体会，我们编写的代码很多都放在同一个标签里面，代码冗余，这样有一个最大的劣势就是当我们在网站维护后期维护会相当的麻烦，我们必须一个一个代码去找，去修改，这样很不方便，今天呢，我们来学习一下网站的外衣CSS，并通过Div+CSS布局全新的静态网页。,,CSS简介,CSS 由 W3C（万维网联盟） 发明，概述如下： CSS 是标准的布局语言，用来控制元素的尺寸、颜色、排版。 CSS 非常精确，功能强大，易于编写。,,CSS基本语法,,代码结构：,注意事项： 属性与属性值之间用冒号隔开 一个选择器里面可以书写多个属性，但是一定要通过分号“;”隔开 空格以及大小写，对样式没有影响。,,值的不同写法和单位,,多重声明,,分组选择器,选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。,继承,,继承是必须的么？,,派生选择器,,派生实例,,ID选择器,,CSS类选择器,,内联样式表,如何插入样式表？当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种： 内联样式表、内部样式表、外部样式表。 内联样式表指的是，在HTML特定的标签中定义的CSS样式表。 常用的HTML 标签主要是BODY中的一些元素，如：， 等 实例： 我是行内样式表 解析：我通过行内样式表，设置标签的属性，字体大小为12像素，颜色为红色 缺点：你必须在每行标签中都要加入样式规则,,内部样式表,在Html页面内部定义的CSS样式表,叫做内部 样式表，也就是在HTML文档的head部分中，使用 style 标签并在该标签中定义一系列 CSS 规则。 语法： 说明： 指示CSS样式表开始，结束标志为 ，在开始标志 中可以根据需要添加一些属性，如上列中的属性type=“text/css“，它表示CSS样式表采用MIME类型，这种类型的特点是，当浏览器不支持CSS代码时，对CSS代码进行过滤，避免浏览器以源代码的方式显示CSS代码。为了保证更加可靠，在样式表里再次加上注释标识符“ “，CSS规则就定义在这个注释标识符中。,,外部样式表,链接外部样式表 外部CSS样式表是一个以 .css为后缀的外部文件,定义一个外部样式表可以应用于多个页面。在html页面中使用link标签，可以将外部的css样式表连接进来，其语法如下： 语法： 参数: 1 rel属性表示样式表将以何种方式与HTML文档结合。rel取值:Stylesheet,表示指定一个外部的样式表 2 *.css是单独保存的样式表文件。,,CSS样式优先级,样式表也有自己的优先级： 这个优先级的记法也很简单：就近一致原则（和英语语法一样哦） 大小关系如下所示： 行内样式表嵌入式样式表外部链接样式表(当属性重复时) 当属性不重复，就独立显示出来。,,常用CSS代码解析背景,css背景色,,CSS背景图像,,背景重复,,常用CSS标签解析文本,,水平对齐,,常用CSS标签解析字体,字体风格,,字体加粗,,文本大小,,常用CSS标签解析列表,,常用CSS标签解析表格,,表格的宽度和高度,,表格的对齐方式,垂直对齐方式,,表格的颜色,,CSS盒子模型,,伪类,,总结,CSS的优势 CSS的基