属性指定


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:随着内容大小的改变而改变