《《css技术概述web》ppt课件》由会员分享，可在线阅读，更多相关《《css技术概述web》ppt课件（74页珍藏版）》请在金锄头文库上搜索。
1、,CSS技术概述,1、网页的表现和内容分离的实现,1）、内容(Content) 内容是页面实际要传达的真正信息，包括数据、 文挡或者图片等；,2）、结构（Structure） 结构就是对网页内容进行整理和分类。利用结构 化标准语言使网页内容更加具有逻辑性和易用性； （1）、HTML （2）、XML,(Extensible Markup Language(可扩 展标记语言)，XML最初设计的目的是弥补HTML的 不足，后来逐渐用于网络数据的转换和描述； 推荐使用W3C于2000年发布的XML1.0,（3）、XHTML (可扩展超文本标记语言) 推荐使用W3C于2000年发布的XHTML1.0,结
2、构层主要用于对内容进行格式化处理。 例如： 定义标题 定义段落 定义列表 等等,3）、表现（Presentation) 表现是对结构化的信息进行样式上的控制， 例如对颜色、大小、背景等外观进行控制。 表现层标准语言CSS 推荐使用w3c于1998年发布的CSS2.0 W3C创建CSS标准目的是以CSS取代HTML的表格式布局。,4）、行为(Behavior) 行为是对内容的交互和操作效果； 表现行为有以下2类： （1）、DOM。DOM是Document Object Model (文档对象模型) （2）、Script（脚本语言：JavaScript、 VBScript）,网页分层样例,（1）、
3、网页的内容,（2）、网页的 内容 + 结构,（3）、网页的 内容 + 结构 + 表现,例子：,1、 body background-image: url(images/water.jpg); margin: 0 0 0 0; ,2、CSS 来 定义表格的一些属性,一、CSS的定义,CSS主要是将定义好的规则应用到文档中的元素， 这样可以将网页的内容与网页的表现形式进行分 开定义； 这样做的好处： 1、提高设计的标准化程度； 2、减少网页设计的工作量； 3、提高网站的可维护性。,1、CSS的定义的组成,一般来说，每个CSS样式由一系列规则组成， 每条规则由两部分作成：选择符和声明 （Declar
4、ation），每条声明由：属性名和 属性值组成；,P, : ,color,red,选择符,属性名,声明（Declaration）,属性值,CSS的定义样例,#Div2 padding: 20px; height: 250px; width: 250px; margin-top: 30px; margin-right: 50px; margin-bottom: 30px; margin-left: 50px; border: 3px solid #FF3300; ,填充,上边距,二、CSS的选择符分类,DreamWeare 新建CSS样式的对话框,1、类选择符 2、标签选择符 3、ID选择符 4
5、、伪类选择符,1、类选择符,在CSS里用一个点开头表示类别选择符定义， 例如： .14px color : #f60 ;font-size:14px ; 在页面中，用class=“类别名”的方法调用： 14px大小的字体 p.right text-align:right p.centertext-align:center dddddd dddddd,.abc ,2、ID选择符,在CSS里用“#”开头表示ID选择符的定义,#Div2 padding: 20px; height: 250px; width: 250px; margin-top: 30px; margin-right: 50px;
6、margin-bottom: 30px; margin-left: 50px; border: 3px solid #FF3300; ,.Div2 padding: 20px; height: 250px; width: 250px; margin-top: 30px; margin-right: 50px; margin-bottom: 30px; margin-left: 50px; border: 3px solid #FF3300; ,类选择符,P#title01 font-family:”宋体”； font-size:12px; color:#FF0000; ,段落的标题,P.tit
7、le01 font-family:”宋体”； font-size:12px; color:#FF0000; ,段落的标题,#abc ,不能这样写 否则结果如下 abc,ID选择符与类选择符的差别：,1、类选择符可以重复使用， 而且可以在任意元素上使用，使用任意次； 2、HTML内id属性是唯一的， 只有拥有该id的元素才会应用该样式； 3、ID选择符的优先权高于类选择符。,ID选择器,类选择器,3、标签选择符,标签选择符也称类型选择符， HTML中所有标签都可以做为标签选择符 在CSS中直接写标签名即可，即是对标签样式 的重新定义；,body background-image: url(ima
8、ges/water.jpg); ,4、伪类选择符,伪类可以看作是一种特殊的类选择符， 是能被支持CSS的浏览器自动所识别的 特殊选择符号。 伪类所指定的对象在文档中并不存在，而是指定 的是元素的某种状态。,伪类定义的语法结构： 选择符：伪类名 属性：值 ,伪类名在CSS中已经定义好了，不能随意取名；,华东交通大学,a元素的伪类： 1、link 表示未访问的连接 2、visited 表示已经访问过的连接 3、active 表示激活的连接 4、hover 表示鼠标停留在连接上,a:link font-family: “宋体“; font-size: 12px; color: #FF0000; a:
9、visited font-family: “宋体“; font-size: 12px; color: #00FF00; a:hover font-family: “宋体“; font-size: 12px; color: #0000FF; a:active font-family: “宋体“; font-size: 12px; color: #FF00FF; ,5、标签指定式选择符,在使用标签选择符时，如果同时定义id或者class选择符， 则可以对标签选择符进行分类。,h1.words font-size:18px; line-height:140%; ,h1#navbar font-siz
10、e:18px; line-height:140%; ,表示针对所有class为words 的h1标签设置样式,表示针对id为navbar 的h1标签设置样式,标签指定式选择符的好处： 1、标签指定式选择符可以更精确地选择特定 的标签进行样式设定； 2、可以对同一类标签再进行样式分类；,h1.words font-size:18px; line-height:140%; ,h1.navbar font-size:18px; line-height:140%; ,6、包含选择符,包含选择符是可以单独对某种元素包含关系进行样式定义。,例如： 元素1包含元素2，要定义元素2的样式：,1）、使用类选择符
11、： .class2 ,包含多个元素2,则每个元素2都必须进行class申明,2）、使用ID选择符： #id21 #id22 #id23 ,包含多个元素2,则每个元素2都必须进行ID申明,3）、标签指定式选择符： 元素1 元素2 ,即使包含多个元素2,则每个元素2都无须进行任何申明,标签指定式选择符好处： 有时候可以避免过多的使用id或者class样式定义。,table a font-size:15px; color:red; ,表示table标签内的所有a对象的样式,包含选择符样例演示,7、CSS 应用到网页中,1、标记加注法 2、外部调用法 , Cascading Order p font-
12、size:12pt 这个段落的内嵌样式(Inline Style)覆盖(overwrite)了内部样式表(Internal Style Sheet)，显示的字体大小是30pt，而不是12pt。 ,CSS 常用属性,1、CSS 字体属性 (Font),字体名称属性(font-family) 这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下： .s1 font-family:Arial 字体大小属性(font-size) 这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是px（象素）和pt（磅）。例句如下： .s2 font-size:16pt
13、字体风格属性(font-style) 这个属性有三个值可选：normal (普通)，italic (斜体) 或oblique (倾斜)。normal是缺省值，italic, oblique都是斜体显示。例句如下： .s1 font-sytle:italic,字体浓淡属性(font-weight) 这个属性常用值是normal和bold，normal是缺省值。例句如下： 这段文字字体的浓淡属性(font-weight)值是bold。 字体变量属性(font-variant) 这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下
14、： .s1 font-variant:small-caps 字体属性(font) 这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下： .s1 font:italic normal bold 11pt arial 字体颜色(color) caps表示小的大写字体。例句如下：等属性！ 字体颜色用CSS中的color属性来表示。,2、CSS 常用文本属性,文本对齐属性(text-align) 这个属性用来设定文本的对齐方
15、式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下： .p2 text-align:right 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线) 示例代码如下： .p2 text-decoration: underline,文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位
16、(cm, mm, in, pt, pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比) 示例代码如下： .p1 text-indent: 8mm 行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象高度的百分比) 示例代码如下： .p1 line-height:1cm,字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可
