第4章-part1 CSS 介简.ppt-道客多多

资源描述

1、第4章 -part1 CSS 介简,CSS: 样式标记语言或表现语言,一 CSS样式表 (Cascading Style Sheet层叠样式表),CSS的作用: (Cascading串联，级联） 1) 弥补HTML显示上的不足，提供丰富的样式；2) 将HTML内容和显示样式分离；3) 可以进行集中样式管理。例：,样式表定义-由规则构成基本语法:选择符规则表 ,由样式属性组成，各个样式属性间用分号隔开，每个样式属性的定义格式为: 属性名：值,样式定义中的注解：/*字符串*/,要引用样式的对象，它可以是一个或多个HTML标记（标记之间以逗号分开）；也可以是类选择符、ID选择符或上下文选择符

2、。,selector property: value; property: value; .,使用内嵌CSS, css1.htm (Do it),CSS示例h1 font-family:“隶书“, “宋体“;color: green.text font-family: “宋体“; font-size: 14pt; color: red#strong font-size: 20pt; color: Blue h1 这是一个CSS示例！span 这行文字应是红色的。 p 文字应是红色的。梦之都,span与div - CSS与XHTML沟通的桥梁XHTML只是负责内容.文字标签与字块标签一般都有

3、意义,而span与div并没有什么意义, 它们被广泛的与CSS联合使用.span是内联的,代表一行. div代表一块. 梦之都id, class 属性 - 元素链接一个样式 .text 类(class 属性)的链接 ( 类的普通用法： class.text ） #strong-id 属性的链接,3. 样式引用,（1）链接到外部样式表a) 将样式表定义为一个独立的CSS样式文件，扩展名为.css；b) 使用该样式表的HTML文件在头部用标记链接到这个CSS样式文件即可。,样式定义存放于文件外部css.css，外部css.htm引用该样式表。(Do it),【style.css文件】： h

4、1 font-family:“隶书”,“宋体”;color:#ff8800 p background-color:yellow;color: black;font-size:12pt; .text font-family: “宋体“; font-size: 14pt; color: red【css1.htm文件】：链接外部CSS文件文字是红色的。底色是黄色。 ,注：CSS样式文件不包含标记！,REL：定义连接的文件和 HTML文档之间的关系； HREF：指出CSS样式文件； TYPE：样式的类别； MEDIA：接受样式表的介质。,3. 样式引用（续）,（2）import(引入)外部样式表

5、在HTML文件的头部引入，格式：import URL(“外部css.css“);（3）嵌入样式表利用标记将样式表嵌入到HTML文件的头部h1 font-family:“隶书“, “宋体“;color:#ff8800 ,3. 样式引用（续）,（4）内联样式-在HTML中用style定义: 方法：将标记的style属性值赋为所定义的样式规则。与嵌入样式表的区别：作用域不同内联样式使样式单失去了本来的意义,因此应该尽量避免使用内联样式.,设有两个样式表文件s1.css、s2.css和一个HTML文件example_css.htm,【文件s1.css】： h2 font-family:“隶书“;co

6、lor:#ff8800 p color:black;background-color:yellow;font-size:12pt;【文件s2.css】： h3 font-family:“宋体“;color:blue;font-style:italic; .text font-family: “宋体“; font-size: 10pt; color: red【文件example_css.htm】：CSS综合应用示例 ,（续）, a:visited color: #0000FF; text-decoration: none a:link font-family: “宋体“; font-size:

7、9pt; color: #0000FF; text-decoration: none a:hover font-family: “宋体“; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none import URL(“s2.css“);,（续）,这是一个CSS样式文件综合示例！这行文字应是红色的。这一段的底色应是黄色。这行文字由s2.css中的样式控制，应是斜体、蓝色超链接CSS样式使用有四种方式: 链接、引入、嵌入和局部引用,二. 相关的标记和属性,1. 类型选择符 (Type Se

8、lector) 以HTML的标记作为选择符的名称,h1 color: red; body color: green; div color: red; ,类选择符在标记中定义；.className (有点）class属性值：在体部标记中设置为类名。abc 类选择符的作用：在样式表中定义具有样式值的类。定义格式：标记名.类名规则1; 规则2; .类名规则1; 规则2; ,可以使不同的标记遵循相同的样式,可以使相同的标记具有不同的样式,2. 类选择符(Class Selector),.back background-color:green;p.back1 background-color:#6

9、66666;p.back2 background-color: red;h1 line h2 line 本段文字的底色为#666666 本段文字的底色为red 这是另一段 ,相同的标记p 具有不同的样式,back使不同的标记h1,h2 遵循相同的样式,3. id选择符（ID Selector）和id属性,定义的格式：#id名规则1; 规则2; .与类选择符的区别： id选择符只能引用一次；类选择符可以多次引用.#colorid1 color : green;,#colorid1 color : green;ID选择符与ID属性结合使用,可对特定标记进行样式控制.,4. 上下文选择符 (Co

10、ntextual Selector) =包含选择符,定义嵌套标记的样式:由两个或多个单一选择符组成，中间用空格分隔.h2 span color: red; 这行文字应是红色的。这行文字应是黑色的。这一段是黑色的。 ,5. 伪类(pseudo-classes)-区别标记的不同状态,-设置特殊的效果. 定义格式(语法):选择符:伪类属性: 值 ,锚位(anchor)伪类:a:link color: #FF0000 /* 未访问的链接*/ a:visited color: #00FF00 /*已访问的链接*/ a:hover color: #FF00FF /*鼠标移过的链接*/ a:active

