CSS初级教程(免费下载)探析.ppt

CSS初级教程;一.CSS简介;一.CSS简介;一.CSS简介;一.CSS简介;一.CSS简介;二.CSS的发展;二.CSS的发展;二.CSS的发展;三.如何将样式表加入您的网页 ; 而在XML中，你应该如下例所示在声明区中加入： ? xml-stylesheet type=text/css href=/dhtmlet.css ? 2.定义内部样式块对象 (Embedding a Style Block)你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。示例如下： htmlheadtitle文档标题/titlestyle type=text/css !--body {font: 10pt Arial}h1 {font: 15pt/17pt Arial; font-weight: bold; color: maroon} ;h2 {font: 13pt/15pt Arial; font-weight: bold; color: blue}p {font: 10pt/12pt Arial; color: black}--/style/headbody 注意：这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 3.内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： ;p style=margin-left: 0.5in; margin-right:0.5in这一行被增加了左右的外补丁p 4.样式表语法 (CSS Syntax) Selector { property: value } 参数说明： Selector – 选择符property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开 ;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;四.CSS语法;五. CSS构造块;为id为container的div元素添加CSS样式代码如下例： #container { padding: 20px; border: 1px solid #000; background: #CCC; } 效果图： ;2.维度：宽度和高度 设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、padding、border或者自元素都可能对结果产生连锁反应。 3. 外边距 外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承。 下面来看一个外边距CSS定义的例子：; #container { width: 300px; margin-top: 20px; margin-left: auto; margin-right: auto; margin-bottom: 1em; border: 1px solid #000; padding: 20px; background: #CCC;} 对外边距可缩写成如下： ??????? #container { margin: 20px auto 1em auto; } ; 属性值的排列顺序为：上外边距、右外边距、下外边距、左外边距。 CSS中将元素居中的最好的方法是把元素左右外边距属性值设定为auto。对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值。 4.内边距 内边距（padding）是(X)HTML元素的边框与元素之间的距离，适用于任何元素。 示例： #container { width: 300px; padding-top: 20px;;padding-left: 10% padding-right: 1em; padding-bottom: 0; background: #CCC;} 可以将它缩写成如下代码： #container { padding: 20px 1em 0 10%; } 与margin属性一样，数值的排列顺序为：上、右、下和左。 下面来讨论一下：border-width、border-top-width、border-right-