css+div.ppt

1、第二章 CSS+DIV,来源：点点网,主要内容,第一节 W3C 第二节 XHTML简介 第三节 、 DIV标记 第四节 CSS,W3C简介,W3C 指万维网联盟（World Wide Web Consortium），创建于1994年10月，W3C 的工作是对web进行标准化，即创建并维护 WWW 标准，W3C 标准被称为 W3C 推荐（W3C Recommendations）。 W3C标准化工作的内容： HTML、XHTML、XML、CSS、XSL、XML Schema、XPath、XQuery、DOM、SOAP、WSDL、RDF、SMIL、Other,XHTML 简介,XHTML 指可扩展超

2、文本标签语言（EXtensible HyperText Markup Language），XHTML 是一个 W3C 标准。 XHTML 是更严谨更纯净的 HTML 版本。 XHTML 与 HTML 4.01 兼容。 XHTML 是 HTML 与 XML（扩展标记语言）的结合物。,XHTML与HTML的区别,XHTML 元素必须被正确地嵌套。,XHTML与HTML的区别,XHTML 元素必须被关闭。,XHTML与HTML的区别,标签名必须用小写字母。,XHTML与HTML的区别,XHTML 文档必须拥有根元素。,XHTML语法,属性值必须加引号,XHTML语法,属性不能简写,XHTML语法,X

3、HTML语法, 、,HTML 标签, 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。,名字空间（Namespace）, 一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。,定义语言编码, ,HTML 标签,定义和用法 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以

4、用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 不必为每一个 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。,HTML 标签, This is a header This

5、 is a paragraph. HTML 与 XHTML 之间的差异 在 HTML 4.01 中，div 元素的 “align” 属性不被赞成使用，在 XHTML 1.0 Strict DTD 中，div 元素的 “align” 属性不被支持。 标准属性 id, class, title, style, dir, lang, xml:lang 事件属性 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup DIV可以嵌套

6、,HTML无序列表,无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于 标签。每个列表项始于 。 Coffee Milk 浏览器显示如下： Coffee Milk,CSS 概述,CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，这样更好地解决内容与表现分离的问题,CSS 语法,由三部分构成：选择器、属性和值 selector property: value 选择器通常是定义的 HTML 元素或标签。属性和值被冒号分开，并由花括号包围

7、，这样就组成了一个完整的样式声明（declaration）。 body color: blue 提示：如果值为若干单词，则要给值加引号： p font-family: “sans serif”; 多重声明： p text-align: center; color: black; font-family: arial; ,选择器,选择器的分组 h1,h2,h3,h4,h5,h6 color: green; 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔 派生选择器 li strong font-style: italic; font-weight: normal; 就是给li

8、下面的子元素strong定义一个斜体不加粗的样式,选择器,id选择器 用CSS布局主要用层“div”来实现，而div的样式可以通过id选择器来定义 id 选择器以 “#” 来定义 #red color:red; #green color:green; 这个段落是红色。 id 选择器和派生选择器混用 #sidebar p font-style: italic; text-align: right; margin-top: 0.5em; ,选择器,类选择器 类选择器以一个点号显示 .center text-align: center This heading will be center-alig

9、ned This paragraph will also be center-aligned. class 也可被用作派生选择器 .fancy td color: #f60; background: #666; ,Id与class的简单区别,定义时：# vs . Id在一个html中只能用一次，class可以重复使用 Class可以是独立的，也可以是关联的 .m ul.m 一个id值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。空格和连字符-都是不允许的。,伪类：定义链接的样式,a:link color: #FF0000 a:visited color:

10、#00FF00 a:hover color: #FF00FF a:active color: #0000FF a.one:link color: #ff0000 a.one:visited color: #0000ff a.one:hover color: #ffcc00 a.two:link color: #ff0000 a.two:visited color: #0000ff a.two:hover font-size: 150%,关联样式,ul.m list-style:disc url(/images/common/list.gif) inside; Angelfish(67 item

11、s) Angels/Frogfish(35 items) Angelfish(5526 items) Angelfish(15 items) ,调用 CSS,外部样式表 内联样式 大家好 页面内嵌法：在部分 ,CSS布局：定义DIV,#sample margin: 10px 10px 10px 10px; padding:20px 10px 10px 20px; border-top: #ccc 2px solid; border-right: #ccc 2px solid; border-bottom: #ccc 2px solid; border-left: #ccc 2px solid;

12、 background: url(images/bg_poem.jpg) #fefefe no-repeat right bottom; color: #666; text-align: center; line-height: 150%; width:60%; ,解释,层的名称为sample，在页面中用就可以调用这个样式。 margin是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。“10px 10px 10px 10px”分别代表“上右下左”(顺时针方向)四个边距，如果都一样，可以缩写成“margin: 10px;”。如果边距为零，要写成“margin: 0px;”。注意：当