11、 color: #0000FF /* 选中的链接*/,6. 群组选择符,h1, h2, p, span color: red; 这行文字应是红色的这行文字应是红色的红色的 ,三.样式的继承和作用顺序,样式继承相对值继承方式：即以百分比继承。,2. 样式的作用顺序,内联样式中所定义的样式的优先级最高；其它的样式表按其在HTML文件中出现或被引用的顺序，越后出现，优先级越高；选择符的作用优先顺序为：上下文选择符、类选择符、id选择符，优先级依次降低；未在任何文件中定义的样式，将遵循浏览器的缺省样式。,例：do it,样式的作用顺序p color:red; font-size:22pt;p.c1

12、color:green; font-size:12pt; p font-size:16pt;text-align:center;第一段第二段第三段,四. CSS属性,字体属性(font)文本属性(text)(文本排版)容器属性(box) (父与子元素的排版)颜色和背景属性float与clear,1. 字体属性（font),字体名称（font-family）字号（font-size）字体风格（font-style）字体加粗（font-weight）字体变化（font-variant）字体综合设置（font）属性,h3 font-family: “宋体“; font-size:22pt;

13、 color:blue; font-style: italic; ,1.1 字体名称（font-family）,语法: font-family: | , font-family 规定元素的字体系列。 font-family 属性的值是用于某个元素的字体系列名或具体字体名的一个优先表。浏览器会使用它可识别的第一个值。具体字体的名称： “楷体”, “times“、“arial“。字体系列名称, 比如：“serif”、“sans-serif”. p font-family: “楷体”, Times, serif 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。,1.2 字号（fo

14、nt-size）,语法: font-size: | | | xx-small | x-small | small | medium | large | x-large | xx-large larger | smaller 12 pt 单位: pt或px像素, in英寸, cm厘米，2em em-同行字的倍数，2em=2字宽，一般不用em 200% (相对父元素的字号大小) 例：p.class1 font-size:12pt; /* parent */p.class2 font-size: 50% /* son */初始值: medium,1.3 字体风格（font-style）,语法: fo

15、nt-style: 允许值: normal | italic | oblique 初始值: normal 字体风格属性以三个方法的其中一个来定义: normal (普通)，italic (斜体) , oblique (倾斜)H1 font-style: oblique ,1.4 字体加粗（font-weight）,语法: font-weight: 允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900初始值: normal字体加粗属性用作说明字体的加粗。当其它值绝对时

16、，bolder和lighter值将相对地成比例增长。注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择:500 会被 400代替，反之亦是. 字体加粗的定义例子如下:H1 font-weight: 800 ,1.5 字体变化（font-variant）-字体变形,语法: font-variant: 允许值: normal | small-caps | 其他初始值: normal字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候，小型大写字母(值)会显示比小

17、写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。,1.6 字体综合设置（font）属性,语法: font: 允许值: | | ? / ? 初始值: 未定义字体属性用作不同字体属性的略写，特别是行高。例:P font: italic bold 12pt/14pt Times, serif 指定该段为bold(粗体)和italic(斜体)Times或serif字体，12点大小，行高为14点。,2. 文本属性,字符间隔（letter-spacing）h1 letter-spacing: 10pt 文本修饰（text-decoration）文本横向

