设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › 增值产品交流与讨论 › SS/XS 专区 › SS/XS-模板插件 › 自编SupeSite_X-Space_V5风格制做教程.好东东不断添加中 ...
1 ...222324252627282930... 32下一页
返回列表 发新帖

[教程] 自编SupeSite_X-Space_V5风格制做教程.好东东不断添加中.

[复制链接]
 楼主| zhanglei700 发表于 2006-10-25 17:17:04 | 显示全部楼层

今天新发个css基础教程.转载于它人.

  1. 第一章 CSS基本语法

  3. CSS（Cascading Styel Sheet）是控制 Web 页面外观的一系列格式设置规则,是网页设计必不可少的工具之一。下面我们就开始学习css的基本语法格式。

  5. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  6. 一 CSS定义规则
  7. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  8. 层叠样式表是一个完全的纯文本文件，通常以“css”为扩展名作为单独的文件来使用，它的内容包含了一组告诉浏览器，如何安排与显示特定的html标签中内容的规则，CSS定义规则由三个部分构成：选择符，属性和属性的取值。语法如下：

  10. 语法： selector { property: value }
  11.        选择符   {   属性：    值  }

  13. 说明：

  15. 1 选择符

  17. 选择符是要定义样式的html标记，将html标记作为选择符定义后，则在html页面中该标记下的内容，会按照CSS定义的规则发生改变。

  19. 2 属性

  21. CSS属性指的是在选择符中要改变的内容，常见的有：字体属性，颜色属性，文本属性等。下面就是我们定义的一个样式表。

  23. @charset"gb2312";
  24. body {
  25.      font-family: "宋体";
  26.      font-size: 20px;
  27.      color: #FF0000;
  28. }
  29. p {
  30.      font-family: "宋体";
  31.      font-size: 30px;
  32.      color: #FF00ff;
  33. }

  35. 在这个样式表中：

  37. 1 @charset"gb2312";表示使用中文国标字符集。

  39. 2 body 和 p 是 html 中的两个标签，对这两个标签设置了三种样式，即：

  41. font-family: 指定字体的字型。

  43. font-size: 指定字体的大小。

  45. color: 指定字体的颜色。

  47. 上面我们定义了一个样式表，下一步的任务是如何把这个样式表和html文件相关联，使html文件按照我们定义的样式显示出来，与html文件相关联的方法有四种，下面我们分别叙述。



  51. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  52. 二 嵌入样式表
  53. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  55. 在Html页面内部定义的CSS样式表,叫做嵌入式CSS 样式表，也就是在HTML文档的head部分中，使用 style 标签并在该标签中定义一系列 CSS 规则。


  58. 语法：

  60. <head>
  61. <style type="text/css">
  62. <!--
  63. ......

  65. -->
  66. </style>
  67. </head>


  70. 说明：

  72. <style>指示CSS样式表开始，结束标志为 </style>，在开始标志 <style>中可以根据需要添加一些属性，如上列中的属性type="text/css"，它表示CSS样式表采用MIME类型，这种类型的特点是，当浏览器不支持CSS代码时，对CSS代码进行过滤，避免浏览器以源代码的方式显示CSS代码。为了保证更加可靠，在样式表里再次加上注释标识符" <!--......-->"，CSS规则就定义在这个注释标识符中。


  75. 示例1 [url=http://3dmax.9999mb.com/V5_css/t1.htm]t1.htm[/url]

  77. <html>
  78. <head>
  79. <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
  80. <title>嵌入式CSS样式表</title>
  81. <style type="text/css">
  82. <!--
  83. @charset"gb2312";
  84. body {
  85.      font-family: "宋体";
  86.      font-size: 20px;
  87.      color: #FF0000;
  88. }
  89. p {
  90.      font-family: "宋体";
  91.      font-size: 30px;
  92.      color: #FF00ff;
  93. }
  94. -->
  95. </style>
  96. </head>
  97. <body>
  98. 千山鸟飞绝万径人踪灭
  99. <p>
  100. 千山鸟飞绝万径人踪灭
  101. </p>

  103. </body>
  104. </html>



  108. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  109. 三 链接外部样式表
  110. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  112. 外部CSS样式表是一个以 .css为后缀的外部文件,定义一个外部样式表可以应用于多个页面。在html页面中使用link标签，可以将外部的css样式表连接进来，其语法如下：

  114. 语法：

  116. <link rel="stylesheet" href="*.css” type="text/css">

  118. 参数:

  120. 1 rel属性表示样式表将以何种方式与HTML文档结合。rel取值:Stylesheet,表示指定一个外部的样式表


  123. 2 *.css是单独保存的样式表文件。


  126. 示例2 定义一个外部css文件p2.css,然后在t2.htm文件中连接该文件。

  128. (1) 定义 p2.css

  130. @charset"gb2312";
  131. body {
  132.      font-family: "宋体";
  133.      font-size: 20px;
  134.      color: #FF0000;
  135. }
  136. p {
  137.      font-family: "宋体";
  138.      font-size: 30px;
  139.      color: #FF00ff;
  140. }


  143. (2) [url=http://3dmax.9999mb.com/V5_css/t2.htm]t2.htm [/url]

  145. <html>
  146. <head>
  147. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  148. <title>链接外部样式表</title>
  149. <link href="p2.css" rel="stylesheet" type="text/css">
  150. </head>
  151. <body>
  152. 亲爱的,你慢慢飞,小心前面带刺的玫瑰
  153. <p>
  154. 亲爱的,你张张嘴,风中花香会让你沉醉
  155. </p>
  156. </body>
  157. </html>


  160. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  161. 四 内联样式表
  162. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  164. 内联样式指的是，在HTML特定的标签中定义的CSS样式表。常用的HTML 标签主要是BODY中的一些元素，例如：<p>，<h2>，<ul>,<div>等，下面是内联样式的示例。

  166. 示例3 [url=http://3dmax.9999mb.com/V5_css/t3.htm]t3.htm[/url]

  168. <html>
  169. <head>
  170. <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
  171. <title>无标题文档</title>
  172. </head>
  173. <body>
  174. <div style="color:blue;font-size:30px ;">
  175. 风中花香会让你沉醉
  176. </div>
  177. <p style="color:#ff0000; font-style: italic; " >
  178. 风中花香会让你沉醉

  180. </p>
  181. </body>
  182. </html>


  185. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  186. 五 导入外部样式表
  187. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  189. 导入外部样式表指的是，在html文件中已经建立了嵌入式样式表，但是还要使用外部样式表的某些设置，这时就可以在<style>里导入一个外部样式表，导入时用@import，如下例所示。



  193. <html>
  194. <head>
  195. <style type="text/css">
  196. <!--
  197. @import url("mystyle.css");
  198. 其他样式表的声明
  199. -->
  200. </style>
  201. </head>
  202. </body>
  203. ......
  204. </body>
  205. </html>



  209. 其中@import url("mystyle.css"); 表示导入mystyle.css样式表，导入外部样式表必须在样式表的开始部分，在内部样式表的上面。



  213. [url=http://3dmax.9999mb.com/V5_css/t4.htm]示例4[/url]

  215. 定义一个外部css文件p4.css,然后在t4.htm文件中导入该文件。

  217. (1) 定义 p4.css

  219. @charset"gb2312";
  220. body {
  221.      font-family: "宋体";
  222.      font-size: 20px;
  223.      color: #FF0000;
  224. }


  227. (2) [url=http://3dmax.9999mb.com/V5_css/t4.htm]t4.htm [/url]

  229. <html>
  230. <head>
  231. <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
  232. <title>导入外部样式表</title>
  233. <style type="text/css">
  234. <!--
  235. @import url("p4.css");
  236. p {
  237. font-family: "宋体";
  238. font-size: 30px;
  239. color: #FF00ff;
  240. }
  241. -->
  242. </style>
  243. </head>
  244. <body>
  245. 千山鸟飞绝万径人踪灭
  246. <p>
  247. 千山鸟飞绝万径人踪灭
  248. </p>
  249. </body>
  250. </html>



  254. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  255. 六 css样式表的继承性
  256. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  258. 在css样式表中，子标签的某些属性会继承父标签的属性，例如标签p是标签body的子元素，当标签p未设置字体的颜色属性时，p中的内容会使用body中的颜色值，下面的示例说明了这种情况。

  260. 示例5 [url=http://3dmax.9999mb.com/V5_css/t5.htm]t5.htm [/url]

  262. <html>
  263. <head>
  264. <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
  265. <title>嵌入式CSS样式表</title>
  266. <style type="text/css">
  267. <!--
  268. @charset"gb2312";
  269. body {
  270.    font-family: "宋体";
  271.    font-size: 20px;
  272.    color: #FF0000;
  273. }
  274. p {
  275.    font-family: "宋体";
  276.    font-size: 30px;
  277. }
  278. -->
  279. </style>
  280. </head>
  281. <body>
  282. 千山鸟飞绝万径人踪灭
  283. <p>
  284. 千山鸟飞绝万径人踪灭
  285. </p>
  286. </body>
  287. </html>


  290. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  291. 七 设置多个元素
  292. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  294. css允许将单一的格式套用到多个标签，各个标签做为选择符时用逗号隔开，如下例所示。

  296. 示例6 [url=http://3dmax.9999mb.com/V5_css/t6.htm]t6.htm [/url]

  298. <html>
  299. <head>
  300. <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
  301. <title>嵌入式CSS样式表</title>
  302. <style type="text/css">
  303. <!--
  304. @charset"gb2312";
  305. h1,h2,h3,p,{
  306. font-family: "宋体";

  308. color: #FF0000;
  309. }
  310. -->
  311. </style>
  312. </head>
  313. <body>
  314. <h1>千山鸟飞绝万径人踪灭</h1>
  315. <h2>千山鸟飞绝万径人踪灭</h2>
  316. <h3>千山鸟飞绝万径人踪灭</h3>
  317. <p>千山鸟飞绝万径人踪灭</p>
  318. </body>
  319. </html>











复制代码

[ 本帖最后由 zhanglei700 于 2006-10-25 17:34 编辑 ]
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 17:18:05 | 显示全部楼层

第二章 字体的设置

  1. 第二章 字体的设置

  3. 在css中使用font属性集对字体的风格，大小，亮度等进行设置，下面我们开始学习它们。
  4. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  5. 一 字体风格 font-style
  6. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  8. font-style属性用于字体显示的风格。
  9. 语法：{font-style:inherit|italic|normal|oblique}
  10. 说明：
  11. (1)inherit　继承，表示该属性从父标签中继承而来。
  12. (2)italic 　斜体，表示使用斜体显示文字。
  13. (3)normal　 正常，为默认值。
  14. (4)oblique　偏斜体，表示有点倾斜但不大。


  17. 示例1 t1.htm

  19. <html>
  20. <head>
  21. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  22. <title>字体类型</title>
  23. <style type="text/css">
  24. <!--h1{
  25.   font-style: inherit;
  26. }
  27. h2{
  28.   font-style: italic;
  29. }
  30. h3{
  31.   font-style: normal;
  32. }
  33. p {
  34.   font-style: oblique;
  35. }
  36. -->
  37. </style>
  38. </head>
  39. <body>
  40. <h1>继承inherit</h1>
  41. <h2>斜体italic</h2>
  42. <h3>正常normal</h3>
  43. <p>偏斜体oblique</p>
  44. </body>
  45. </html>


  48. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  49. 二 字体变化 font-variant
  50. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  52. font-variant属性用于指定英文字体在打印时的大小对比。

  54. 语法：{font-variant:normal|small-caps|inherit}
  55. 说明：
  56. (1)normal 表示打印时大写字母没变化。
  57. (2)small-caps 表示打印时大写字母比通常小一点。
  58. (3)inherit　表示该属性从父标签中继承而来。


  61. 示例2 t2.htm

  63. <html>
  64. <head>
  65. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  66. <title>字体类型</title>
  67. <style type="text/css">
  68. <!--
  69. h1{
  70. font-variant:normal；
  71. }
  72. h2{
  73. font-variant:small-caps；
  74. }
  75. h3{
  76. font-variant:inherit；
  77. }
  78. -->
  79. </style>
  80. </head>
  81. <body>
  82. <h1>Normal表示打印时大写字母没变化</h1>
  83. <h2>Small-caps 表示打印时大写字母比通常小一点</h2>
  84. <h3>Inherit表示该属性从父标签中继承而来</h3>
  85. </body>
  86. </html>


  89. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  90. 三 字体亮度 font-weight
  91. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  93. 语法：{font-weight:100-900|bold|bolder|lighter|normal}
  94. 说明：浏览器默认的字体粗细为400。
  95. (1)bold 表示黑体字(相当于数值700 )
  96. (2)bolder 表示比黑体还要黑的字
  97. (3)lighter 表示比黑体颜色要浅
  98. (4)normal 正常体(相当于数值400)
  99. (5)可以指定100-900之间的3位整数,100表示最亮,400表示正常



  103. 示例3 t3.htm

  105. <html>
  106. <head>
  107. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  108. <title>字体类型</title>
  109. <style type="text/css">
  110. <!--
  111. h1{
  112. font-style: inherit;
  113. font-weight:lighter;
  114. }
  115. h2{
  116. font-style: italic;
  117. font-weight:bolder;
  118. }
  119. h3{
  120. font-style: normal;
  121. font-weight:bold;
  122. }
  123. p {
  124. font-style: oblique;
  125. font-weight:100;
  126. }
  127. -->
  128. </style>
  129. </head>
  130. <body>
  131. 未设置样式的字体：床前明月光，疑是地上霜。
  132. <h1>继承inherit,比黑体颜色要浅lighter</h1>
  133. <h2>斜体italic,比黑体还要黑bolder</h2>
  134. <h3>正常体normal,黑体字bold</h3>
  135. <p>偏斜体oblique,最亮100</p>
  136. </body>
  137. </html>



  141. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  142. 四 字体大小 font-size
  143. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  145. font-size属性用来指定字体的相对或绝对大小。

  147. 语法：{ font-size:数值|large| larger| x-large|small|smaller| x-smal ...}
  148. 说明：字体大小使用数值设置也可以使用比例

  150. (1)medium 标准字体大小
  151. (2)small 比父字体小一号的字
  152. (3)x-small 比small小1.2倍的字
  153. (4)xx-small 比x-small小1.2倍的字
  154. (5)large 比父字体大一号的字
  155. (6)x-large 比large大1.2倍的字
  156. (7)xx-large 比x-large大1.2倍的字
  157. (8)整数＋"符号单位",符号单位有：象素px，点数pt，英寸in，毫米mm等
  158. (9)整数+%,表示当前字体大小是父字体大小的百分比



  162. 示例4 t4.htm

  164. <html>
  165. <head>
  166. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  167. <title>字体类型</title>
  168. <style type="text/css">
  169. <!--
  170. h1{
  171. font-style: inherit;
  172. font-weight:lighter;
  173. }
  174. h2{
  175. font-style: italic;
  176. font-weight:bolder;
  177. }
  178. h3{
  179. font-style: normal;
  180. font-weight:bold;
  181. font-size:20pt;
  182. }
  183. p {
  184. font-style: oblique;
  185. font-weight:100;
  186. font-size:medium;
  187. }
  188. -->
  189. </style>
  190. </head>
  191. <body>
  192. 未设置样式的字体：床前明月光，疑是地上霜。
  193. <h1>继承inherit,比黑体颜色要浅lighter</h1>
  194. <h2>斜体italic,比黑体还要黑bolder</h2>
  195. <h3>正常体normal,黑体字bold,大小20pt</h3>
  196. <p>偏斜体oblique,最亮100，标准大小medium</p>
  197. </body>
  198. </html>



  202. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  203. 五 字型设置 font-family
  204. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  206. 字体类型
  207. 语法：{ font-family:"字体1","字体2","字体3"; }
  208. 说明：
  209. (1) 当指定了字体类型时，浏览器将调用客户端字体
  210. (2 )当指定了多种字体时，浏览器会安顺序进行搜索，如果没有搜索到，就使用默认字体。

  212. 示例5 t5.htm

  214. <html>
  215. <head>
  216. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  217. <title>字体类型</title>
  218. <style type="text/css">
  219. <!--
  220. h1{
  221. font-style: inherit;
  222. font-weight:lighter;
  223. font-family:"楷体_gb2312";
  224. }
  225. h2{
  226. font-style: italic;
  227. font-weight:bolder;
  228. font-family:"宋体";
  229. }
  230. h3{
  231. font-style: normal;
  232. font-weight:bold;
  233. font-size:20pt;
  234. }
  235. p {
  236. font-style: oblique;
  237. font-weight:100;
  238. font-size:medium;
  239. }
  240. -->
  241. </style>
  242. </head>
  243. <body>
  244. 未设置样式的字体：床前明月光，疑是地上霜。
  245. <h1>
  246. 继承inherit,比黑体颜色要浅lighter<br>font-family:"楷体_gb2312"
  247. </h1>
  248. <h2>斜体italic,比黑体还要黑bolder</h2>
  249. <h3>正常体normal,黑体字bold,大小20pt</h3>
  250. <p>偏斜体oblique,最亮100，标准大小medium</p>
  251. </body>
  252. </html>


  255. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  256. 六 字体颜色 color
  257. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  259. 语法：{color: 数值}
  260. 作用：字体颜色
  261. 说明：颜色参数取值范围
  262. ·以RGB值表示 如：#ff0000
  263. ·以默认颜色的英文名称表示 如red

  265. 示例6 t6.htm

  267. <html>
  268. <head>
  269. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  270. <title>字体颜色</title>
  271. <style type="text/css">
  272. <!--
  273. h1{
  274.    font-style: inherit;
  275.    color:#ff0000;
  276. }
  277. -->
  278. </style>
  279. </head>
  280. <body>
  281. <h1>字体颜色color </h1>
  282. </body>
  283. </html>



  287. －－－－－－－－－－－－－－－－－－－－－－－－－－－
  288. 七 复合属性设置 font
  289. －－－－－－－－－－－－－－－－－－－－－－－－－－－

  291. 可以使用font参数对一个标签进行复合属性设置。

  293. 标签{font:italic 30pt 楷体_gb2312}

  295. 示例6 t7.htm

  297. <html>
  298. <head>
  299. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  300. <title>字体类型</title>
  301. <style type="text/css">
  302. <!--
  303. p {font:italic 30pt 楷体_gb2312}
  304. -->
  305. </style>
  306. </head>
  307. <body>
  308. 未设置样式的字体：床前明月光，疑是地上霜。
  309. <p>舉頭望明月，低頭思故鄉</p>
  310. </body>
  311. </html>







复制代码
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 17:18:52 | 显示全部楼层

第三章 定义背景

  1. 第三章 定义背景

  3. 1．背景颜色：background-color

  5. 语法：{background-color:数值}
  6. 说明：参数取值和颜色属性一样，如"＃ff0000"

  8. 示例 s3-1.htm

  10. <html>
  11. <head>
  12. <style type="text/css">
  13. <!--
  14. @charset"gb2312";
  15. body { background-color:"#999999" }
  16. p {

  18. font-family: "宋体";
  19. font-size:30px;
  20. color:"#FF0000";
  21. }

  23. -->
  24. </style>
  25. </head>
  26. <body>
  27. 使用background-color设置了body的背景色
  28. <p>
  29. 千山鸟飞绝万径人踪灭
  30. </p>
  31. <p>&nbsp;</p>
  32. <p><a href="h-3.htm#n1">返回</a></p>
  33. </body>
  34. </html>



  38. 2．背景图案：background-image

  40. 语法：{background-image: url(URL)}
  41. 说明： URL就是背景图片的存放路径。

  43. 示例 s3-2.htm

  45. <html>
  46. <head>
  47. <style type="text/css">
  48. <!--
  49. @charset"gb2312";
  50. body{
  51. background-color:"#999999";
  52. background-image: url(b0024.gif);
  53. }
  54. p {

  56. font-family: "宋体";
  57. font-size:30px;
  58. color:"#FF0000";
  59. }

  61. -->
  62. </style>
  63. </head>
  64. <body>
  65. 为body设置背景色background-color
  66. <br>
  67. 为body插入图片background-image

  69. <p>
  70. 千山鸟飞绝万径人踪灭
  71. </p>
  72. <p>&nbsp;</p>
  73. <p><a href="h-3.htm#n1">返回</a></p>
  74. </body>
  75. </html>



  79. 3．图案重复：background-repeat

  81. 语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
  82. 参数取值范围：
  83. ·inherit 继承
  84. ·no-repeat 不重复平铺背景图片
  85. ·repeat 使图片完全平铺，为默认值
  86. ·repeat-x 使图片只在水平方向上平铺
  87. ·repeat-y 使图片只在垂直方向上平铺


  90. 示例 s3-3.htm

  92. <html>
  93. <head>
  94. <style type="text/css">
  95. <!--
  96. @charset"gb2312";
  97. body{
  98. background-color:"#999999";
  99. background-image:url(b0024.gif);
  100. background-repeat:repeat-x ;
  101. }
  102. p {

  104. font-family: "宋体";
  105. font-size:30px;
  106. color:"#FF0000";
  107. }

  109. -->
  110. </style>
  111. </head>
  112. <body>
  113. 图案横向重复background-repeat:repeat-x
  114. <br>
  115. 图案没有重复background-repeat:no-repeat;
  116. <p>
  117. 千山鸟飞绝万径人踪灭
  118. </p>
  119. <p>&nbsp;</p>
  120. <p><a href="h-3.htm#n1">返回</a></p>
  121. </body>
  122. </html>




  127. 4．图案滚动：background-attachment

  129. 语法：{background-attachment:fixed|scroll}
  130. 参数：
  131. ·scroll 页面滚动时背景也滚动
  132. ·fixed：页面滚动时背景不滚动


  135. 示例 s3-4.htm

  137. <html>
  138. <head>
  139. <style type="text/css">
  140. <!--
  141. @charset"gb2312";
  142. body{
  143. background-color:"#999999";
  144. background-image:url(b0024.gif);
  145. background-repeat:repeat-x ;
  146. background-attachment:fixed;
  147. }
  148. p {

  150. font-family: "宋体";
  151. font-size:30px;
  152. color:"#FF0000";
  153. }

  155. -->
  156. </style>
  157. </head>
  158. <body>
  159. 背景图案不随页面滚动background-attachment:fixed；
  160. <br>
  161. 背景图案随页面滚动background-attachment:scroll；
  162. <p>
  163. 千山鸟飞绝万径人踪灭
  164. </p>
  165. <p>&nbsp;</p>
  166. <p><a href="h-3.htm#n1">返回</a></p>
  167. </body>
  168. </html>




  173. 5．图案定位：background-position

  175. 语法：{background-position:数值|top|bottom|left|right|center}
  176. 参数:
  177. ·top:顶对齐 background-position:top;
  178. ·bottom:底对齐 background-position:bottom;
  179. ·left：左对齐
  180. ·right：右对齐
  181. ·center：中心对齐
  182. ·绝对数值：background-position:200pt 100pt;
  183. ·相对比例：background-position:20% 70%;


  186. 示例 s3-5.htm

  188. <html>
  189. <head>
  190. <style type="text/css">
  191. <!--
  192. @charset"gb2312";
  193. body{
  194. background-color:"#999999";
  195. background-image:url(b0024.gif);
  196. background-repeat:no-repeat;
  197. background-attachment:fixed;
  198. background-position:20% 70%;
  199. }
  200. p {

  202. font-family: "宋体";
  203. font-size:30px;
  204. color:"#FF0000";
  205. }

  207. -->
  208. </style>
  209. </head>
  210. <body>
  211. 图案定位：background-position
  212. <p>
  213. 千山鸟飞绝万径人踪灭
  214. </p>
  215. <p>&nbsp;</p>
  216. <p><a href="h-3.htm#n1">返回</a></p>
  217. </body>
  218. </html>




  223. 示例 s3-6.htm

  225. <html>
  226. <head>
  227. <style type="text/css">
  228. <!--
  229. body{ background-color:"#999999";}
  230. p {

  232. background-image:url(b0024.gif);
  233. font-family: "宋体";
  234. font-size:30px;
  235. color: #FF00FF;
  236. }

  238. -->
  239. </style>
  240. </head>
  241. <body>
  242. 图案插入p标签中background-image
  243. <p>
  244. 千山鸟飞绝万径人踪灭
  245. </p>
  246. <p>&nbsp;</p>
  247. <p><a href="h-3.htm#n1">返回</a></p>
  248. </body>
  249. </html>











复制代码
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 17:19:28 | 显示全部楼层

第四章 边框设置

  1. 第四章 边框设置


  4. ===================================================
  5. 一 margin
  6. ===================================================
  7. margin属性用于设置边界边框，默认情况下margin属性没有继承性。

  9. 1 margin-top 指定顶部空白 margin-top:30pt;
  10. 2 margin-right 指定右端空白 margin-right:2%;
  11. 3 margin-bottom 指定底部空白 margin-bottom:auto;
  12. 4 margin-left 指定左端空白 margin-left:0;

  14. 注：auto-->自动指定
  15. 0-->表示没有空白，为默认值
  16. %-->表示相对于父级空白的百分比


  19. 示例4.1

  21. 本例设置p标签左侧缩进50px

  23. s1.htm

  25. <html>
  26. <head>
  27. <style type="text/css">
  28. <!--
  29. p {
  30. font-family: "宋体";
  31. font-size:30px;
  32. color: #FF00FF;
  33. margin-left:50px;
  34. }

  36. -->
  37. </style>
  38. </head>
  39. <body>
  40. <h2>千山鸟飞绝万径人踪灭</h2>
  41. <p>标签p中的元素左侧距离margin-left:50; </p>
  42. <p>margin属性具有定位作用</p>
  43. <p></p>
  44. </body>
  45. </html>




  50. 示例4.2

  52. 本例对p标签的四个边界设置了空白

  54. s2.htm

  56. <html>
  57. <head>
  58. <style type="text/css">
  59. <!--
  60. body{
  61. background-color:"#999999";
  62. }

  64. p {

  66. background-image:url(b0024.gif);
  67. font-family: "宋体";
  68. font-size:20px;
  69. color: #FF00FF;
  70. margin-top:30pt;
  71. margin-right:30pt;
  72. margin-left:30pt;
  73. margin-bottom:auto;
  74. }

  76. -->
  77. </style>
  78. </head>
  79. <body>
  80. <p>
  81. 千山鸟飞绝万径人踪灭
  82. </p>
  83. <p>底部边界由浏览器自动设置margin-bottom:auto;</p>
  84. <p><a href="h-3.htm#n1">返回</a></p>
  85. <p>&nbsp;</p>
  86. </body>
  87. </html>





  93. 示例4.3

  95. 本例对p标记的顶和左边界进行了设置

  97. (1)p3.css

  99. @charset"gb2312";
  100. p {
  101. margin-top:30pt;
  102. margin-left:30pt;
  103. font-family: "宋体";
  104. font-size: 20px;
  105. font-weight:100;
  106. color: #ff0000;
  107. background-color:"#d6ffd6" ;
  108. }



  112. (2)s3.htm


  115. <html>
  116. <head>
  117. <title>链接外部样式表</title>
  118. <link href="p3.css" rel="stylesheet" type="text/css">
  119. </head>
  120. <body>
  121. <p>
  122. margin-top 指定顶部空白
  123. </p>
  124. <p>
  125. margin-bottom 指定底部空白
  126. </p>
  127. <p>
  128. margin用来设置最外层的空白区域
  129. </p>
  130. </body>
  131. </html>


  134. ===================================================
  135. 二 border
  136. ===================================================
  137. border属性用于设置边框样式，颜色，空白缩进等。

  139. 1 border-left 设置左边框
  140. 2 border-right 设置右边框
  141. 3 border-bottom 设置底边框
  142. 4 border-top 设置顶边框
  143. 5 border-color 设置边框颜色
  144. 6 border-style 设置边框风格
  145. （1）none 忽略边框
  146. （2）hidden 隐藏边框
  147. （3）dotted 边框使用点滑线
  148. （4）dashed 边框使用短线
  149. （5）solid 边框使用实线
  150. （6）double 边框使用双实线
  151. （7）groove 边框使用三维凹线
  152. （8）ridge 边框使用三维凸线
  153. （9）inset 边框使用内三维线，结合背景构造凹陷按钮
  154. （10）outset 边框使用外三维线，结合背景构造凸出按钮
  155. （11）inherit 从父级继承
  156. 7 border-width 设置边框宽度
  157. （）medium 默认中等宽度
  158. （）thin 比默认略窄
  159. （）thick 比默认略宽
  160. （）inherit 从父级继承
  161. 注：只有设置了style属性才可以设置width。


  164. 示例4.4

  166. 本例对p标记设置了实线边框

  168. (1)p4.css

  170. @charset"gb2312";
  171. p{
  172. margin-right:50pt;
  173. margin-left:50pt;
  174. border-style:solid;
  175. border-color:"red";
  176. background-color:"#d6ffd6";
  177. }


  180. (2)s4.htm

  182. <html>
  183. <head>
  184. <title>链接外部样式表</title>
  185. <link href="p4.css" rel="stylesheet" type="text/css">
  186. </head>
  187. <body>
  188. <p>边框使用实线border-style:solid;</p>
  189. <p>边框颜色border-color:"red";</p>
  190. <p>边框背景background-color:"#d6ffd6"; </p>
  191. </body>
  192. </html>



  196. 示例4.5

  198. 本例对p标记的四个边框分别设置

  200. (1)p5.css

  202. @charset"gb2312";
  203. p{
  204. margin-right:50pt;
  205. margin-left:50pt;
  206. border-left-style:solid;
  207. border-right-style:double;
  208. border-top-style:dotted;
  209. border-bottom-style:dashed;
  210. border-color:"red";
  211. background-color:"#d6ffd6";
  212. }


  215. (2)s5.htm

  217. <html>
  218. <head>
  219. <title>链接外部样式表</title>
  220. <link href="p5.css" rel="stylesheet" type="text/css">
  221. </head>
  222. <body>
  223. <p>左边框border-left-style:solid;</p>
  224. <p>右边框border-right-style:double;</p>
  225. <p>顶边框border-top-style:dotted;</p>
  226. <p>
  227. 下边框border-bottom-style:dashed;<br>
  228. 边框颜色border-color:"red";<br>
  229. 背景颜色background-color:"#d6ffd6";
  230. </p>
  231. </body>
  232. </html>





  238. 示例4.6

  240. (1)p6.css

  242. @charset"gb2312";

  244. body{background-color: #ECE9E8;}

  246. h1{
  247. margin-right:50pt;
  248. margin-left:50pt;
  249. border-style:outset;
  250. background-color:"#C0C0C0";
  251. border-width:thick;
  252. }

  254. h2{
  255. margin-right:50pt;
  256. margin-left:50pt;
  257. border-style:groove;
  258. background-color:"#C0C0C0";
  259. border-width:thick;
  260. }

  262. h3{
  263. margin-right:50pt;
  264. margin-left:50pt;
  265. border-style:ridge;
  266. background-color:"#C0C0C0";
  267. border-width:thick;
  268. }

  270. p{
  271. margin-right:50pt;
  272. margin-left:50pt;
  273. border-style:groove;
  274. background-color:"#D3D3D3";
  275. border-width:thick;
  276. border-color:"#999999"
  277. }






  284. (2)s6.htm

  286. <html>
  287. <head>
  288. <title>链接外部样式表</title>
  289. <link href="p6.css" rel="stylesheet" type="text/css">
  290. </head>
  291. <body>
  292. <h1>外三维线outset</h1>
  293. <h2>内三维线inset</h2>
  294. <h3>三维凸线ridge</h3>
  295. <p>
  296. 三维凹线groove
  297. </p>
  298. </body>
  299. </html>









复制代码
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 17:20:00 | 显示全部楼层

第五章 边框内容设置

  1. 第五章 边框内容设置


  4. ==============================================
  5. 一 padding
  6. ==============================================
  7. padding用来设置边框中的内容，在没有设置padding属性时，放在边框内的元素都是紧贴边框的。

  9. 1 padding-top 顶边距
  10. 2 padding-bottom 底边距
  11. 3 padding-left 左边距
  12. 4 padding-right 右边距

  14. 上面四个属性的设置和前面的类似，既可以设置绝对值也可以相对，例如。

  16. padding-top:3px;
  17. padding-bottom:5%;



  21. 示例5.1

  23. (1)css5-1.css

  25. @charset"gb2312";

  27. body{background-color: #ECE9E8;}
  28. h1{
  29. margin-right:50pt;
  30. margin-left:50pt;
  31. border-style:outset;
  32. background-color:"#C0C0C0";
  33. border-width:thick;
  34. padding-top:8px;
  35. padding-bottom:5px;
  36. padding-left:8px;
  37. }

  39. h2{
  40. margin-right:50pt;
  41. margin-left:50pt;
  42. border-style:inset;
  43. background-color:"#C0C0C0";
  44. border-width:thick;

  46. }


  49. (2)htm5-1.htm

  51. <html>
  52. <head>
  53. <title>链接外部样式表</title>
  54. <link href="css5-1.css" rel="stylesheet" type="text/css">
  55. </head>
  56. <body>
  57. <h1>外三维线outset,内容与边框设置一点距离</h1>
  58. <h2>内三维线inset，内容紧贴边框</h2>
  59. <p>

  61. </p>
  62. </body>
  63. </html>

  65. ==============================================
  66. 二 文本设置
  67. ==============================================

  69. 1 text-align
  70. 用来设置文本水平对齐的方式
  71. (1)text-align:center;居中
  72. (2)text-align:left;左对齐
  73. (3)text-align:right;右对齐
  74. (4)text-align:inherit;继承

  76. 2 text-decoration
  77. 用来设置文本的强调方式
  78. (1)text-decoration:none;不指定文本效果
  79. (2)text-decoration:underline;下划线
  80. (3)text-decoration:through;中划线
  81. (4)text-decoration:overline;上划线
  82. (5)text-decoration:blink;文本闪烁
  83. (6)text-decoration:inherit;继承

  85. 3 text-indent
  86. 用来设置首行缩进
  87. (1)text-indent:3pt;绝对值
  88. (2)text-indent:3%;相对值
  89. (3)text-indent:inherit;继承

  91. 4 text-transform
  92. 用来设置大小写转换
  93. (1)text-transform:capitalize;首字母大写
  94. (2)text-transform:uppercase;所有字母大写
  95. (3)text-transform:lowercase;全部小写
  96. (4)text-transform:none;不使用大小写转换，为默认
  97. (5)text-transform:inherit;继承


  100. 示例5.2

  102. (1)css5-2.css

  104. @charset"gb2312";
  105. p{
  106. margin-right:50pt;
  107. margin-left:50pt;
  108. background-color:"#C0C0C0";
  109. border-width:thick;
  110. padding-top:5px;
  111. padding-bottom:5px;
  112. padding-left:5px;

  114. text-indent:40px;

  116. }
  117. h2{
  118. margin-right:50pt;
  119. margin-left:50pt;
  120. border-style:outset;
  121. background-color:"#C0C0C0";
  122. border-width:thick;

  124. text-align:center;
  125. }

  127. (2)htm5-2.htm

  129. <html>
  130. <head>
  131. <title>链接外部样式表</title>
  132. <link href="css5-2.css" rel="stylesheet" type="text/css">
  133. </head>
  134. <body>
  135. <h2>床前明月光，疑是地上霜<br>
  136. 舉頭望明月，低頭思故鄉
  137. </h2>
  138. <p>
  139. 千岛湖，是1959年9月新安江水力发电站拦河大坝建成后，截蓄新安江水流而成的巨大水库。据淳安县地名委员会1983年普查结果，水库淹没85座山，形成大小岛屿1078座(按设计水位108米高程，面积2500平方米为极限计算)，故名“千岛湖”。
  140. </p>
  141. </body>
  142. </html>



  146. ==============================================
  147. 三 字间距设置
  148. ==============================================

  150. 1 word-spacing
  151. 用来设置单词之间的距离，仅对英文有效。
  152. (1)word-spacing:normal;正常值
  153. (2)word-spacing:3pt;绝对值
  154. (3)word-spacing:inherit;继承


  157. 2 letter-spacing
  158. 用来设置字符的间距
  159. (1)letter-spacing:normal;正常值
  160. (2)letter-spacing:3pt;绝对值
  161. (3)letter-spacing:inherit;继承




  166. (1)css5-3.css

  168. @charset"gb2312";
  169. p{
  170. margin-right:50pt;
  171. margin-left:50pt;
  172. background-color:"#C0C0C0";
  173. border-width:thick;
  174. padding-top:5px;
  175. padding-bottom:5px;
  176. padding-left:5px;
  177. text-indent:40px;

  179. word-spacing:10pt;
  180. }

  182. (2)htm5-3.htm

  184. <html>
  185. <head>
  186. <title>链接外部样式表</title>
  187. <link href="css5-3.css" rel="stylesheet" type="text/css">
  188. </head>
  189. <body>
  190. <h2>床前明月光，疑是地上霜<br>
  191. 舉頭望明月，低頭思故鄉
  192. </h2>
  193. <p>
  194. 千岛湖，是1959年9月新安江水力发电站拦河大坝建成后，截蓄新安江水流而成的巨大水库。据淳安县地名委员会1983年普查结果，水库淹没85座山，形成大小岛屿1078座(按设计水位108米高程，面积2500平方米为极限计算)，故名“千岛湖”。
  195. </p>
  196. </body>
  197. </html>







复制代码
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 17:20:32 | 显示全部楼层

第六章 class与ID

  1. 第六章 class与ID

  3. class与ID主要用来对相同的标签进行不同的设置和对不同的标签进行相同的设置。

  5. ==============================================
  6. 一 class
  7. ==============================================
  8. class通常叫做类选择符，

  10. 语法：

  12. 1 定义类

  14. (1)带标签定义


  17. 语法：选择符.标识符{ 选择符样式定义 }

  19. (2)不带标签定义


  22. 语法：.标识符{ 选择符样式定义 }

  24. 2 引用类

  26. <选择符 class="标识符">......</选择符>


  29. 示例6-1

  31. (1)css6-1.css

  33. @charset"gb2312";
  34. p.A{
  35. font-size:20pt;
  36. color:#ff0000;
  37. }
  38. p.B{
  39. font-size:20pt;
  40. color:#0000ff;
  41. }
  42. .AB{
  43. font-size:20pt;
  44. color:#ff00ff;
  45. }

  47. (2)htm6-1.htm

  49. <html>
  50. <head>
  51. <title>链接外部样式表</title>
  52. <link href="css6-1.css" rel="stylesheet" type="text/css">
  53. </head>
  54. <body>
  55. <p class="A">床前明月光，疑是地上霜</p>
  56. <p class="B">舉頭望明月，低頭思故鄉</p>
  57. <h1 class="AB">床前明月光，疑是地上霜</h1>
  58. <h2 class="AB">床前明月光，疑是地上霜</h2>
  59. <p class="AB">床前明月光，疑是地上霜</p>
  60. </body>
  61. </html>


  64. ==============================================
  65. 一 ID
  66. ==============================================


  69. 1 定义ID

  71. 语法：#标识符{ 样式定义 }

  73. 2 引用

  75. 语法：<选择符 ID="标识符">......</选择符>



  79. 示例6-2

  81. (1) css6-2.css

  83. @charset"gb2312";
  84. #A1{
  85. font-size:20pt;
  86. color:#ff0000;
  87. }
  88. #A2{
  89. font-size:20pt;
  90. color:#0000ff;
  91. }
  92. #A3{
  93. font-size:20pt;
  94. color:#ff00ff;
  95. }



  99. (2) htm6-2.htm

  101. <html>
  102. <head>
  103. <title>链接外部样式表</title>
  104. <link href="css6-2.css" rel="stylesheet" type="text/css">
  105. </head>
  106. <body>
  107. <p ID="A1">床前明月光，疑是地上霜</p>
  108. <p ID="A2">舉頭望明月，低頭思故鄉</p>
  109. <h1 ID="A1">床前明月光，疑是地上霜</h1>
  110. <h1 ID="A2">床前明月光，疑是地上霜</h1>
  111. <h1 ID="A3">床前明月光，疑是地上霜</h1>
  112. </body>
  113. </html>















复制代码
回复

使用道具 举报

ejykluang 发表于 2006-10-25 18:03:56 | 显示全部楼层
不好意思.你指的是不是

论坛管理>论坛设置>编辑论坛...

我已经把它钩了,可是还是一样.请指点
help3.jpg
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 19:12:26 | 显示全部楼层
原帖由 ejykluang 于 2006-10-25 18:03 发表
不好意思.你指的是不是

论坛管理>论坛设置>编辑论坛...

我已经把它钩了,可是还是一样.请指点

论坛先更新缓存.再在ss后台设置。再更新，如果启用了HTML  .就要删除才能看到.
要是还没有.请教于茄子妹妹.
Capture265.jpg
回复

使用道具 举报

 楼主| zhanglei700 发表于 2006-10-25 19:15:46 | 显示全部楼层
1111111111111111111
Capture266.jpg
回复

使用道具 举报

ejykluang 发表于 2006-10-26 15:26:15 | 显示全部楼层
小弟又有问题想请问要如何制作图例的Flash幻灯片？

是不是跟着https://discuz.dismall.com/viewthread.php?tid=415961&extra=&page=20的代码？
help4.jpg
回复

使用道具 举报

下一页 »
1 ...222324252627282930... 32下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-25 01:14 , Processed in 0.036335 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表