css教程源码

【注意】：复制代码时注意带上该段的开 头与结尾部分（如"body{" 和"}"），删除 【】部分、分割线以及换行，颜色代码（ 如red，#000000，#111）自行更换，说 明仅供参考，因浏览器显示差异或属性覆 盖等问题可能看不到效果，具体使用请自 行摸索，欢迎各位提供纠正完善，更多属 性代码参考请到www.w3school.com.cn/c ss/，谢谢。

〓网页主页定义〓

body { 【网页背景色为绿】 background-color:green; 【默认字颜色为红】 color: red; 【网页框与网页边缘距离】 padding:2px3px; 【文字居中,居左用left,居右用right】 text-align: center; 【字体尺寸为默认的120%,小字体用9px 或其他，由实际情况而定】 font-size:120%; 【字体浓淡为粗体。normal:默认值，bol d:定义粗体字符，bolder:定义更粗的字 符，lighter:定义更细的字符，100~900: 定义由粗到细的字符，400 等同于norm al，而700 等同于bold】 font-weight: bold; 【文字风格为斜体。normal:默认值，obl ique:倾斜文字】 font-style:Italic; 【字体为小型大写字母】 font-variant:small-caps; 【字体系列为通常字体系列。通常字体系 列名称有"serif"、"sans-serif"、"cursive" 、"fantasy"、"monospace"。提示：建议 使用多个，浏览器将使用其可识别的第一 个值。使用逗号分割每个值，并始终提供 一个通常字体系列作为最后的选择】 font-family:"Times New Roman",Georgi a,Serif; 【文字行距大小】 line-height: 18px; 【背景图片，括号内填图片地址，如果图 片在你的磨里可删除/down部分★若与 网页边框一起用，图片将只能显示在边框 外】 background: url(/down/20121124/4458 2/a.jpg) 【背景图片重复属性。 这个属性和background-image属性连在 一起使用，决定背景图片是否重复。如果 只设置background-image属性，没设置b ackground-repeat属性，在缺省状态下, 图片既横向重复，又竖向重复。repeat-x :背景图片横向重复repeat-y:背景图片竖 向重复no-repeat:背景图片不重复】 repeat-y; 【元素定位。absolute:绝对定位fixed:相 对于浏览器窗口进行定位relative:相对于 其正常位置进行定位static:默认值，没有 定位】 position:relative; }

〓扩展名及首页上页下页末页区域定义〓

span { 【扩展名和"首页上页下页末页"区域背景 色】 background-color:white; 【位置同上，文字颜色】 color:orange; 【边框样式为槽线式】 border-style: groove; 【位置同上，文字边框颜色】 border-color:red; 【位置同上，文字边框粗细，左为横框架 ，右为竖框架】 border-width: 1px1px; }

〓链接文字定义〓

a { 【边框样式为直线式】 border-style: solid; 【链接文字的边框粗细，左为横框，右为 竖框】 border-width:1px1px; 【同上位置，边框颜色】 border-color: blue; 【同上位置，文字颜色】 color:gold; 【链接文字的背景颜色】 background-color:gold; 【链接文字添加上划线】 text-decoration:overline; }

〓评论区域定义〓

