网页设计课件.ppt

1、第13章 CSS基础,网页设计与制作,网页设计与制作,Cascading Style Sheet 层叠样式表,网页包括的内容和样式。 CSS就是让内容和样式分离开来，HTML只控制网页的内容，内容的样式由CSS来控制。,网页设计与制作,CSS的优点,可以更加精细的控制网页的内容。 比HTML更加丰富。 便于重用、修改 基于Web标准的网页设计方法的设计基础,网页设计与制作,CSS样式的优点：,只修改一个.css文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的工作量。） 可以“随心所欲”地控制页面布局和外观； 在所有浏览器和平台之间具有较好的兼容性； 精简网页，

2、提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。,网页设计与制作,一、CSS分类,CSS按其位置可以分成三种： 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet),网页设计与制作,1、内嵌样式(Inline Style),Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。 这个Style定义里面的文字是20px字体，字体颜色是红色。 ,网页设计与制作,2、内部样式

3、表(Internal Style Sheet),内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。 内部样式表(Internal Sytle Sheet)要用到Style这个Tag，写法如下： ,网页设计与制作,内部css, 对HTML标记直接定义 h1 font-family:楷体; color:yellow h2 font-family:黑体; color:blue 此行文字为黄色楷体的字体 此行文字为蓝色黑体的字体 ,网页设计与制作, 第一个CSS 应用了s1样式,绿色，字体大小57px 应用了s2样式，字体为红色 ,网页设计与制作,3.1、引入外部CSS1link,hea

4、dlink rel=”stylesheet” href=”*.css” type=”text/css” /head,网页设计与制作,3.2引入外部CSS1import, import url(“1.css”); ,网页设计与制作,Import 和 link 的区别,两种外部样式表的调用方法虽然有所不同，但它们的效果是一样的，只是嵌入CSS外部表的时候，import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式。 小的CSS文件采用import，大的文件采用link，在实际应用中，CSS文件一般很小，两种方法差别很小。,网页设计与制作,使用外部(Exten

5、al)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：,样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 提高网页显示的速度。 （外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。,网页设计与制作,二、层叠(Cascading),CSS第一个字母，是Cascading，意为层叠。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。 Cascading的顺序是： 内嵌样式表(Inline Style)(

6、优先级最高) 内部样式表(Internal Style Sheet) 外部样式表(Extenal Style Sheet) import link 浏览器缺省(browser default)(优先级最低),网页设计与制作,三、基本语法,一个样式(Style)的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)。 selector property: value； property: value； ,网页设计与制作, 第一个CSS 应用了s1样式,绿色，字体大小57px 应用了s2样式，字体为红色 自定义样式（类选择符）的命名规则： 必须以.开头 不能

7、以数字开头 不能包含汉字和特殊字符,网页设计与制作,四、常见样式属性1、CSS字体属性,网页设计与制作,2、CSS常用文本属性,length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比),网页设计与制作,相对长度单位,绝对长度单位,单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc,网页设计与制作,3、背景属性,网页设计与制作,第14章 CSS选择符,一、class选择符 二、标签选择符 三、ID选择符,网页设计与制作,一、class选择符,class

8、选择符允许重复使用，其命名必须以“.”开头，这样的样式可以与任何标签组合使用 1、通用的类选择器 例如： 定义：.s1color:green； 调用：绿色 绿色 2、只能与指定标签一起使用 例如： 定义：p.s1 color:green； 调用：绿色 绿色 这里只有标记显示为绿色。,网页设计与制作,二、标签选择符,指以HTML标签作为名称的选择符，通过CSS可以重新定义这些HTML标签的显示样式。这些重新定义的标签会自动按照CSS中重新的定义得样式显示 1、单标签选择符 例如： 定义：p color:green； 调用：绿色 大家好 这里所有的标记都显示为绿色,网页设计与制作,2、包含选择符

9、定义只有在指定标签内的标签才显示CSS样式 例如： 定义：p span color:green； 调用：绿颜色 大家好 hello 这里的只有p标记中的span标记才显示为绿色，即字“绿”显示为绿色,网页设计与制作,三、ID选择符,ID的含义是标识，ID选择符可以标识网页中的元素，它可以实现的功能和CSS选择符相似。与CLASS选择符不同的是，ID选择符在一个网页中按照规范只能使用一次，并且可以被Javascript在需要的时候调用。 例如： 定义：#box color:green；background-color:yellow; 调用：这里的文字是绿色的，背景颜色是黄色,网页设计与制作,di

10、v标记内的标记的样式 例如： 定义：#box spancolor:green；background-color:yellow; 调用：大家好这里的文字是绿色的，背景颜色是黄色,网页设计与制作,三种定义和调用的方法,网页设计与制作,群组选择符,定义将多个CSS样式定义为相同的内容，多个CSS样式间用“，”分隔。 例如： 定义：p,h1,h2 color:green； 调用：绿色 大家好 hello 这里的p、h1、h2标记都显示为绿色,网页设计与制作,四、CSS伪类(pseudo class),超链接伪类,伪类是最常用的伪类。 例句： a:link color: #FF0000 /* 未被访问的

11、链接 红色 */ a:visited color: #00FF00 /* 已被访问过的链接 绿色 */ a:hover color: #FFFF00 /* 鼠标悬浮在上的链接 橙色 */ a:active color: #0000FF /* 鼠标点中激活链接 蓝色 */,网页设计与制作,CSS伪类的语法有两种,第一种： selector:pseudo-class property: value 例如： a:link color:red 第二种：selector.class:pseudo-class property: value 例如： a.c1:link color:red,网页设计与制作,

12、其他伪类,Selector : first-letter property: value Selector : first-line property: value 例如： p font-size:30px;color:blue; p:first-letter color:red;font-size:200%;float:left; p:first-line color:pink; font-variant: small-caps; letter-spacing: 200%;,网页设计与制作,作业1：用CSS完成下列效果,1、文字为粗体，12px，斜体，带删除线（line-through），黑体 2、文字中都