zoukankan      html  css  js  c++  java
  • 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的属性值

  • 相关阅读:
    数据的独立同分布检验
    基于密度聚类的DBSCAN和kmeans算法比较
    Python 爬虫笔记、多线程、xml解析、基础笔记(不定时更新)
    多进程之multiprocessing模块、守护进程、互斥锁
    程序与进程的区别,并发与并行的区别,多进程的实现原理
    并发编程之守护进程
    MySQL帮助文档的使用
    MySQL操作之DCL
    MySQL操作之DML
    MySQL操作之DDL
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12245785.html
Copyright © 2011-2022 走看看