13、值是零时，除了rgb颜色值0%必须跟百分号，其他情况后面可以不跟单位px。margin是透明元素，不能定义颜色。,解释,padding是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成padding:0px。单独指定左边可以写成padding-left: 0px;。padding是透明元素，不能定义颜色。 border是指层的边框，border-right: #ccc 2px solid;是定义层的右边框颜色为#ccc，宽度为2px，样式为solid直线。如果要虚线样式可以用dotted。,解释,background是定义层的背景。分

14、2级定义，先定义图片背景，采用url(./images/bg_logo.gif)来指定背景图片路径；其次定义背景色#fefefe。no-repeat指背景图片不需要重复，如果需要横向重复用repeat-x,纵向重复用repeat-y,重复铺满整个背景用repeat。后面的right bottom;是指背景图片从右下角开始。如果没有背景图片可以只定义背景色background: #fefefe color用于定义字体颜色。,解释,text-align用来定义层中的内容排列方式，center居中,left居左,right居右。 line-height定义行高，150%是指高度为标准高度的150%，

15、也可以写作：line-height:1.5或者line-height:1.5em，都是一样的意思。 width是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的60%。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。,CSS框模型,CSS框模型,#box width: 70px; margin: 10px; padding: 5px; ,CSS框属性,内边距：padding padding-top 、padding-right 、padding-bottom、padding-left 边框：border style、width

16、、color 外边距：margin margin-top、margin-right、margin-bottom、margin-left,外边距合并,外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。,CSS定位,CSS 定位 (Positioning) 属性允许你对元素进行定位，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 块框：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。 行内框：span 和 strong 等元

17、素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。,CSS定位,CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。 块框从上到下一个接一个地排列，框之间的垂直距

18、离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。,CSS position 属性,static （默认值） 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何

19、种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。,CSS 相对定位,相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。,#box_relative position: relative; left: 30px; top: 20px; ,CSS 绝对定位,设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位。,#box_relative position: abs

20、olute; left: 30px; top: 20px; ,CSS 浮动：float 属性,浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。,float:right;,CSS 浮动,CSS 浮动,当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。,CSS 浮动,如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足

21、够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。,CSS 浮动,浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。创建浮动框可以使文本围绕图像。,清除浮动：clear,clear 属性定义了元素的哪边上不允许出现浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。,left：清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。 right：清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。 both：清除左右两边的浮动对象，不管哪边存在浮动对象，当前元素都会

22、在浮动对象底下显示。 none：默认值，允许两边都可以有浮动对象，当前元素不会换行显示。,菜单（纵向）, 什么是网站标准 怎样过渡 相关教程 工具 ,菜单（纵向）,#menu margin: 15px 20px 0px 15px; padding:15px; background: #dfdfdf; color: #666; border:#fff 2px solid; width:160px; #menu ul margin: 0px; padding: 0px; border: medium none; line-height: normal; list-style-type: none;

23、 #menu li border-top: #fff 1px solid; margin: 0px; #menu li a padding:5px 0px 5px 15px; display: block; font-weight: bold; background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; width: 100%; color: #444; text-decoration: none; #menu li a:hover background: url(images/icon_dot_lmenu

24、2.gif) #c61c18 no-repeat 2px 8px; color: #fff; ,菜单（横向）, home 关于我们 网站标准 #submenu margin: 0px 8px 0px 8px; padding: 4px 0px 0px 0px; border: #fff 1px solid; background: #dfdfdf; color: #666; height:25px; #submenu ul clear: left; margin: 0px; padding:0px; border: 0px; list-style-type: none; text-align:

25、 center; display:inline; #submenu li float: left; display: block; margin: 0px; padding: 0px; text-align: center,菜单（横向）,#submenu li a display: block; padding:2px 3px 2px 3px; background: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; font-weight: bold; width: 100%; color: #444; text-de

26、coration: none; #submenu li a:hover background: url(images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px; color: #fff; #submenu ul li#one a width: 60px #submenu ul li#two a width: 80px #submenu ul li#three a width: 80px #submenu ul li#four a width: 90px #submenu ul li#five a width: 80px #submenu ul

27、 li#six a width: 80px #submenu ul li#seven a width: 60px #submenu ul li#eight a width: 90px #submenu ul li#nine a width: 80px,选项卡,.nTab float: left; width: 100%; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; .nTab .TabTitle clear: both; height: 22px; overflow: hidden; .nTab .TabTitle ul border:0; margin:0; padding:0; ,选项卡,.nTab .TabTitle li float: left; width: 70px; cursor: pointer;