18、排列（text-align）它与 HTML的“ALIGN”属性相似 text-align ：left | right | center | justify left 左对齐 , center 文字居中，justify 两端对齐文本纵向排列（vertical-align）文本缩排（text-indent）行高（line-height）,2.1 letter-spacing属性,letter-spacing : 值值= normal | =12pt, px, cm, em 等。初始值：normal 百分比值：不适用letter-spacing属性定义了每一个字符之间的额外间距，该属性值必须

19、以长度为单位，且正负值都是允许的。,2.2 文本修饰（text-decoration）,text-decoration ：值值= none | underline | overline | line-through | blink 初始值：none 百分比值：不适用这个属性能够定义元素中文字的“装饰”样式，这些样式总共有五种形式。 none 无 underline 下划线 overline 上划线 line-through 删除线 blink 闪烁,3.容器（盒子）属性黑框包围的一个方块（Box）,Box是父元素body,Border是子元素 p,Content是p中的文字, CONTE

20、NT 填充 ,CSS:p margin-left: 2em; margin-top: 3pt p padding-left: 2em; padding-top: 3pt ,CSS 中有个重要的概念-盒子模型 Box model,盒子里由外至里依次是： margin 外边距 border 边框 Padding 内边距 content 内容（文本，图片等)外边距(margin) 是用来设置一个元素所占空间的边缘到父元素之间的距离。边框属性 (border) 用来设定一个元素的边线。内边距(padding) 是用来设置元素内容到元素边框的距离。CSS 背景属性指的是 content 和 padd

21、ing 区域。 CSS 属性中的 width 和 height 指的是 content 区域的宽和高。,CSS外边距, 内边距,外边距属性是用来设置元素所占空间的边缘到父元素之间的距离。 .d1 margin-left: 1cm /* 设定左边距的宽度 */ margin-right, margin-top, margin-bottom内边距属性是用来设置元素内容到元素边界的距离。 .d1 padding-left: 1cm padding-right, padding-top, padding-bottom例子见p67-69,4. 颜色和背景属性 -为网页带来丰富的视觉效果,（前景）颜色（c

22、olor）背景颜色（background-color）背景图象（background-image）背景重复（background-repeat）背景附属方式(background-attachment) 背景图象位置(background-position) 背景属性（background）,颜色（color）,1) RGB(255, 0, 0) - red2) #FF0000 - red (16进制)3) red - 颜色名词,背景图象重复(do it) css目录中的 background示例1.htm, #content border: 1px solid #0000FF; he

23、ight: 200px; background-image: url(bg.gif); background-repeat: repeat; color:red #contentx height: 200px; background-image: url(bg.gif); background-repeat: repeat-x; #contenty height: 400px; background-image: url(bg.gif); background-repeat: repeat-y; 这是一个background示例！文字1 repeat =文字2 repeat-x -文字3 re

24、peat-y - ,文字有多长，背景有多长 - repeat(default value) value=repeat | repeat-x | repeat-y | no-repeat,repeat-y,加DOCTYPE，,#contentx height: 200px; background-image: url(bg.gif); background-repeat: repeat-x; 文字2 repeat-x - span 是inline元素，xhtml中它不认height属性。方法：把span改为div. (改为p不好，因为p有行距),image #content border:

25、1px solid #0000FF; height: 200px; background-image: url(bg.gif); background-repeat: repeat; color:red; width:50%; float:left; #contentx height: 200px; background-image: url(bg.gif); background-repeat: repeat-x; color:red; width:49%; #contenty height: 400px; background-image: url(bg.gif); background-

27、图象的(cneterx, centery) 例如： background-position: 30% 20px;,-30% -70% -,30% 20px, #content height: 300px; background-image: url(bg.gif); background-repeat: no-repeat; background-position: 30% 20px; color:red #contentx height: 200px; background-image: url(bg.gif); background-repeat: repeat-x; background

28、-position: 30% 20px; #contenty height: 400px; background-image: url(bg.gif); background-repeat: repeat-y; background-position: 30% 20px; 这是一个background-position示例！文字repeat =文字 repeat-x -文字 repeat-y - ,-30% -70% - ,left对齐对repeat-x没有用， top对齐对repeat-y没有用.,Y=20pixel,无 DOCTYPE, #content height: 300px; ba

29、ckground-image: url(bg.gif); background-repeat: no-repeat; background-position: right bottom; color:red #contentx height: 300px; background-image: url(bg.gif); background-repeat: no-repeat; background-position: 50% 50%; 这是一个background-position示例！文字 no-repeat =文字 no-repeat - ,background-position: 50%

