Warning: Undefined array key "HTTP_REFERER" in /www/wwwroot/prod/www.enjoyasp.net/wp-content/plugins/google-highlight/google-hilite.php on line 58
1, background
?? ???? body
?? ??? ?{
?? ??? ??? ?background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;?? //当将css从文件中提取，放入一.css文件中时，图片路径注意调整
?? ??? ?}
- background-color:yellow; 或者 background-color:#00ff00; 或者 background-color:rgb(255,0,255);
- background-image:url(‘aaa.gif’) ? //默认：水平，垂直重复. 水平background-repeat:repeat-x; ? 垂直 background-repeat:repeat-y;? 不重复background-repeat:no-repeat;
- background-attachment:fixed;? //指定背景图片是否固定，取值为scroll, fixed. 当为fixed时，图片永远在当前屏幕中显示，不会随滚动条的滑动而变化。
- background-position:50% 20%;? 或者：background-position:center;???? 或者：background-position: 50px 100px;
- 所有放在同一个；background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;
2，text
?? ??? ?h1
?? ??? ?{
?? ??? ??? ?text-align:center;
?? ??? ??? ?text-transform:capitalize;
?? ??? ??? ?color:#800000;
?? ??? ?}
- color:blue; color:#00ff00; color:rgb(255,0,0)
- text-align:center
- text-decoration:none 可用来去掉连接的下划线 , 其值可取：overline; line-through; underline; blink;
- text-transform:uppercase :文本全部大写, 小写为:lowercase； 每个单词首字母大写为capitalize;
- text-indent:50px;? 段落中指定首行缩进距离，为负时表示从右边开始缩进
- letter-spacing:10px; 指定字母,汉字的间距
- word-spacing:30px;; 指定单词，汉字的间距
- line-height: 100%; 单倍行距
- direction:rtl; 文本开始方向，默认从左开始。取值可为ltl, rtl
- white-space:nowrap；设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。
3，font
- font-family:”Times New Roman”,Georgia,Serif? 当第一个浏览器不支持时，会依次尝试后面的字体。
- font-style:italic；指定字体为斜体，normal为正常
- font-size:40px;指定字体大小，默认为16px;
- font-weight:bold; 设置字体精细，也可用font-weight:500; 在为数字时范围从100-900, 其中400相当于normal, 700相当于bold
4, margin, border, padding, content：指示一个控件的显示位置，控件就是content
- margin: 控件周边的空白，在最外部
- border: 控件的边框
- padding: 填充， 边框与控件之间的距离
- content: 控件
- 一个元素的宽度由控件内容content + 左右padding + 左右border + 左右margin 组成。 当设置控件的大小时，实际设置的是content的大小。
- width:220px;? content宽度
padding:10px;
border:5px solid gray;
margin:10px;??????????????????? 实际宽度为：220 + 10 *2 + 5 *2 + 10*2 = 270px - 注：在IE中content宽度包含了border, padding即元素的实际宽度= content + 左右margin 若想得到上面的效果，要在头部加入：
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html>……</html>
?
? 5，border
- border-style:solid, 其值可为：solid 实线；none；dotted 点线；? dashed 虚线； double 双线； groove ridge inset outset hidden
- 或每个边定义：border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid; - border-width:5px; 值为像素，或者： thin, medium, or thick.? border-left-width:15px;
- border-color:red; border-right-color:#ff0000;
6, margin : 没有背景色，完全透明，填充空白
- margin-top:100px; margin-top:2cm
margin-right:50px;????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-bottom:100px; margin-bottom:25%??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? margin-left:50px;
- margin:25px 50px 75px 100px;? 上，右，下，左
- margin:25px; 上，右，下，左 都是 25px
7, padding : 边框与控件的距离
- padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px; - padding:25px 50px 75px 100px; 上，右，下，左
8，list : 项目符号列表
- ul.circle {list-style-type:circle}
ul.square {list-style-type:square} - ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside} - ul
{
list-style-image:url(‘arrow.gif’);? //以图片代表序号
}
9, table
- table {border-collapse:collapse} 设置border为融合，默认为分开，双线
- table {border-spacing:10px 50px;}
- caption {caption-side:bottom} 设置table的caption属性显示的位置
- table {empty-cells:hide} 设置当表格为空时是否显示，IE不支持。
- table { table-layout:fixed; } 表格布局， auto, 或 fixed auto:随着内容大小的改变而改变