CSS中的两个关键属性

CSS中的两个关键属性

(1)display属性
有三个值:
block  按块标记的方式显示该标记
inline  按行内标记的方式显示该标记
none 不显示

(2)position属性
有三个值:
static:缺省值。浏览器会将标记按默认的方式摆放(左-右,上-下)。
absolute:相对父标记(所在的标记)偏移。
relative:先按照默认的方式摆放,然后再偏移。

常用属性如下:

  1.      (1)文本相关的属性
  2. font-size:30px; //字体大小
  3. font-style:normal(正常)/italic(斜体)
  4. font-weight:800; //100-900 (粗细)
  5. font-family:”宋体”; //字体
  6. text-align:left/center/right;  //文本水平对齐方式
  7. line-height:30px;  //行高  一般和容器的高值相同放在中间
  8. cursor:pointer/wait;   //光标的形状
  9.     (2)背景相关的属性
  10. background-color:red;  //背景颜色
  11. background-color:#88eeff;  //RGB格式颜色设置
  12. background-color:rgb(100,100,100);  //可以用这种格式输入十进制数的颜色值
  13. background-image:url(images/t1.jpg);  //背景图片
  14. background-repeat:no-repeat/repeat-x/repeat-y;   //平铺方式
  15. background-position:30px 20px; //(水平和垂直)背景位置
  16. background-attachment:scroll(默认)/fixed;  //依附方式
  17. 也可以同时设置背景的多个特性:
  18. background:背景颜色 背景图片 平铺方式 依附方式  水平位置 垂直位置;
  19.     (3)边框
  20. border-left:1px solid red;
  21. border-right:2px dotted black;
  22. border-bottom:
  23. border-top:
  24. border:1px solid red;
  25.     (4)定位
  26. width:100px;
  27. height:200px;
  28. margin  //外边距
  29. margin-left:20px;
  30. margin-right:30px;
  31. margin-top:40px;
  32. margin-buttom:50px;
  33. 可以简化为:margin:top right bottom left;
  34.       margin:40 30 50 20;
  35. padding  //内边距
  36. padding-left:
  37. padding-right:
  38. padding-top:
  39. padding-buttom:
  40. 可以简化为:padding:top right bottom left;
  41. 内边距会将父标记撑开
  42.      (5)浮动
  43. 取消标记独占一行的特性
  44. float:left/right;  //向左,向右浮动
  45. clear:both;  //清除浮动的影响
  46.      (6)其他
  47. list-style-type:none;除掉列表选项的小圆点。
  48. text-decoreation:underline;    //给文本加下划线
  49.      (7)连接的伪样式
  50. a:link{color:red} 没有访问时
  51. a:visited{color:blue} 鼠标放上时
  52. a:action{color:green} 鼠标点击时
  53. a:hover{color:yellow} 鼠标离开时

 

 

HTML5标签

HTML5在以前浏览器发展的基础上对标签进行了简化。

(1)不允许写结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、Track、wbr

(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

(3)可以完全省略的标签:html、head、body、colgroup、tbody

(4)html5新增部分标签:

  1. <article>  标记定义一篇文章
  2. <aside>  标记定义页面内容部分的侧边栏
  3. <audio>  标记定义音频内容
  4. <canvas>   标记定义图片
  5. <command>  标记定义一个命令按钮
  6. <datalist>  标记定义一个下拉列表
  7. <details>   标记定义一个元素的详细内容
  8. <dialog>   标记定义一个对话框(会话框)
  9. <embed>   标记定义外部的可交互的内容或插件
  10. <figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
  11. <header>   标记定义一个页面或一个区域的头部
  12. <hgroup>   标记定义文件中一个区块的相关信息
  13. <keygen>   标记定义表单里一个生成的键值
  14. <mark>   标记定义有标记的文本
  15. <meter>   标记定义 measurementwithin apredefinedrange
  16. <nav>   标记定义导航链接
  17. <output>   标记定义一些输出类型
  18. <progress>   标记定义任务的过程
  19. <rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
  20. <rt>   标记定义对rubyannotations的解释
  21. <ruby>   标记定义 rubyannotations.
  22. <section>   标记定义一个区域
  23. <source>   标记定义媒体资源
  24. <time>   标记定义一个日期/时间
  25. <video>   标记定义一个视频

一、画布(Canvas)   画布是网页中的一块区域,可所以用JavaScript在上面绘图。

二、地理位置  HTML5的地理位置特性可以返回网页访问者的地理位置。

 

Copyright © 2011-2012  www.zhide360.com.   智德360科技   泰安新闻网  版权所有