教程教辅web程序设计css教程内部使用

第二章 CSS+DIV主要内容主要内容n第一节第一节 W3Cn第二节第二节 XHTML简介简介n第三节第三节 、DIV标记标记n第四节第四节 CSShttp:/W3C简介简介nW3C 指万维网联盟（指万维网联盟（World Wide Web Consortium），），创建于创建于1994年年10月，月，W3C 的工作是对的工作是对web进行标准化，进行标准化，即创建并维护即创建并维护 WWW 标准，标准，W3C 标准被称为标准被称为 W3C 推荐推荐（W3C Recommendations）。）。nW3C标准化工作的内容：标准化工作的内容：q HTML、XHTML、XML、CSS、XSL、XML Schema、XPath、XQuery、DOM、SOAP、WSDL、RDF、SMIL、Other XHTML 简介简介 nXHTML 指可扩展超文本标签语言（指可扩展超文本标签语言（EXtensible HyperText Markup Language），），XHTML 是一个是一个 W3C 标准。标准。nXHTML 是更严谨更纯净的是更严谨更纯净的 HTML 版本。版本。nXHTML 与与 HTML 4.01 兼容。兼容。nXHTML 是是 HTML 与与 XML（扩展标记语言）的结合物。（扩展标记语言）的结合物。XHTML与与HTML的区别的区别nXHTML 元素必须被正确地嵌套。元素必须被正确地嵌套。XHTML与与HTML的区别的区别nXHTML 元素必须被关闭。元素必须被关闭。XHTML与与HTML的区别的区别n标签名必须用小写字母。标签名必须用小写字母。XHTML与与HTML的区别的区别nXHTML 文档必须拥有根元素。文档必须拥有根元素。XHTML语法语法n属性值必须加引号属性值必须加引号 XHTML语法语法n属性不能简写属性不能简写 XHTML语法语法n用用 id 属性代替属性代替 name 属性属性 XHTML语法语法n、HTML 标签标签 n 声明位于文档中的最前面的位置，处于声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种标签之前。此标签可告知浏览器文档使用哪种 HTML 或或 XHTML 规范。规范。n该标签可声明三种该标签可声明三种 DTD 类型，分别表示严格版本、过渡类型，分别表示严格版本、过渡版本以及基于框架的版本以及基于框架的 HTML 文档。文档。名字空间（名字空间（Namespace）n n一个一个namespace是收集元素类型和属性名字的一个详细是收集元素类型和属性名字的一个详细的的DTD，namespace声明允许你通过一个在线地址指向声明允许你通过一个在线地址指向来识别你的来识别你的namespace。只要照样输入代码就可以。只要照样输入代码就可以。定义语言编码定义语言编码 n nHTML 标签标签 n定义和用法定义和用法q 可定义文档中的分区或节（可定义文档中的分区或节（division/section）。）。q 标签可以把文档分割为独立的、不同的部分。它可以用作严标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。格的组织工具，并且不使用任何格式与其关联。q如果用如果用 id 或或 class 来标记来标记，那么该标签的作用会变得更加，那么该标签的作用会变得更加有效。有效。n用法用法q 是一个块级元素。这意味着它的内容自动地开始一个新行。是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是实际上，换行是 固有的唯一格式表现。可以通过固有的唯一格式表现。可以通过 的的 class 或或 id 应用额外的样式。应用额外的样式。q不必为每一个不必为每一个 都加上类或都加上类或 id，虽然这样做也有一定的好处。，虽然这样做也有一定的好处。q可以对同一个可以对同一个 元素应用元素应用 class 或或 id 属性，但是更常见的情属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，况是只应用其中一种。这两者的主要差异是，class 用于元素组用于元素组（类似的元素，或者可以理解为某一类元素），而（类似的元素，或者可以理解为某一类元素），而 id 用于标识单用于标识单独的唯一的元素。独的唯一的元素。HTML 标签标签 This is a header This is a paragraph.nHTML 与与 XHTML 之间的差异之间的差异q在在 HTML 4.01 中，中，div 元素的元素的“align”属性不被赞成使用，属性不被赞成使用，在在 XHTML 1.0 Strict DTD 中，中，div 元素的元素的“align”属性不属性不被支持。被支持。n标准属性标准属性qid,class,title,style,dir,lang,xml:lang n事件属性事件属性qonclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyupn DIV可以嵌套可以嵌套HTML无序列表无序列表 n无序列表是一个项目的列表，此列项目使用粗体圆点（典无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。型的小黑圆圈）进行标记。n无序列表始于无序列表始于 标签。每个列表项始于标签。每个列表项始于。Coffee Milk n浏览器显示如下：浏览器显示如下：lCoffee lMilk CSS 概述概述nCSS 指层叠样式表指层叠样式表(Cascading Style Sheets)n样式定义如何显示样式定义如何显示 HTML 元素元素 n外部样式表可以极大提高工作效率，外部样式表通常存储外部样式表可以极大提高工作效率，外部样式表通常存储在在 CSS 文件中，这样更好地解决内容与表现分离的问题文件中，这样更好地解决内容与表现分离的问题 CSS 语法语法 n由三部分构成：选择器、属性和值由三部分构成：选择器、属性和值qselector property:value n选择器通常是定义的选择器通常是定义的 HTML 元素或标签。属性和值被冒元素或标签。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式号分开，并由花括号包围，这样就组成了一个完整的样式声明（声明（declaration）。）。qbody color:blue n提示：如果值为若干单词，则要给值加引号：提示：如果值为若干单词，则要给值加引号：qp font-family:“sans serif”;n多重声明：多重声明：qp text-align:center;color:black;font-family:arial;选择器选择器n选择器的分组选择器的分组 qh1,h2,h3,h4,h5,h6 color:green;n当几个元素样式属性一样时，可以共同调用一个声明，当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔元素之间用逗号分隔n派生选择器派生选择器qli strong font-style:italic;font-weight:normal;n就是给就是给li下面的子元素下面的子元素strong定义一个斜体不加粗的定义一个斜体不加粗的样式样式选择器选择器nid选择器选择器q用用CSS布局主要用层布局主要用层“div”来实现，而来实现，而div的样式可以的样式可以通过通过id选择器选择器来定义来定义qid 选择器以选择器以“#”来定义来定义#red color:red;#green color:green;这个段落是红色。这个段落是红色。qid 选择器和派生选择器混用选择器和派生选择器混用#sidebar p font-style:italic;text-align:right;margin-top:0.5em;选择器选择器n类选择器类选择器q类选择器以一个点号显示类选择器以一个点号显示.center text-align:center This heading will be center-aligned This paragraph will also be center-aligned.qclass 也可被用作派生选择器也可被用作派生选择器.fancy td color:#f60;background:#666;Id与与class的简单区别的简单区别n定义时：定义时：#vs.nId在一个在一个html中只能用一次，中只能用一次，class可以重复使用可以重复使用nClass可以是独立的，也可以是关联的可以是独立的，也可以是关联的.mul.mn一个一个id值必须用一个字母或者下划线开头，它不能用一个值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。空格和连数字进行开头，然后跟随字母、数字和下划线。空格和连字符字符-都是不允许的。都是不允许的。伪类：定义链接的样式 a:link color:#FF0000a:visited color:#00FF00a:hover color:#FF00FFa:active color:#0000FFa.one:link color:#ff0000a.one:visited color:#0000ffa.one:hover color:#ffcc00a.two:link color:#ff0000a.two:visited color:#0000ffa.two:hover font-size:150%关联样式关联样式ul.m list-style:disc url(/images/common/list.gif)inside;Angelfish(67 items)Angels/Frogfish(35 items)Angelfish(5526 items)Angelfish(15 items)调用调用 CSS n外部样式表外部样式表 n内联样式内联样式 大家好大家好 n页面内嵌法：在页面内嵌法：在部分部分 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;background:url(images/bg_poem.jpg)#fefefe no-repeat right bottom;color:#666;text-align:center;line-height:150%;width:60%;解释解释n层的名称为层的名称为sample，在页面中用就可以调用这个样式。，在页面中用就可以调用这个样式。nmargin是指层的边框以外留的空白，用于页边距或者与是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。其它层制造一个间距。“10px 10px 10px 10px”分别代表分别代表“上右下左上右下左”(顺时针方向顺时针方向)四个边距，如果都一样，可以四个边距，如果都一样，可以缩写成缩写成“margin:10px;”。如果边距为零，要写成。如果边距为零，要写成“margin:0px;”。注意：当值是零时，除了。注意：当值是零时，除了rgb颜色值颜色值0%必须跟百分号，其他情况后面可以不跟单位必须跟百分号，其他情况后面可以不跟单位px。margin是透明元素，不能定义颜色。是透明元素，不能定义颜色。解释解释npadding是指层的边框到层的内容之间的空白。和是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成可以缩写成padding:0px。单独指定左边