美文网首页
css属性设置

css属性设置

作者: 迷失的信徒 | 来源:发表于2022-06-13 18:06 被阅读0次

    一、css文字属性

    color:#999999; / 文字颜色 /
    font-family:宋体,sans-serif;/ 文字宋体 /
    font-size:9pt;/ 文字大小 /
    font-style:itelic;/ 文字斜体 /
    font-variant:small-caos;/ 小字体 /
    letter-spacing:1pt;/ 字间距离 /
    line-height: 200%;/ 设置行高 /
    font-weight: bold;/ 文字粗体 /
    vertical-align: sub;/ 下标字 /
    vertical-align: super;/ 上标字 /
    text-decoration: line-through;/ 加删除线 /
    text-decoration: overline;/ 加顶线 /
    text-decoration: underline;/ 加下划线 /
    text-decoration: none;/ 删除链接下划线 /
    text-transform: capitalize;/ 首字母大写 /
    text-transform: uppercase;/ 英文大写 /
    text-transform: lowercase;/ 英文小写 /
    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;/ 文字垂直向下对齐 /

    二、css边框空白

    padding-top: 10rpx;/ 上边框留白 /
    padding-right: 10rpx;/ 右边框留白 /
    padding-bottom: 10rpx;/ 下边框留白 /
    padding-left: 10rpx;/ 左边框留白 /

    三、css符号属性

    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;/ 缩进 /

    四、css背景样式

    background-color: #f5e2ec;/ 背景颜色 /
    background: transparent;/ 透视背景 /
    background-image: url();/ 背景图片 /
    background-attachment: fixed;/ 浮水印固定背景 /
    background-repeat: no-repeat;/ 不重复排列 /
    background-repeat: repeat-x;/ 在x轴上重复排列 /
    background-repeat: repeat-y;/ 在y轴上重复排列 /

    指定背景位置

    background-position: 90% 90%;/ 背景图片在x与y轴的位置 /
    background-position: top;/ 向上对齐 /
    background-position: bottom;/ 向下对齐 /
    background-position: left;/ 向左对齐 /
    background-position: right;/ 向右对齐 /
    background-position: center;/ 居中对齐 /

    五、css链接属性

    a/ 所有超链接 /
    a:link/ 超链接文字格式 /
    a:visited/ 浏览过的链接文字格式 /
    v:active/ 按下链接的格式 /
    a:hover/ 鼠标转到链接 /

    鼠标光标样式

    链接手指 CURSOR:hand
    十字体 cursor:crosshair
    箭头朝下 cursor:s-resize
    十字箭头 cursor:move
    箭头朝左 cursor:w-resize
    加一问号 cursor:help
    箭头朝上 cursor:n-resize
    箭头朝右上 cursor:ne-resize
    箭头朝左上 cursor:nw-resize
    文字I型 cursor:text
    箭头斜右下 cursor:se-resize
    箭头斜左下 cursor:sw-resize
    漏斗 cursor:wait
    光标图案(E6) p {cursor:url("光标文件名.cur"),text}

    六、css框线一览表

    border-top: 1px solid #69c; / 上框线 /
    border-bottom: 1px solid #69c;/ 下框线 /
    border-left: 1px solid #69c;/ 左框线 /
    border-right: 1px solid #69c; / 右框线 /
    以上是建议书写方式,但也可以使用常规的方式,如下:
    border-top-color: #369;/ 设置上框线top颜色 /
    border-top-width: 1rpx;/ 设置上框线top宽度 /
    border-top-style: solid;/ 设置上框线top样式 /

    其他框线样式

    solid/ 实线框 /
    dotted/ 虚线框 /
    double/ 双线框 /
    groove/ 立体内凸框 /
    ridge/ 立体浮雕框 /
    inset/ 凹框 /
    outset/ 凸框 /

    七、css表单运用

    文字方块
    按钮
    复选框
    选择钮
    多行文字方块
    下拉式菜单 选项1选项2

    八、css边界样式

    margin-top: 10rpx;/ 上边界 /
    margin-right: 10rpx;/ 右边界 /
    margin-bottom: 10rpx;/ 下边界 /
    margin-left: 10rpx;/ 左边界 /

    相关文章

      网友评论

          本文标题:css属性设置

          本文链接:https://www.haomeiwen.com/subject/wsqmmrtx.html