30、 50%,right bottom,0% 0% = left top 100% 100% = right bottom,float属性 - 浮动,1） float浮动属性是布局中重要的属性-对div元素应用float来进行布局。 2）float属性的值float: none | left | right none：对象不浮动 left：对象浮在左边 right：对象浮在右边如果float取值为none，则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示。见下图：,无float属性 div独占一行,Div Page#div1 background-color:Olive; wi

31、dth: 30%; #div2 background-color: Green; div1 div2 saaaaaaaaaaaasasasadiv3 ,div1 width: 30%, Float:left width100%，Float使div不占用整行,#div1 background-color:Olive; width: 30%; float:left #div2 background-color: Green; div1 div2 saaaaaaaaaaaasasasadiv3 ,二个div并列于一行,1）当前div=浮动， 2）并且当前div留有足够的空白宽度时，后面的div元素将

32、自动浮上来，和前面的div元素并列于一行。 3）如果浮动元素不声明宽度，则宽度趋于0，即压缩到其内容能承受的最小宽度。注意：使2个div并列于一行的前提是：这一行有足够的宽度容纳2个div的宽度。,div1 width: 30%, Float:right,#div1 background-color:Olive; width: 30%; float:right #div2 background-color: Green; div1 div2 saaaaaaaaaaaasasasadiv3 ,width: 100%=Float无效,#div1 background-color:Olive; w

33、idth: 100%; float:right #div2 background-color: Green; div1 div2 saaaaaaaaaaaasasasadiv3 ,width: 30%， 40%,#div1 background-color:Olive; width: 30%; float:left #div2 background-color: Green; width: 40%; float:left div1 div2 saaaaaaaaaaaasasasadiv3 ,clear属性,为了灵活地定位div元素，CSS提供了clear属性，中文意思即为“清除”。clear属

34、性的值有none、left、right和both，默认值为none。当多个块元素由于第1个设置浮动属性而并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性。,clear:both 把两个浮动都清除掉，恢复成块元素的特征。,#div1 background-color:Olive; width: 30%; float:left #div2 background-color: Green; width: 40%; clear:both div1 div2 saaaaaaaaaaaasasasadiv3 ,Do it,float, clear,布局模型,所有CSS布局技术都应建立在

35、4个概念之上：盒模型、流动、浮动float 、定位position。千变万化的技巧应用其实都是这些概念在舞动。,1Flow Model（流动模型）,流动模型是HTML默认布局模型，默认下的HTML元素都是根据流动模型来分布网页内容的。如同流水一样，元素本身是被动的，它随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后顺序来决定分布位置，这是一种被动的布局模式。这种布局又是活动的, 它的位置会随时改变:如果在元素前面增加另外一个元素，则它的位置会被向后推移。,流动布局的特征1,块元素在所处的包含元素内(父元素),自上而下按顺序垂直分布，因为在默认下，块元素的宽度为100%。块元素都

36、会以行的形式占据位置，不管所包含的内容有多少，也不管块元素的宽度设置多窄。例如，对于下图的流动布局，浏览器都会自上向下逐步解析并显示所有网页元素 :,流动布局的特征2,2) 内联元素在所处的包含元素内从左到右水平分布显示。超出一行后，会自动换行。-文档流相对定位流动当元素定义为相对定位，即设置position:relative;属性时，它也会遵循流动模型布局规则，跟随HTML文档流自上而下流动。,流动模型例子,流动模型aaa,屏幕不同运行结果也不同,流动模型优缺点,优点: 元素之间不会存在错位、覆盖等问题，布局简单，符合人的浏览习惯。缺点:不能用单纯的流动布局设计出艺术化的效果。,2Lay

37、er Model（图层模型）,引入层的概念，希望精确定位网页元素，摆脱HTML元素自然流动所带来的弊端。微软用div元素推出层概念，与Netscape竞争，最终取得了胜利。注：单独的层布局模型是不够的，它必须要与float结合。,3Float Model（浮动模型）,浮动的根本原因：a) 你无法预知不同浏览者的窗口大小，b) 网页也是活动的窗口，其大小是无法预测和控制的。浮动模型希望在流动与固定之间取得一个平衡，实现网页布局的自适应能力。,浮动布局模型,1）浮动是完全不同于流动的另一种布局模型，它遵循浮动规则，但仍能看到流动对它的潜在影响。2）任何元素在默认下是不能浮动的，但都可以用CSS定

38、义为浮动：如div、p、table 、 img等都可以被定义为浮动。,浮动不会与流动发生冲突,l ）当元素定义为浮动时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意的浮动。2）与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。,4 定位类型,CSS中position属性定义元素的定位类型：position: static; 属性值包括： static（默认值）、absolute、fixed和relative1) Static静态定位，元素遵循HTML默认的流动模型。2) absolute表示绝对定位，将元素从文档流中拖出来，然后使用l

