CSS

From Showing Cloud Knowledge Base
Jump to navigation Jump to search

CSS样式表简单整理

  1. 链接方式如下三种(还有其他的内部链接就没表示):
    • 如:<style type="text/css"> p {color: red;}</style>
    • 如外部链接1:<link href='index.css' type="text/css" rel="stylesheet" />
    • 如外部链接2:<style type="text/css"> @import url(index.css) </style>
  2. 显示颜色的五种定义方法(这里以前景色为例):
    • color: 设定为给定的值 如:color: gray;
    • color: #rrggbb 用html的16位进制表示 如:color: #00cc00;
    • color: rgb(rrr,ggg, bbb) 三种颜色的值(0~255) 如:color: rgb(0, 255, 0);
    • color: rgb(rrr%, ggg%, bbb%) 三种颜色的百分比指定 如:color: rgb(0%, 100%, 0%);
    • color: inherit 继承父值
  3. 标签内容和边框以及与标签距离之间的关系如下图:
    • Buju.jpg
  4. 边框:
    • 宽度border-width: 可以设置具体的值(border-width: 2em;)和关键字,如thin, medium, thick (border-width: thick;)
    • 样式border-style: 可以设置具:none,hidden, dotted, dashed, solid, groove, ridge, inset, outset 如(border-width: solid;)
    • 颜色border-color: 如 (border-color: red;)
  5. 边界距margin:
    • 设置值margin:10px;
    • 可以分别同时设置四个值值margin:<top> <right> <bottom> <left>
    • 也可以分开设置四个值值margin-top margin-right margin-bottom margin-left
  6. 填充padding:
    • 设置值padding:20px;
    • 可以分别同时设置四个值值padding:<top> <right> <bottom> <left>
    • 也可以分开设置四个值值padding-top padding-right padding-bottom padding-left
  7. 背景图片background-image:
    • 设置背景图片background-image: url(图片路径);
  8. 背景重复background-repeat:
    • 重复默认是重复的,background-repeat: repeat;
    • 不重复的,background-repeat: no-repeat;
    • 仅水平重复,background-repeat: repeat-x;
    • 仅垂直重复,background-repeat: repeat-y;
    • 继承,background-repeat: inherit;
  9. 背景附着background-attachment可以控制背景是否随网页滚动:
    • 背景随着滚动,background-attachment: scroll;
    • 背景固定,background-attachment: fixed;
    • 继承,background-repeat: inherit;
  10. 背景定位background-position:
    • 可以设置关键字定位(top, center, bottom, left, right)如:background-position:top left;
    • 可以设置具体值定位如:background-position:100px 100px;
    • 可以设置百分比定位 如:background-position:10% 10%;
  11. 字体font:
    • 字体属性font-family:可以设置一个或者多个用逗号隔开 如:font-family: Verdana, Arial, Helvetica, sans-serif;
    • 字体风格font-style: 有oblique, italic, normal 前两个都是斜体, 如:font-style:italic;
    • 字体粗细font-weight: 有bold, bolder, normal, lighter, 100~900之间的数值, 如:font-weight:bolder; font-weight:500;
    • 字体大小font-size: 有绝对的表现如:12pt,20px,medium和相对的表现如:smaller, normal, larger ,百分比50%; 例font-size:12pt; font-size:500%;
  12. 行间距line-height:
    • 例如line-height:40px; line-height:2em;
  13. 字体变量font-variant可以用来小写变大写,原先大写的变更大:
    • font-variant:normal; 和font-variant:small-caps;
  14. 文本缩进text-indent:
    • 可以设置具体的值和百分比,如:text-indent:40px; text-indent:10%;
  15. 文本对齐text-align:
    • 对齐样式:left, right, center, justify(两端对齐),如:text-align:center;
  16. 文本装饰text-decoration:
    • 装饰的常见四种样式:none, underline, overline, line-through(删除线);如:text-decoration:line-through;
  17. 文本变形text-transform:
    • 变形的几种样式:none, capitalize(设字母大写), uppercase(全部大写), lowercase(全部小写),如:text-transform:capitalize;
  18. 链接属性
    • 未访问过的链接属性,:link 如: a:link{...};
    • 访问过的链接属性,:visited 如: a:visited {...};
    • 鼠标点击与释放之间时的属性,:active 如: a:active {...};
    • 鼠标悬停时属性,:hover 如: a:hover{...};