• 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

  • 相关阅读:
    idea Ctrl+Alt+向下箭头 复制不起作用问题解决
    @Data 注解使用
    idea class类增加注释
    mysql 固定用户赋值数据库权限
    springboot logback 详细配置
    gitblit 增加ssh key
    uniapp内嵌H5页面和uniapp页面相互传值
    博客搬家
    反编译,java字节流 ,wirshark抓包,php转换中文
    charles 双向抓包
  • 原文地址:https://www.cnblogs.com/shuyu/p/1499095.html
Copyright © 2020-2023  润新知