zoukankan      html  css  js  c++  java
  • css一般样式

    1.宽高

    100px;     宽
    height:100px;   高

    2.背景

    background-color: #fff;                                             背景色

    background-image: url(./img.jpg);                            背景图(默认平铺)

    background-repeat: repeat-x/no-repeat;                  背景图平铺

    backgroung: #fff url(img.jpg) no-repeat;                   颜色 背景图 平铺

    background-size: auto/cover;                                   背景图尺寸

    background-attachment: scroll/fixed;                        随滚动条动 固定(背景窗口内)

    background-position: bottom right/10px 10px;          背景图定位   上下   左右

    <head>
    <style>
        div{
            width:350px;
            height:260px;
            background:#888 url(./image/VNlogo.jpg) no-repeat;
            background-attachment:fixed;
            background-position: 50px 50px;
        }
    </style>
    </head>
    
    <body>
        <div></div>
    </body>

    3.文本

    color:red;                                                                    文本颜色

    text-align:left/center/right;                                           水平对齐

    font-size:12px;                                                             字体大小 通用

    line-height:50px;                                                          行高  50px      垂直居中

     

    font-family:'微软雅黑'                                                   字体 通用

    font:14px/20px '微软雅黑'                                             字体大小  行高  字体

     

    text-decoration:underline/overline/linethrough/none;  划线

    font-weight:normal/bold;                                              加粗

    font-style:normal/italic;                                                倾斜

    text-indent:40px;                                                         缩进(标签内部继承)

    text-transform:uppercase/lowercase/capitalize;          大写 小写 首字母大写

    text-shadow:10px 10px 10px red;                                水平 垂直 模糊 颜色 文字阴影

    letter-spacing:-1px;                                                   字符间距

    <head>
    <meta charset="utf-8">
    <style> div{ color:red; text-align:center; font:20px/50px '微软雅黑';} </style> </head> <body> <div>哈哈哈哈哈哈哈哈哈哈<br>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</div> </body>

    4.列表

    list-style-type:circle/square/none;             无序列表 标记

    list-style-type:upper-roman/lower-alpha;  有序列表 大写罗马 小写英文

    list-style-image:url('./a.jpg');                     列表标记图

    list-style:square url("sqpurple.gif");          形状 图片

    <head>
    <meta charset="utf-8">
    <style>
        div li{
            list-style-type:square;
        }
    </style>
    </head>
    
    <body>
        <div>
            <ul>
                <li>哈哈</li>
                <li>嘿嘿</li>
                <li>呼呼</li>
                <li>呵呵</li>
            </ul>
        </div>
    </body>

  • 相关阅读:
    vue使用laydate.js插件报错laydate.css: Invalid
    自定义css样式结合js控制audio做音乐播放器
    福利福利~262集前端免费视频!
    解决Vue在IE中报错出现不支持=>等ES6语法和“Promise”未定义等问题
    设置Chart.js默认显示Point点的值不用鼠标经过才显示
    js监听某个元素高度变化来改变父级iframe的高度
    Vue中注意target和currentTarget的使用
    VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化
    bootstrap-table前端实现多条件时间段查询数据
    js小数点相乘或相除出现多位数的问题
  • 原文地址:https://www.cnblogs.com/javscr/p/9626735.html
Copyright © 2011-2022 走看看