zoukankan      html  css  js  c++  java
  • css学习笔记

    一、Font 字体
    1、font-family
    示例:{font-family:字体:字体1}
    2、font-size 字号大小
    示例: p { font-style: normal; }
     p { font-size: 12px; }
     p { font-size: 20%; }
    3、font-style  字体样式
    参数: normal : 正常的字体
     italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
     oblique : 倾斜的字体
    示例:  p { font-style: normal; }
     p { font-style: italic; }
     p { font-style: oblique; }
    4、font-weight 文本字体的粗细
    参数: normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
     bold : 粗体。相当于number为700。也相当于b对象的作用
     bolder : IE5+ 特粗体
     lighter : IE5+ 细体
    示例: span { font-weight:800; }
    5、text-decoration 文本的装饰
    参数:  none :  无装饰
     blink :  闪烁
     underline :  下划线
     line-through :  贯穿线
     overline :  上划线
    示例: div { text-decoration : underline; }
     div { text-decoration : underline overline; }
    6、font-variant 英文的大小写转换
    参数:  normal : 正常的字体
     small-caps : 小型的大写字母字体

    示例: span { font-variant: small-caps; }

    7、text-transform 英文大小写
    参数: none :  无转换发生
     capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
     uppercase :  转换成大写
     lowercase :  转换成小写
    示例: div { text-transform : uppercase; }

    8、line-height 文字行高
    参数: normal :  默认行高
     length :  百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值
    示例: div {line-height:6px; }
    div {line-height:10.5; }

    9、letter-spacing 文字之间的间隔
    参数:  normal :  默认间隔
     length :  由浮点数字和单位标识符组成的长度值,允许为负值。
    示例: div {letter-spacing:6px; }
     div {letter-spacing:0.5pt; }
     
    10、word-spacing  英文单词间距
    参数: normal :  默认间距
     length :  由浮点数字和单位标识符组成的长度值,允许为负值
    示例:div { word-spacing : 10; }  div { word-spacing : 10px; }

    二、文本  text
    1、text-indent  文字缩进
    参数:length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。
    示例:div { text-indent : -5px; }
    div { text-indent : underline 10%;

    2、text-align  对齐
    参数: left :  左对齐
     right :  右对齐
     center :  居中
     justify :  两端对齐
    示例: div { text-align : center; }

    三、背景  background
    1、background-color   背景色
    参数: transparent :  背景色透明
     color :  指定颜色
    示例: p { background-color: silver }
    div { background-color: rgb(223,71,177) }
    body { background-color: #98AB6F }
    pre { background-color: transparent; }

    2、background-image  背景图
    参数: none :  无背景图
     url :  使用绝对或相对地址指定背景图像
    示例: code { background-image: url("comet.jpg"); }
     blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); }
     br { background-image: url(http://Fred.com/ImageFile/Q.gif); }
     body { background-image: none; }

    3、background-position  背景图像位置
    参数: length :  百分数 | 由浮点数字和单位标识符组成的长度值。
     position :  top | center | bottom | left | center | right
    示例: div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
     menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
     a { background: url("images/aardvark.gif"); background-position: 3.25in; }
     body { background: url("images/aardvark.gif"); background-position: top right; }

    4、background-repeat  背景图像平铺
    参数: repeat :  背景图像在纵向和横向上平铺
     no-repeat :  背景图像不平铺
     repeat-x :  背景图像在横向上平铺
     repeat-y :  背景图像在纵向平铺
    示例: menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }
     p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

    四、定位  Positioning
    1、position 
    参数: static :  无特殊定位,对象遵循HTML定位规则
     absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位
     relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
     fixed :  IE5.5及NS6尚不支持此属性
       层的高度
     height:  层的宽度
    示例: div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }
     div { position:relative; top:-3px; left:6px; }

    2、z-index 
    参数: auto :  遵从其父对象的定位
     number :  无单位的整数值。可为负数
    示例: div { position:absolute; z-index:3; 6px; }

    五、布局  Layout
    1、overflow
    参数: visible : 不论层的大小,内容都显示出来
    auto :  只在内容超出层的范围的时候才显示滚动条
    hidden :  不显示超过对象尺寸的内容
    scroll :  总是显示滚动条
    示例: body { overflow: hidden; }
     div { overflow: scroll; height: 100px; 100px; }
    2、visibility 
    参数: inherit :  继承上一个父对象的可见性
     visible :  对象可视
     hidden :  对象隐藏
     collapse :  主要用来隐藏表格的行或列。
    示例: img { visibility: inherit; float: right; }

    六、边框  border
    1、border-width  边框宽度
    参数: medium :  默认宽度
     thin :  小于默认宽度
     thick :  大于默认宽度
     length :  由浮点数字和单位标识符组成的长度值。
    示例: span { border-style: solid; border- thin; }
     span { border-style: solid; border- 1px thin; }

    2、
    border-top-width 上宽 (当把width换成color就是边框颜色)
    border-bottom-width 下宽(当把whdth换成style就是边框样式)
    border-left-width 左宽
    border-right-width 右宽

    3、border-style  边框样式
    参数: none :  无边框
     hidden :  隐藏边框。IE不支持
     dotted :  点线
     dashed :  虚线
     solid :  实线边框
     double :  双线边框
     ----一一下只对表格有效-----
     groove :  根据border-color的值画3D凹槽
     ridge :  根据border-color的值画菱形边框
     inset :  根据border-color的值画3D凹边
     outset :  根据border-color的值画3D凸边
    示例: body { border-style: double groove; }
     body { border-style: double groove dashed;

    七、外补丁 margin
    1、 检索或设置对象四边的外延边距。
     如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
     margin-top  上
     margin-right 右
     margin-bottom 下
     margin-left 左
    示例: body { margin: 36pt 24pt 36pt; }
     body { margin: 11.5%; }
     body { margin: 10% 10% 10% 10%; } 
     body { margin-top: 11.5%; }
    八、内补丁 padding
    检索或设置对象四边的补丁边距。
    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
    和外补丁相似

    九、超链接
    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
    a:active {color: #0000FF}   /* 被选择的链接 */

    十:鼠标光标
    1、cursor:光标形状
    参数: crosshair  交叉十字 help 代问号的鼠标
     default  默认鼠标形状 text 文本形状
     hand  手型 
     move  移动的形状
     wait  沙漏形状
     w-resize 向西的箭头 s-resize 向南的箭头
     n-resize 向北的箭头 e-resize 向东的箭头
     ne-resize 向东北  sw--resize 向西南
     se-resize 向东南 nw-resize 向西北
     
    Xscan,LC4/5,流光……

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/shuyu586813/archive/2008/07/25/2707607.aspx

  • 相关阅读:
    bzoj2733 永无乡 平衡树按秩合并
    bzoj2752 高速公路 线段树
    bzoj1052 覆盖问题 二分答案 dfs
    bzoj1584 打扫卫生 dp
    bzoj1854 游戏 二分图
    bzoj3316 JC loves Mkk 二分答案 单调队列
    bzoj3643 Phi的反函数 数学 搜索
    有一种恐怖,叫大爆搜
    BZOJ3566 概率充电器 概率dp
    一些奇奇怪怪的过题思路
  • 原文地址:https://www.cnblogs.com/shuyu/p/1499095.html
Copyright © 2011-2022 走看看