偶然回到我的磨,看到自己建立的磨盘还顽强地存在着。当年没有电脑,没有博客,刚接触建站和网页代码还是在我的磨这个小天地,不得不感谢 @chen 的免费提供,虽然一直不清楚这是个怎样的人物。

贴下我的笑忘书资源馆页面截图。35230点wodemo点net。

mopan.jpg

那时候我一边学习CSS,一边整理了一份CSS简单汇总,当然还没有高深的CSS 3.0 。仅供参考。

CSS代码使用方法

CSS代码结构:由两部分组成,即

指定区域(选择器){ 通用代码(声明) }

注:指定区域(选择器)为本教程的蓝色部分,确定样式渲染的对象;通用代码(声明)为本教程的红色部分,针对特定对象进行控制和定义。
不明白的可以看示例:

body{ 
font-weight:bold;
background:red;
}

注:body为网页全局区域,即<body>标签内的内容,将被font-weight:bold;定义文字为粗体,被background:red;定义背景颜色为红色。

注意:复制红色通用代码时请删除类似①②③的标识符 

〓字体属性〓


①font-style:italic; 
②font-weight:bold; 
③font-size:105%; 
④font-variant:small-caps; 
⑤font-family:"Times New Roman",Georgia,Serif; 
说明: ①font-style /*字体风格。normal:默认值,oblique:倾斜文字,italic:斜体*/

②font-weight /*字体浓淡。normal:默认值,bold:粗体,bolder:更粗,lighter:更细,100~900: 定义由粗到细的字符,400等同于 normal,而700等同于 bold*/

③font-size /*字体尺寸。通过百分比或12px或1.2em等控制,由实际情况而定,如120%为默认字体大小的120%,和1.2em同样大小*/

④font-variant /*字体为小型大写字母。若要正常值删除该部分即可*/

⑤font-family /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示:建议使用多个,浏览器将使用其可识别的第一个值。使用逗号分割每个值,并始终提供一个通常字体系列作为最后的选择*/

①color:white;

说明: ①color /*字体颜色。可用颜色代码如#000或#668547或red等*/

〓背景属性〓

①background-image:url(背景图地址); 
②background-repeat:no-repeat; 
③background-attachment:scroll; 
④background-position:right bottom; 
⑤background-color:#002255; 
⑥background-size:cover;
说明: ①background-image /*添加背景图*/

②background-repeat /*背景图片重复属性。默认为图片既横向重复,又竖向重复,repeat-x:背景图片横向重复,repeat-y:背景图片竖向重复,no-repeat:背景图片不重复*/

③background-attachment /*背景图随网页下拉而滚动*/

④background-position /*背景图水平位置和垂直位置。水平位置:left:居左,居中:center,也可以用1%-1008%表示与左端距离大小。垂直位置:top:居顶部,center:居中,也可用1%-100%表示与顶端距离大小 */

⑤background-color /*背景颜色*/

⑥background-size /*背景图尺寸。cover:保持原图宽高比例,缩放到正好完全覆盖定义区域 contain:保持原图宽高比例,缩放到宽度或高度正好适应指定区域,或用像素如320px 480px或百分比如80% 90%表示*/

〓边框属性〓

border:①5px ②solid ③red;
说明: ①5px /*边框宽度*/

②solid /*边框样式*/

③red /*边框颜色*/

添加文字下划线(即下边框)

border-bottom:2px solid red;
说明: 同上(border部分)

边框宽度(可单独设置各框宽度)

border-width:2px 3px 0px 5px;
说明: /*分别为上右下左框*/

边框颜色(可单独设置各框颜色) 

border-color:red white green #660022;
说明: /*分别为上右下左框*/


〓内边距属性〓

padding:10px 5px 15px 20px;

说明: /*分别为上右下左内边距*/

〓外边距属性〓

margin:10px 5px 15px 20px;

说明: /*分别为上右下左外边距*/

〓文本属性〓

文本对齐

text-align: ①center;
说明: ①center /*文字居中。left:把文本排列到左边,默认值:由浏览器决定,right 把文本排列到右边,justify 实现两端对齐文本效果。*/

规定当文本溢出包含元素时发生的事情

text-overflow: ①ellipsis;
说明:①ellipsis /*clip:修剪文本,ellipsis:显示省略符号来代表被修剪的文本,string:使用给定的字符串来代表被修剪的文本*/

文本文字阴影

text-shadow: ①5px ②5px ③6px ④#FF0000;
说明:①5px /*水平阴影的位置,允许负值*/

②5px /*垂直阴影的位置,允许负值*/

③6px /*模糊的距离*/

④#FF0000 /*阴影的颜色*/

允许长单词换行到下一行

word-wrap: ①break-word;