form{ 【评论区域背景颜色】 background-color:#000011; 【评论区域字体颜色】 color:red; }

〓未访问的链接〓

a:link { 【未访问的链接颜色】 color: #FF0000 }

〓已访问的链接〓 a:visited { 【已访问的链接颜色】 color: #00FF00 }

〓当有鼠标悬停在链接上〓 a:hover { 【鼠标停留链接的颜色】 color: #FF00FF }

〓被选择的链接〓 a:active { 【被选择链接的颜色】 color: #0000FF }

〓文件列表区域定义〓

.file_list{ 【文件列表区域背景颜色为白】 background-color:white; 【扩展名字体颜色★若前面已用了span 部分修改将优先显示span部分】 color:#556688; 【文件列表区域的文字尺寸为小字体】 font-size:9px; 【文件列表区域边框属性，分别为宽度， 样式，颜色】 border:2pxsolid red;

}

〓文件列表文件名区域〓

.file_list li{ 〓文件列表区域分割线〓

【文件名下边框线(即下划线)粗细】 border-bottom:1px 【同上，样式】 solid 【同上，颜色】 lime; }

〓文件扩展名区域〓

.file_list span{ 【扩展名字体颜色为红】 color:red; 【扩展名背景色】 background-color:black; }

〓网页边框内定义〓

div { 【默认字颜色为红】 color:red; 【边框样式为双线式。如果浏览器不支持 将默认显示为实线】 border-style: double; 【网页边框颜色，分别为上右下左框】 border-color: #ff5566 #446600 #0033ff #1122ff; 【网页边框粗细，左为横框，右为竖框】 border-width: 4px1px; 【文字与网页边框的距离】 padding:3px; 【网页边框内的颜色。如果与body{back ground-color:red;}同时存在，则网页边 框外为红色，边框内为绿色】 background-color:green; 【分类中用到div的部分与周边距离】 margin:3px1px; }

〓首页上页下页末页区域定义〓

p { 【与外边缘的距离，分别为上右下左外边 距】 margin:2px1px2px1px 【"首页上页下页末页"区域背景色】 background-color:white; 【"首页上页下页末页"区域字体颜色】 color:red; }

〓网页主体定义〓

#whole_body { 【背景图片，可用于添加网站logo 】 background:url(图片地址) 【背景图不重复】 no-repeat 【背景图随网页下拉而滚动】 scroll 【背景图位置居右，居左用left居中用ce nter。另外，也可以用1%-100%表示与 左端距离大小】 right 【背景图位置居网页底端，居顶用top居 中用center。同样也可用1%-100%表示 与顶端距离大小】 bottom; 【图片弯曲半径，即调整图片四角的曲度 】 border-radius: 12px; 【背景图尺寸。cover:保持原图宽高比例 ，缩放到正好完全覆盖定义区域contain: 保持原图宽高比例，缩放到宽度或高度正 好适应指定区域】 background-size:320px;

〓网页圆角定义〓 【圆角半径。-moz-适用于Firefox浏览器 ，而-webkit-则是用于Safari/Chrom浏览 器】 -moz-border-radius: 12px; -webkit-border-radius: 12px;

〓网页阴影定义〓

【从左到右分别为阴影类型(若无默认为 投影效果。inset:内阴影效果)、阴影水平 偏移值(即控制左右阴影。正数值控制左 边，负数值控制右边)、垂直偏移值(即控 制上下阴影。正数值控制上边，负数值控 制下边)、模糊值和颜色】 box-shadow : inset -3px3px15px#111; -webkit-box-shadow :inset -3px3px15p x#111; -moz-box-shadow :inset -3px3px15px #111;

【网页主体宽度最大值】 max-width : 640px; 【文字居中】 text-align : center; 【网页主体的外边距】 margin:auto; 【主体网页内文字与边缘距离】 padding : 10px5px; *padding : 10px5px; _padding : 10px5 px; 【网页边框与网页边缘距离】 margin:5px2px; }

〓输入框定义〓

textarea,input[type="input"] ,input[type= "text"] { 【输入框填充颜色为黑】 background:black; 【输入框内字体颜色为白】 color:white; 【输入框内框与外框距离，略大可以形成 双重框架】 border:3px 【边框线样式为实线】 solid 【透明属性，其实系统默认也是这个】 transparent; 【边框半径，适当调大可发现输入框由矩 形变成椭圆形】 border-radius : 7px; 【阴影，从左到右分别为阴影类型、阴影 水平偏移值、垂直偏移值、模糊值和颜色 ，具体见上】 box-shadow : inset 3px3px3px#222; 【输入文字与输入框条距离】 padding : 2px; }

〓提交按钮定义〓

【submit用于提交表单，button用于Java Script执行。若要区别开来用，把其中一 个移开再新建即可】 button,input[type="button "],input[type= "submit"] { 【按钮背景色为黑】 background : #333; 【字体颜色为白】 color : #EEE; 【按钮大小】 border : 1px solid transparent; 【按钮阴影，详情见上】 box-shadow : 0 0 } 文本编码: UTF-8 转换为GBK «更新的一个更旧的一个»