1、Web设计-div与css,主讲：rove,w,e,b,Copyright All Rights Reserved.,1,前 言,随着利用表格进行布局的弊端逐渐暴露，web标准的重要性越来越被人们重视。网页主要由结构、表现和行为3个部分组成，对应的标准是结构化标准语言、表现标准语言和行为标准。CSS是最主要的表现标准语言，CSS+DIV的布局方法可以使外观与结构分离，使站点的访问及维护更加容易，CSS的特有技术也可以使网页变的更加美观。,2,Css的初步体验,第,一,章,3,本章学习目标,4,1.1 CSS的概念,CSS(Cascading Style Sheet),中文译为层叠样式表，它是
2、用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS 1996年通过W3C审核认证，并推荐使用。 CSS的引入使得html语言能够更好适应页面的美工设计。 以html语言为基础，具备丰富的格式化功能。,5,1.1 CSS的概念,传统html设计的缺点： 维护困难如果工程比较大，后期的维护成本会很高。 标记不足html本身的标记很少，例如：文字间距、段落缩进等标记在html中很难 找到 网页过胖由于没有对风格样式进行统一控制，html文件体积往往很大、很占资源 定位困难在整体布局页面时，html对于各个模块的位置调整显得力所不能及，过 多的同样给后期的维护带来一定的困难。,6
3、,1.1 CSS的概念,传统的html中控制网页布局样式很麻烦，例如下面的例子。倘若引入 CSS对其中的信息进行控制网页布局将会事半功倍。,7,1.1 CSS的概念,CSS与浏览器 使用CSS编辑网页，基本要求是主流的浏览器能够兼容。达到显示效果一致主流的浏览器 IE、Firefox、opera、等,8,1.1 CSS的概念,构造样式规则 样式表的每个规则都有两个主要部分：选择符（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。 基本语法：selector属性:属性值;属性:属性值 语法说明： selector表示希望进行格式化的
4、元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。,9,1.1 CSS的概念,10,将CSS样式定义在HTML标记内的，这是最简单的样式定义方法。 基本语法：语法说明： 标记：HTML标记，如body、table、p等； 标记的style定义只能影响标记本身； style的多个属性之间用分号分割； 标记本身定义的style优先于其他所有样式定义。,1.1 CSS的概念,在样式规则中添加注释 在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。/*此标
5、记应用在文档中*/ h1color:red;background:yellow; 注意：注释不能嵌套。,11,1.1 CSS的概念,在CSS里可以使用四种不同的方法，将样式表的功能加到网页里。 直接定义标记的style属性 定义内部样式表 嵌入外部样式表 链接外部样式表,12,1.2 使用CSS控制页面,使用CSS控制页面样式的方法有以下几种：1.行内样式是所有样式方法中最直接的一种，直接对html的标记使用style属性 讲CSS代码直接写在其中页面标题正文内容1 正文内容2 正文内容3,13,1.2 使用CSS控制页面,2.内嵌式内嵌式样式表就是将CSS屑在与之间，并用和进行声明。页面标题
6、紫色、粗体、下划线、25px的效果1紫色、粗体、下划线、25px的效果2紫色、粗体、下划线、25px的效果3,14,1.2 使用CSS控制页面,3.链接式将CSS样式表以优点：将页面框架html和美工代码CSS代码完全分离。页面标题CSS标题1紫色、粗体、下划线、25px的效果1CSS标题2紫色、粗体、下划线、25px的效果2,15,1.2 使用CSS控制页面,4.导入样式 在与之间用import将样式表导入 格式：import(sheet1.css)或 import sheet.css页面标题CSS标题1紫色、粗体、下划线、25px的效果1CSS标题2紫色、粗体、下划线、25px的效果2CS
7、S标题3紫色、粗体、下划线、25px的效果3,16,1.2 使用CSS控制页面,各种方式的优先级问题 在四种样式链接中:import 内嵌式 链接式 行内式,17,1.1 CSS的概念,18, H1 Color:red; Font-size:12px; ,H1, ,Color: red,Font-size:12px;,选择器,属性,值,声明,声明,属性,值,CSS标签选择器,1.2 使用CSS控制页面,19,直接定义标记的style属性此行文字被style属性定义为蓝色显示 此行文字没有被style属性定义,1.2 使用CSS控制页面,20,示例代码第一个段落标记被直接定义了style属性，此行文字将显示18像素大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示文字样式。结果如图10-2所示。,1.2 使用CSS控制页面,21,文字大小文字大小，0.5in文字大小，0.5cm文字大小，4mm文字大小，12pt文字大小，2pc,1.2 使用CSS控制页面,22,1.如果你用#号来声明你的样式的话那么在引用它的时候就用ID选择器来 做选择2.如果你用.来声明你的样式的话那么你就用class选择器来引用你的样式,点击添加标题,抽象主义的美学观念最早见于德国哲学家W.沃林格的著作抽离与情移。,23,谢谢观看,THANKS,P,P,T,24,
