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>

  • 相关阅读:
    关于Jquery内存的释放
    jQuery 事件 mouseleave() 方法 mouseenter() 方法
    模版方法模式
    js中return的用法
    HTTP返回码中301与302的区别
    DS介绍
    Java MySql乱码解决
    [IOS] UIViewController的parentViewController属性
    LinuxFind命令
    Linux第一课
  • 原文地址:https://www.cnblogs.com/javscr/p/9626735.html
Copyright © 2011-2022 走看看