zoukankan      html  css  js  c++  java
  • 【CSS】CSS 样式的常见属性:文本、字体、背景、表格、列表、光标、display、position、float 和 clear

    top

    文本相关属性

    字体相关属性

    背景相关属性

    表格相关属性

    列表相关属性

    光标样式

    display属性

    position 属性

    文本相关属性

    取值 描述
    text-decoration : none 删除链接下划线
    text-decoration : underline 加下划线
    text-decoration : overline 加顶线
    text-decoration : line-through 加删除线
    text-decoration : blink 文本闪烁
    text-decoration : inherit 从父元素继承 text-decoration 属性的值

     

    取值 描述
    text-indent : 30px 段落首行缩进

     

    取值 描述
    text-transform : capitalize 首字大写
    text-transform : uppercase 英文大写
    text-transform : lowercase 英文小写

     

    取值 描述
    text-align : right 文字右对齐

    text-align : right

    文字右对齐

    text-align : left

    文字左对齐

    text-align : center

    文字居中对齐
    text-align : justify 文字分散对齐

     

    取值 描述

    vertical-align : top

    垂直向上对齐

    vertical-align : bottom

    垂直向下对齐

    vertical-align : middle

    垂直居中对齐

    vertical-align : text-top

    文字垂直向上对齐
    vertical-align : text-bottom 文字垂直向下对齐

     

    字体相关属性

    取值 描述

    color : #999999

    文字颜色

    font-family : 宋体,sans-serif

    文字字体

    font-size : 9pt

    文字大小

    font-style : itelic

    文字斜体

    font-variant : small-caps

    小字体

    letter-spacing : 1pt

    字间距离

    line-height : 200%

     设置行高
     font-weight : bold 文字粗体

    vertical-align : sub

    下标字
    vertical-align : super 上标字

    背景相关属性

    取值 描述

    background-color : #F5E2EC

    背景颜色

    background : transparent

    透视背景
    取值 描述

    background-image : url(/image/bg.gif)

    背景图片

    background-attachment : fixed

    背景是否随页面内容一起滚动,scroll 滚动,fixed 固定
    取值 描述

    background-repeat : repeat

    x/y 双向平铺-网页默认

    background-repeat : no-repeat

    不平铺

    background-repeat : repeat-x

    横向平铺

    background-repeat : repeat-y

    纵向平铺
    取值 描述

    background-position : 90% 90%

    背景图片x与y轴的位置

    background-position : top

    向上对齐

    background-position : buttom

    向下对齐
     background-position : left 向左对齐
     background-position : right 向右对齐
     background-position : center 居中对齐

    表格相关属性

    取值 描述

    border-top : 1px solid #6699cc

    上框线

    border-bottom : 1px solid #6699cc

    下框线

    border-left : 1px solid #6699cc

    左框线
     border-right : 1px solid #6699cc 右框线
    以上是建议书写方式,但也可以使用常规的方式 如下:  
    border-top-color : #369 设置上框线top颜色
    border-top-width :1px  设置上框线top宽度
    border-top-style : solid 设置上框线top样式
    取值 描述

    solid

    实线框

    dotted

    点线框

    dashed

    虚线框

    double 

    双线框
    groove  立体内凸框
    ridge 立体浮雕框
    inset  凹框
    outset  凸框
    取值 描述

    margin-top : 10px

    上外边距

    margin-right : 10px

    右外边距

    margin-bottom : 10px

    下外边距
    margin-left : 10px 左外边距
    取值 描述

    padding-top : 10px

    上内边距

    padding-right : 10px

    右内边距

    padding-bottom : 10px

    下内边距
    padding-left : 10px 左内边距

     

    列表相关属性

    取值 描述

    list-style-type : none

    没有编号

    list-style-type : decimal

    阿拉伯数字

    list-style-type : lower-roman

    小写罗马数字
    list-style-type : upper-roman 大写罗马数字

    list-style-type : lower-alpha

    小写英文字母
    list-style-type : upper-alpha 大写英文字母

    list-style-type : disc

    实心圆形符号

    list-style-type : circle

    空心圆形符号

    list-style-type : square

    实心方形符号
    list-style-image : url(/dot.gif) 图片式符号

    list-style-position : outside

    列表符号位置,凸排
    list-style-position : inside 列表符号位置,缩进

     

    光标样式

    取值

    描述

    cursor : url

    需使用的自定义光标的 URL。

    注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

    cursor : auto 默认光标,文本时显示 ,超链接时显示
    cursor : crosshair 光标呈现为十字线
    cursor : pointer 光标呈现为指示链接的指针(一只手)
    cursor : move 此光标指示某对象可被移动
    cursor : e-resize 此光标指示矩形框的边缘可被向右(东)移动。
    cursor : ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)
    cursor : nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)
    cursor : n-resize 此光标指示矩形框的边缘可被向上(北)移动。
    cursor : se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    cursor : sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    cursor : s-resize 此光标指示矩形框的边缘可被向下移动(南)。
    cursor : w-resize 此光标指示矩形框的边缘可被向左移动(西)。
    cursor : text 此光标指示文本
    cursor : wait 此光标指示程序正忙(通常是一只表或沙漏)
    cursor : help 此光标指示可用的帮助(通常是一个问号或一个气球)

     

    display 属性

    取值 描述
    display : none 此元素不会被显示。
    display : block 此元素将显示为块级元素,此元素前后会带有换行符。
    display : inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

     

    position 属性

    取值

    描述

    position : absolute

    生成绝对定位的元素,相对于离它最近的一个已定位的盒子进行定位的(默认是body)

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    position : fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    position : relative

    生成相对定位的元素,相对于其正常位置进行定位。

    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    position : static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    position : inherit 规定应该从父元素继承 position 属性的值。
    z-index : 1 当使用相对定位或绝对定位时,元素经常会出现相互重叠,此时可以使用 z-index 属性设置元素之间的叠放顺序,数值越大,越往上层,离用户越近。

     

    float 和 clear 属性

    取值 属性
    float : left 元素向左浮动,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
    float : right 元素向右浮动。
    float : none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
    float : inherit 规定应该从父元素继承 float 属性的值。

     

    取值 属性
    clear : left 在左侧不允许浮动元素。
    clear : right 在右侧不允许浮动元素。
    clear : both 在左右两侧均不允许浮动元素。
    clear : none 默认值。允许浮动元素出现在两侧。
    clear : inherit 规定应该从父元素继承 clear 属性的值。

     

  • 相关阅读:
    $.ajax({}) 方法 参数
    JS原生ajax函数写法
    jQuery Ajax封装通用类
    200 300 400 500各代表的服务器状态码
    MySQL添加用户、删除用户与授权
    mysql事务回滚
    javascript 基础知识(部分对象和js dom操作)
    GC垃圾回收机制
    Java基础篇
    数据库中事务的ACID特性
  • 原文地址:https://www.cnblogs.com/bjxqmy/p/12906202.html
Copyright © 2011-2022 走看看