• css背景颜色、背景图片,以及列表的多种样式


    背景样式

    • background-color 设置元素的背景颜色。
    • background-image 把图像设置为背景。
    • background-position 设置背景图像的起始位置。
    • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
    • background-repeat 设置背景图像是否重复及如何重复。
    • background 简写属性,作用是将背景属性设置在一个声明中。

    列表样式

    • list-style-type 设置列表项标志的类型。
    • list-style-image 将图像设置为列表项标志。
    • list-style-position 设置列表中列表项标志的位置。
    • list-style 简写属性,用于把所有列表的属性设置于一个声明中。

    背景区包括内容、内边距(padding)和边框、不包含外边距(margin)

    border必须加上样式才会显示,否则默认为none不显示

    边框颜色默认=元素内的文本颜色

    好看的英文字体:

    1. font-size: 14px;
    2. font-family: Consolas;

    好看的中文字体:

      微软雅黑 14px

    RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+


    background-image

    默认从左上角开始,在水平和垂直方向上重复

    背景颜色和背景图片同时设置时,背景颜色会被背景图片覆盖


    background-attachment:scroll | fixed

    background-position: top | left | right | center | 长度值 | 百分比

    第一个参数代表水平,第二个参数代表垂直,只有一个数值时,另一个默认为居中

     background 简写

    不区分属性的先后顺序

    当background-attachment设置为fixed,则图片位置相对于整个网页来说

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                width:300px;
                height:1500px;
                border:1px solid;
                /*背景图片不显示,原因:
                设置为fixed,则图片位置相对于整个网页来说
                此时top表示图片位于整个网页的水平居中位置*/
                background:#abcdef url(cat-little.jpg) no-repeat top fixed;
            };
        </style>
    </head>
    <body>
        <div></div>>
        
    </body>
    </html>

     列表项标记 list-style-type

    无序列表

     有序列表

     list-style-image

    写在li样式上

    list-style-position:inside | outside (针对于多行文本)

    inside :列表项目标记放置在文本以内,且环绕文本根据标记对齐
    outside :默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐

    list-style 样式缩写

    顺序不固定,但list-style-image的属性值会覆盖list-style-style的属性值

  • 相关阅读:
    【Java】REST风格
    KMP(烤馍片)算法
    Lca求法 (树链剖分 与 倍增)
    hash学习笔记
    星际网络(数学)
    P3537 [POI2012]SZA-Cloakroom (背包)
    乘车路线 (二维最短路)
    渔民的烦恼 (二分)
    Jmeter 常用函数(18)- 详解 __isDefined
    Jmeter 常用函数(17)- 详解 __substring
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12245785.html
Copyright © 2020-2023  润新知