39、eft、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口。,fixed固定定位,3) fixed表示固定定位，与absolute定位类型类似，但它的包含块是屏幕内的网页窗口本身。目前IE浏览器还不支持该属性值，因此在布局中使用比较少。绝对或固定定位能够精确控制元素的显示位置，但完全使用绝对定位会使布局缺乏灵活性，尽量不用。,相对定位,4) relative表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位的过程是首先按static方

40、式生成元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定。浏览器兼容性浏览器在处理相对定位元素覆盖其他元素的方法上是存在分歧的。不幸的是，W3C标准并没有指明应该怎么处理这个问题。,对一个元素进行相对定位,首先这个元素将出现在它所在的static位置上；然后，让这个元素“相对于”它的起点进行移动。如果top =20px，left=30px; 框2 将在原位置下面 20 像素、右移30px的地方。,注意，在使用相对定位时，移动元素可能会导致它覆盖其它框。,偏移量的计算,a）相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的，b) 而绝对定位元素

41、的偏移量是根据包含块的位置计算的。绝对定位元素的位置取决于它的偏移量:left 、top、right、bottom属性值。,Body包含div， div包含h2, p, .text position:absolute; left: 10px; top:20px; background-color:Green .ptext position:relative; left: 50px; top:20px; background-color:Yellow 标题元素p元素absolute:,正常：,relative:,Absolute:,一个最简单的网页,无标题页Hello, world! 一个.a

42、spx页面只能包含一个控件！以上元素都不能少。但无, 运行也可以，有什么作用？,中的有什么作用？,1） Form（表单）是开发中重要的组成部分：没有Form就没有 Web编程模型。2）把呈现给用户看的页面就当成是一个窗体，你去掉form后，大部分server端控件都不能用了！如asp:Button类的控件在没有Form Runat=“server”的情况下用不了。系统提示：错误：服务器标记的格式不正确。 3）对于页面，Form可以提交自身，由于的单一Form模型使得编写应用程序简单又便捷。4）无form的页面也可以用，但不要在页面里放“需要回发的postback服务端控件”，如asp

43、:TextBox，asp:Button，asp:ImageButton，asp:DropDownList，asp:ListBox，asp:CheckBox，asp:RadioButton,中的 ,问题：form里放块元素的-不符合HTML标准。(标准form中放的是input等html控件)form里放div, server控件是MS的发明!,中的 div布局,心灵奥修内容评论心灵花园 Soul Garden ,div布局的 CSS,#content float: left; width: 70%; / div content/ 可以不要sidebar 的CSS，它自动补上

44、#sidebar float: right; width: 30%; / div sidebar #nav float:right; width:100%; margin:1px; / ulh1 font-size:150%; text-align: center; ul li float: right; margin: 1px; / menu,div CSS布局,IE看到的HTML,心灵花园input type=“hidden“ name=“_VIEWSTATE“ id=“_VIEWSTATE“ value=“/wEPDwUKMTUyNzc1MDM2MQ9kFgICAw9kFgYCAQ8QZ

45、GQWAWZkAgMPDxYCHgRUZXh0BbJS5Ly85LmO5Lq657G76KeJ5b6X5Y+q5piv5oiQ5Li65LuW5Lus6Ieq5bex5piv5LiN5aSf55qE77yM5Li65LuA5LmI5aSn5aSa5pWw55qE5Lq65Lya5pyJ5LiA56eN5by66L+r5oCn77yMDQrmg7PopoHljrvlj5blvpfmnYPlipvlkozlo7DmnJvnrYnnrYnvvIzogIzkuI3opoHlj6rmmK/miJDkuLrkuIDkuKrljZXnuq/nmoTkurrvvJ88L3A+PHA+IA0KPC9wPiZuYnNwOzxwPg0KICAgIOi/meaYr+S4,IE看到的HTML, / ,IE看到的HTML,成长到真正富有左巴和禅之间的关系贫穷并不是灵性的成功与失败的游戏整合头脑、心和灵魂静心和头脑静心和放松在西方静心似乎人类觉得只是成为他们自己是不够的，为什么大多数的人会有一种强迫性，想要去取得权力和声望等等，而不要只是成为一个单纯的人？这是一个复杂的问题，它具有两面，这两面都必须加以了解。首先：你从来没,

展开阅读全文