说明:①break-word /*允许长单词换行到下一行*/

〓垂直对齐属性〓

vertical-align:①text-top;

说明: ①text-top /*把元素的顶端与父元素字体的顶端对齐。baseline:默认,元素放置在父元素的基线上,sub:垂直对齐文本的下标,super:垂直对齐文本的上标,top:把元素的顶端与行中最高元素的顶端对齐,middle:把此元素放置在父元素的中部,bottom:把元素的顶端与行中最低的元素的顶端对齐,text-bottom:把元素的底端与父元素字体的底端对齐,%:使用 "line-height" 属性的百分比值来排列此元素,允许使用负值。*/

〓圆角属性〓

border-radius:①1px 1px 5px 5px;
说明: ①1px 1px 5px 5px /*分别为左上角,右上角,右下角,左下角*/

建议也加上下面两段(兼容其他浏览器),即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-border-radius:1px 1px 5px 5px; -webkit-border-radius:1px 1px 5px 5px;)

〓阴影属性〓

box-shadow:①inset ②-2px ③2px ④10px ⑤#06c;
说明: ①inset /*阴影类型。outset:默认,投影效果,inset:内阴影效果。*/

②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制右侧,负数值控制左侧)*/

③2px/*垂直偏移值(即控制上下阴影。正数值控制下边,负数值控制上边)*/

④10px /*模糊值*/

⑤#06C /*阴影颜色*/;

建议也加上下面两段,即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C; -webkit-box-shadow:inset -2px 2px 10px #06C;)

〓轮廓属性〓

outline:①2px ②black ③solid;

说明: ①2px /*轮廓宽度*/

②black /*轮廓颜色*/

③solid /*轮廓样式。边框线的类型有九个确定值: none:无边框线,dotted:由点组成虚线,dashed:由短线组成的虚线,solid:实线,double:双线,groove:3D沟槽状的边框,ridge:3D脊状的边框,inset:3D内嵌边框,颜色较深,outset:3D外嵌边框,颜色较浅。*/


〓尺寸属性〓

height:102%; /*元素的高度*/

line-height:2px; /*行高*/

max-height:240px; /*元素的最大高度*/

max-width:320px; /*元素的最大宽度*/

min-height:100px; /*元素的最小高度*/

min-width:100px; /*元素的最小宽度*/

width:240px; /*元素的宽度*/


生成框属性


display: ①none;
说明:①none /*此元素不会被显示*/


②block /*此元素将显示为块级元素,前后会带有换行符*/

③inline /*默认。此元素会被显示为内联元素,元素前后没有换行符*/

④inline-block /*行内块元素*/

⑤list-item /*此元素会作为列表显示。*/

⑥run-in /*此元素会根据上下文作为块级元素或内联元素显示*/

⑦table /*此元素会作为块级表格来显示(类似<table>),表格前后带有换行符*/

⑧inline-table /*此元素会作为内联表格来显示(类似<table>),表格前后没有换行符*/

⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似<tbody>)*/

⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似<thead>)*/

①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似<tfoot>)*/

①②table-row /*此元素会作为一个表格行显示(类似<tr>)*/

①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似<colgroup>)*/

①④table-column /*此元素会作为一个单元格列显示(类似<col>)*/

①⑤table-cell /*此元素会作为一个表格单元格显示(类似<td>和<th>)*/

①⑥table-caption /*此元素会作为一个表格标题显示(类似<caption>)*/

⊙伪元素

在某区域前面添加内容

①#whole_body:before{content:②"要显示的文字";}

说明: ①#whole_body /*填要定义的区域*/

②填显示文字

在某区域后面添加内容

.file_list li:after{content:"显示文字";}

说明:同上

用于给文本的首行设置特殊样式

.file_list:first-line{填通用代码}

伪类在元素获得焦点时向元素添加特殊的样式

a:focus{通用代码}


★属性选择器★

说明:利用这个选择器可以对带有指定属性的 HTML 元素设置样式。

如想定义某个文字链接的颜色大小的等属性可以用a[href="链接"]{通用代码},定义"分类名"属性可用a[href^="/cat/"]{通用代码}或input[type="text"]等等。

[属性] {通用代码}

/*用于选取带有指定属性的元素。*/

[属性=值] {通用代码} 

/*用于选取带有指定属性和值的元素。*/

[属性~=值] {通用代码} 

/*用于选取属性值中包含指定词汇的元素。*/

[属性|=值] { 通用代码}

/*用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。*/

[属性^=值] {通用代码}

/*匹配属性值以指定值开头的每个元素。*/

[属性$=值] {通用代码}

/*匹配属性值以指定值结尾的每个元素。*/

[属性*=值] {通用代码}

/*匹配属性值中包含指定值的每个元素。*/

全文完