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

,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,结构层主要用于对内容进行格式化处理。 例如： 定义标题 定义段落 定义列表 等等,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）、网页的内容,（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样式由一系列规则组成， 每条规则由两部分作成：选择符和声明 （Declaration），每条声明由：属性名和 属性值组成；,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、伪类选择符,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; 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.title01 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(images/water.jpg); ,4、伪类选择符,伪类可以看作是一种特殊的类选择符， 是能被支持CSS的浏览器自动所识别的 特殊选择符号。 伪类所指定的对象在文档中并不存在，而是指定 的是元素的某种状态。,伪类定义的语法结构： 选择符：伪类名 属性：值 ,伪类名在CSS中已经定义好了，不能随意取名；,华东交通大学,a元素的伪类： 1、link 表示未访问的连接 2、visited 表示已经访问过的连接 3、active 表示激活的连接 4、hover 表示鼠标停留在连接上,a:link font-family: “宋体“; font-size: 12px; color: #FF0000; a: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-size: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）、使用类选择符： .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-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 字体风格属性(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表示小的大写字体。例句如下： .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) 这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下： .p2 text-align:right 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线) 示例代码如下： .p2 text-decoration: underline,文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位(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 (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px) 示例代码如下： .p1 letter-spacing: 3mm 颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下： .p1color:gray,3、CSS 背景属性,背景颜色属性(background-color) 演示示例 上面的代码表示图片竖向重复。 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。 body background-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 背景图片不重复 body background-image:url(/images/css_tutorials/background.jpg); background-repeat:repeat-y 上面的代码表示图片竖向重复。 背景附着属性(background-attachment) 这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。 body background-image:url(/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed 上面的代码表示图片固定不动，不随内容滚动而动。示例,背景位置属性(background-position) 这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。 body background-image:url(/images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px 上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。 背景属性(background) 这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。 body background:#99FF00 url(/images/css_tutorials/background.jpg) no-repeat fixed 40px 100px 上面的代码表示，网页的背景颜色是翠绿色，背景图片是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) 这个属性用来设定上下左右边框的颜色。例句如下： .d5 border-color:gray;border-style:solid; 边框属性(border) 这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下： .d1 border:5px solid gray;,上下左右四个边框不但可以统一设定，也可以分开设定。 单边边框属性 上下左右四个边框不但可以统一设定，也可以分开设定。 设定上边框属性，你可以使用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) 上下左右边距宽度相同：上下左右边距宽度相同。 这个属性用来设定右边距的宽度。示例如下： .d1 margin-right:1cm 上边距属性(margin-top) 这个属性用来设定上边距的宽度。示例如下： .d1 margin-top:1cm 下边距属性(margin-bottom) 这个属性用来设定下边距的宽度。示例如下： .d1margin-bottom:1cm,边距属性(margin) 这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。 你可以为上下左右边距设置相同的宽度。示例入下： .d1 margin:1cm 你也可以分别设置边距，顺序是上，右，下，左。示例如下： .d1 margin:1cm 2cm 3cm 4cm 上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。 演示示例：上下左右边距宽度相同 演示示例：上下左右边距宽度各不相同,6、CSS 间隙属性(Padding),间隙属性(padding)是用来设置元素内容到元素边界的距离。 左间隙属性(padding-left) 这个属性用来设定左间隙的宽度。示例如下： .d1padding-left:1cm 演示示例 右间隙属性(padding-right) 左间隙为4cm。这个属性用来设定上间隙的宽度。 这个属性用来设定右间隙的宽度。示例如下： .d1 padding-right:1cm 上间隙属性(padding-top) 这个属性用来设定上间隙的宽度。示例如下： .d1 padding-top:1cm 下间隙属性(margin-bottom),间隙属性(padding). 这个属性用来设定下间隙的宽度。示例如下： .d1padding-bottom:1cm 间隙属性(padding) 这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。 你可以为上下左右间隙设置相同的宽度。示例入下： .d1 padding:1cm 你也可以分别设置间隙，顺序是上，右，下，左。示例如下： 这个属性用来设定上间隙的宽度。 .d1 padding:1cm 2cm 3cm 4cm 是用来设置元素内容到元素边界的距离。 上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。 演示示例：上下左右间隙宽度相同 演示示例：上下左右间隙宽度各不相同,7、CSS盒子模式(Box Model),盒子里由外至里依次是： 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 等属性联合指定。 #div1 Position:relative; Top:20px; Left:40px; ,Absolute 绝对 使元素从html普通元素流中分离出来，并把他送到一个完全属于自己的定位 中。通过设置top, right, bottom, left 的值， 可以使绝对定位的元素放到任何 地方。 #div1 Width:200px; Position:absolute; Top:20px; Left:40px; ,如果给父元素div1 定义为position:relative 子元素div2定义为 Position:absolute 那么子元素div2的位置将相对于父元素div1, 而不是整个网页。 #div1 Height:200px; Wid