《CSS技术概述W》PPT课件.ppt

,CSS技术概述,1、网页的表现和内容分离的实现,1）、内容(Content)内容是页面实际要传达的真正信息，包括数据、文挡或者图片等；,2）、结构（Structure）结构就是对网页内容进行整理和分类。利用结构化标准语言使网页内容更加具有逻辑性和易用性；（1）、HTML（2）、XML,(ExtensibleMarkupLanguage(可扩展标记语言)，XML最初设计的目的是弥补HTML的不足，后来逐渐用于网络数据的转换和描述；推荐使用W3C于2000年发布的XML1.0,（3）、XHTML(可扩展超文本标记语言)推荐使用W3C于2000年发布的XHTML1.0,结构层主要用于对内容进行格式化处理。例如：定义标题定义段落定义列表等等,3）、表现（Presentation)表现是对结构化的信息进行样式上的控制，例如对颜色、大小、背景等外观进行控制。表现层标准语言CSS推荐使用w3c于1998年发布的CSS2.0W3C创建CSS标准目的是以CSS取代HTML的表格式布局。,4）、行为(Behavior)行为是对内容的交互和操作效果；表现行为有以下2类：（1）、DOM。DOM是DocumentObjectModel(文档对象模型)（2）、Script（脚本语言：JavaScript、VBScript）,网页分层样例,（1）、网页的内容,（2）、网页的内容+结构,（3）、网页的内容+结构+表现,例子：,1、bodybackground-image:url(images/water.jpg);margin:0000;,2、CSS来定义表格的一些属性,一、CSS的定义,CSS主要是将定义好的规则应用到文档中的元素，这样可以将网页的内容与网页的表现形式进行分开定义；这样做的好处：1、提高设计的标准化程度；2、减少网页设计的工作量；3、提高网站的可维护性。,1、CSS的定义的组成,一般来说，每个CSS样式由一系列规则组成，每条规则由两部分作成：选择符和声明（Declaration），每条声明由：属性名和属性值组成；,P,:,color,red,选择符,属性名,声明（Declaration）,属性值,CSS的定义样例,#Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,填充,上边距,二、CSS的选择符分类,DreamWeare新建CSS样式的对话框,1、类选择符2、标签选择符3、ID选择符4、伪类选择符,1、类选择符,在CSS里用一个点开头表示类别选择符定义，例如：.14pxcolor:#f60;font-size:14px;在页面中，用class=“类别名”的方法调用：14px大小的字体p.righttext-align:rightp.centertext-align:centerdddddddddddd,.abc,2、ID选择符,在CSS里用“#”开头表示ID选择符的定义,#Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,.Div2padding:20px;height:250px;width:250px;margin-top:30px;margin-right:50px;margin-bottom:30px;margin-left:50px;border:3pxsolid#FF3300;,类选择符,P#title01font-family:”宋体”；font-size:12px;color:#FF0000;,段落的标题,P.title01font-family:”宋体”；font-size:12px;color:#FF0000;,段落的标题,#abc,不能这样写否则结果如下abc,ID选择符与类选择符的差别：,1、类选择符可以重复使用，而且可以在任意元素上使用，使用任意次；2、HTML内id属性是唯一的，只有拥有该id的元素才会应用该样式；3、ID选择符的优先权高于类选择符。,ID选择器,类选择器,3、标签选择符,标签选择符也称类型选择符，HTML中所有标签都可以做为标签选择符在CSS中直接写标签名即可，即是对标签样式的重新定义；,bodybackground-image:url(images/water.jpg);,4、伪类选择符,伪类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符号。伪类所指定的对象在文档中并不存在，而是指定的是元素的某种状态。,伪类定义的语法结构：选择符：伪类名属性：值,伪类名在CSS中已经定义好了，不能随意取名；,华东交通大学,a元素的伪类：1、link表示未访问的连接2、visited表示已经访问过的连接3、active表示激活的连接4、hover表示鼠标停留在连接上,a:linkfont-family:宋体;font-size:12px;color:#FF0000;a:visitedfont-family:宋体;font-size:12px;color:#00FF00;a:hoverfont-family:宋体;font-size:12px;color:#0000FF;a:activefont-family:宋体;font-size:12px;color:#FF00FF;,5、标签指定式选择符,在使用标签选择符时，如果同时定义id或者class选择符，则可以对标签选择符进行分类。,h1.wordsfont-size:18px;line-height:140%;,h1#navbarfont-size:18px;line-height:140%;,表示针对所有class为words的h1标签设置样式,表示针对id为navbar的h1标签设置样式,标签指定式选择符的好处：1、标签指定式选择符可以更精确地选择特定的标签进行样式设定；2、可以对同一类标签再进行样式分类；,h1.wordsfont-size:18px;line-height:140%;,h1.navbarfont-size:18px;line-height:140%;,6、包含选择符,包含选择符是可以单独对某种元素包含关系进行样式定义。,例如：元素1包含元素2，要定义元素2的样式：,1）、使用类选择符：.class2,包含多个元素2,则每个元素2都必须进行class申明,2）、使用ID选择符：#id21#id22#id23,包含多个元素2,则每个元素2都必须进行ID申明,3）、标签指定式选择符：元素1元素2,即使包含多个元素2,则每个元素2都无须进行任何申明,标签指定式选择符好处：有时候可以避免过多的使用id或者class样式定义。,tableafont-size:15px;color:red;,表示table标签内的所有a对象的样式,包含选择符样例演示,7、CSS应用到网页中,1、标记加注法2、外部调用法,CascadingOrderpfont-size:12pt这个段落的内嵌样式(InlineStyle)覆盖(overwrite)了内部样式表(InternalStyleSheet)，显示的字体大小是30pt，而不是12pt。,CSS常用属性,1、CSS字体属性(Font),字体名称属性(font-family)这个属性设定字体名称，如Arial,Tahoma,Courier等。例句如下：.s1font-family:Arial字体大小属性(font-size)这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是px（象素）和pt（磅）。例句如下：.s2font-size:16pt字体风格属性(font-style)这个属性有三个值可选：normal(普通)，italic(斜体)或oblique(倾斜)。normal是缺省值，italic,oblique都是斜体显示。例句如下：.s1font-sytle:italic,字体浓淡属性(font-weight)这个属性常用值是normal和bold，normal是缺省值。例句如下：这段文字字体的浓淡属性(font-weight)值是bold。字体变量属性(font-variant)这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：.s1font-variant:small-caps字体属性(font)这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：.s1font:italicnormalbold11ptarial字体颜色(color)caps表示小的大写字体。例句如下：等属性！字体颜色用CSS中的color属性来表示。,2、CSS常用文本属性,文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：left(居左，缺省值)right(居右)center(居中)justify(两端对齐)示例代码如下：.p2text-align:right文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值：none(无，缺省值)underline(下划线)overline(上划线)line-through(当中划线)示例代码如下：.p2text-decoration:underline,文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法：length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px)percentage(百分比，相当于父对象宽度的百分比)示例代码如下：.p1text-indent:8mm行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法：normal(缺省值)length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px)percentage(百分比，相当于父对象高度的百分比)示例代码如下：.p1line-height:1cm,字间距属性(letter-spacing)这个属性用来设定字符之间的距离。normal(缺省值)length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px)示例代码如下：.p1letter-spacing:3mm颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTMLColorReference)。示例代码如下：.p1color:gray,3、CSS背景属性,背景颜色属性(background-color)演示示例上面的代码表示图片竖向重复。这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。bodybackground-color:#99FF00;上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。背景图片属性(background-image)这个属性为HTML元素设定背景图片，相当于HTML中background属性。上面的代码为Body这个HTML元素设定了一个背景图片。,背景重复属性(background-repeat)这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。repeat-x背景图片横向重复repeat-y背景图片竖向重复no-repeat背景图片不重复bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:repeat-y上面的代码表示图片竖向重复。背景附着属性(background-attachment)这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat;background-attachment:fixed上面的代码表示图片固定不动，不随内容滚动而动。示例,背景位置属性(background-position)这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。bodybackground-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat;background-position:20px60px上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。背景属性(background)这个属性是设置背景相关属性的一种快捷的综合写法，包括background-color,background-image,background-repeat,backgroundattachment,background-position。bodybackground:#99FF00url(./images/css_tutorials/background.jpg)no-repeatfixed40px100px上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。,4、CSS边框属性(Border),边框风格属性(border-style)这个属性用来设定上下左右边框的风格，它的值如下：none(没有边框，无论边框宽度设为多大)dotted(点线式边框)dashed(破折线式边框)solid(直线式边框)double(双线式边框)groove(槽线式边框)ridge(脊线式边框)inset(内嵌效果的边框)outset(突起效果的边框)示例边框宽度属性(border-width)这个属性用来设定上下左右边框的宽度，它的值如下：medium(是缺省值)thin(比medium细)thick(比medium粗)用长度单位定值。可以用绝对长度单位(cm,mm,in,pt,pc)或者用相对长度单位(em,ex,px)。演示示例：分别用medium,thin,thick和长度单位定制的CSS边框宽度属性示例,边框颜色属性(border-color)这个属性用来设定上下左右边框的颜色。例句如下：.d5border-color:gray;border-style:solid;边框属性(border)这个属性是边框属性的一个快捷的综合写法，它包含border-width,border-style和border-color。例句如下：.d1border:5pxsolidgray;,上下左右四个边框不但可以统一设定，也可以分开设定。单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用border-top,border-top-width,border-top-style,border-top-color。分别用medium,thin,thick和长度单位定制的CSS边框宽度属性示例。设定下边框属性，你可以使用border-bottom,border-bottom-width,border-bottom-style,border-bottom-color。上下左右四个边框不但可以统一设定，也可以分开设定。设定左边框属性，你可以使用border-left,border-left-width,border-left-style,border-left-color。设定右边框属性，你可以使用border-right,border-right-width,border-right-style,border-right-color。演示示例：设置单边边框属性的示例,5、CSS边距属性(Margin),边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。左边距属性(margin-left)这个属性用来设定左边距的宽度。示例如下：.d1margin-left:1cm演示示例右边距属性(margin-right)上下左右边距宽度相同：上下左右边距宽度相同。这个属性用来设定右边距的宽度。示例如下：.d1margin-right:1cm上边距属性(margin-top)这个属性用来设定上边距的宽度。示例如下：.d1margin-top:1cm下边距属性(margin-bottom)这个属性用来设定下边距的宽度。示例如下：.d1margin-bottom:1cm,边距属性(margin)这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。你可以为上下左右边距设置相同的宽度。示例入下：.d1margin:1cm你也可以分别设置边距，顺序是上，右，下，左。示例如下：.d1margin:1cm2cm3cm4cm上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。演示示例：上下左右边距宽度相同演示示例：上下左右边距宽度各不相同,6、CSS间隙属性(Padding),间隙属性(padding)是用来设置元素内容到元素边界的距离。左间隙属性(padding-left)这个属性用来设定左间隙的宽度。示例如下：.d1padding-left:1cm演示示例右间隙属性(padding-right)左间隙为4cm。这个属性用来设定上间隙的宽度。这个属性用来设定右间隙的宽度。示例如下：.d1padding-right:1cm上间隙属性(padding-top)这个属性用来设定上间隙的宽度。示例如下：.d1padding-top:1cm下间隙属性(margin-bottom),间隙属性(padding).这个属性用来设定下间隙的宽度。示例如下：.d1padding-bottom:1cm间隙属性(padding)这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。你可以为上下左右间隙设置相同的宽度。示例入下：.d1padding:1cm你也可以分别设置间隙，顺序是上，右，下，左。示例如下：这个属性用来设定上间隙的宽度。.d1padding:1cm2cm3cm4cm是用来设置元素内容到元素边界的距离。上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。演示示例：上下左右间隙宽度相同演示示例：上下左右间隙宽度各不相同,7、CSS盒子模式(BoxModel),盒子里由外至里依次是：margin边距border边框padding间隙(也有人称做补丁)content(内容，比如文本，图片等)CSS边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。CSS边框属性(border)用来设定一个元素的边线。CSS间隙属性(padding)是用来设置元素内容到元素边框的距离。CSS背景属性指的是content和padding区域。CSS属性中的width和height指的是content区域的宽和高。,二、CSS的布局基础,1、定位属性,position:static|absolute|fixed|relative,Static静态（默认）它会按照普通顺序生成，就如它们在html中的出现顺序一样。Relative相对使元素偏移一定的距离，偏移方向及幅度有top,right,bottom,left等属性联合指定。#div1Position:relative;Top:20px;Left:40px;,Absolute绝对使元素从html普通元素流中分离出来，并把他送到一个完全属于自己的定位中。通过设置top,right,bottom,left的值，可以使绝对定位的元素放到任何地方。#div1Width:200px;Position:absolute;Top:20px;Left:40px;,如果给父元素div1定义为position:relative子元素div2定义为Position:absolute那么子元素div2的位置将相对于父元素div1,而不是整个网页。#div