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>

  • 相关阅读:
    31个是你终生受用的爱情原则
    毕业后的五年拉开大家差距的原因在哪里?
    如何学习编程
    让人印象深刻的回答
    Android签名机制之---签名验证过程具体解释
    移动APP怎样保存用户password
    算法导论学习之线性时间求第k小元素+堆思想求前k大元素
    C#软件开发实例.私人订制自己的屏幕截图工具(十)在截图中包括鼠标指针形状
    Windows server 2003 + IIS6 搭建Asp.net MVC执行环境
    java移位运算符实验程序:&lt;&lt;(左移)、&gt;&gt;(带符 号右移)和&gt;&gt;&gt;(无符号右移)
  • 原文地址:https://www.cnblogs.com/javscr/p/9626735.html
Copyright © 2011-2022 走看看