web开发基础_CSS.pptVIP

Web开发基础—— 讲解提纲 CSS简介 调用样式表 CSS的单位 CSS选择器 CSS的层叠性 CSS属性 讲解提纲 CSS简介 调用样式表 CSS的单位 CSS选择器 CSS的层叠性 CSS属性 CSS简介——What is CSS? CSS(Cascading Style Sheet,层叠样式表),也叫“样式表”，是一种设计网页样式的工具。是用于增强网页样式控制并允许将样式信息与网页内容分离的一种标记性语言。 CSS是用于布局与美化网页的。 CSS文件是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀。 CSS是大小写不敏感的 CSS的基本语法格式 selector{ property1:value1; property2:value2; ……} Selector定义样式作用的对象，也叫“选择器” property为CSS属性，value为属性对应的值。 注意：如果属性的值是多个单词组成，必须在值上加引号，比如： font-family:Times New Roman CSS简介——优点 方便网页样式的修改 能使网页元素更准确的定位 减少网页体积 良好的适应性 讲解提纲 CSS简介 调用样式表 CSS的单位 CSS选择器 CSS的层叠性 CSS属性 调用样式表 在页面中调用样式表的方法 行内样式 内嵌式 链接式 导入式 调用样式表——行内样式 使用style属性可以在html标记符中直 接嵌入样式定义。如下： 标记 style=“property1:value1;property2:value2;… 其中，style属性的取值形式为： “CSS属性:CSS属性值” 多个属性用分号分隔 特点：写入到代码中的一次性的样式，在一个元素上应用一次。 调用样式表——内嵌式 内嵌样式表就是在head标记内使用style标记符，然后在style标记中定义样式。如下: style样式定义 /style 样式定义的方式为selector{property1:value1;property2:value2;property3:value3;……} 特点：可控制一个页面中元素的样式表。 调用样式表——链接式 链接式是把样式表保存为一个样式表文件(*.css)，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head/head标签内。如下： link rel=“stylesheet” type=“text/css” href=“stylesheet.css” 特点：可控制许多页面中的元素的样式表，可以通过改变一个文件来改变整个站点的外观。 调用样式表——导入式 导入式与链接式的功能基本相同， 在html文件中使用@import语句导入样式表，有几种形式，可以任意选择一种放在style与/style标记之间。如下： @import url(mycss.css); @import url(“mycss.css”); @import url(‘mycss.css’); @import mycss.css; @import “mycss.css”; @import ‘mycss.css’; 特点：可控制许多页面中的元素的样式表。 注意：该外部样式表的路径是否正确。 调用样式表——样式的优先级 行内样式内嵌式 vs 链接式 vs 导入式 样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。 讲解提纲 CSS简介 调用样式表 CSS的单位 CSS选择器 CSS的层叠性 CSS属性 CSS的单位——长度单位 绝对长度单位 in:英寸(inches: 1英寸=2.54厘米) cm:厘米(centimeters) mm:毫米(millimeters) pt: 点(Points: 1点=1/72英寸) pc:皮卡(Picas: 1皮卡=12点) 如果用于打印页面，那么可以考虑使用绝对单位。 CSS的单位——长度单位 相对长度单位 em:相对于当前对象内文本的字体尺寸。em单位的尺寸为大写英文字母“M”或 “H”的高度。 ex:相对于字符“x”的高度。此高度通常为字体尺寸的一半。 px:像素是相对于显示器屏幕分辨率而言的。 CSS的单位——百分比单位 可以使用百分比单位指定尺寸。 如：P{line-height:150%} 百分比单位的格式是：[+/-]数字% 百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。 CSS的单位——颜色单位 颜色值是