zoukankan      html  css  js  c++  java
  • CSS背景和CSS列表

    ------------------------------

               div{
                background: red;
                300px;
                height: 300px;
                border: 20px dashed; ///这里不设置颜色,默认颜色为背景色。即:background-color:transparent;(全透明黑色的速记法)。
               }

            <div>背景包括边框和内边距,不包括外边距</div>

    --------------

    当设置边框,和内边距时,父容器的div本身宽高在变大,而内容本身的宽高不变,切记!!!。

    =====================================

    background- image的默认值是none。

    如果同时设置背景图片和背景颜色,那么背景图片会覆盖掉背景颜色。

    background-color:red;

    background-image:url();  //会覆盖前者。如果背景色写为:background:red;那么就是遵循(最近原则)

    ===============================

    background-repeat可能的属性值有repeatno-repeatrepeat-xrepeat-yinherit(继承)

    fixed是相对于浏览器窗口进行设定的。

    background:url(img/logo.png) no-repeat fixed center;   //左右上下垂直居中,在浏览器的正中央。不论浏览器怎么缩放。

    background:url(img/logo.png) no-repeat fixed right;    //在浏览器右边,且垂直居中。不论浏览器怎么缩放。

    background:url(img/logo.png) no-repeat fixed left;    //在浏览器左边,且垂直居中。不论浏览器怎么缩放。

    background:url(img/logo.png) no-repeat fixed bottom;    //在浏览器底部,且左右居中。不论浏览器怎么缩放。

    background:url(img/logo.png) no-repeat fixed top;    //在浏览器顶部,且左右居中。不论浏览器怎么缩放。

    Internet Explorer6-11版本都不支持属性值 "inherit"。

    ---------------

    background-position属性值可以是百分比、关键字、单位是像素 (0px 0px) 或任何其他的 CSS 单位。

    background-position:40em 30em;

    所有浏览器都支持 background-position 属性。

    IE8 以及更早的浏览器不支持一个元素多个背景图像

    IE7 以及更早的浏览器不支持 "inherit"IE8 需要 !DOCTYPEIE9 支持 "inherit"

    所有浏览器都支持 background 属性。

    ---------------------------

    HTML背景透明

    background:#fff;
    opacity:0.5;/*这样设置背景颜色为透明,那么里面的字体也会变成半透明*/

    background:transparent  背景为透明,字体不透明。
    background:rgb(255,255,255,0.2);/*这样只设置背景颜色,里面内容不是透明*/

    filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
    position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
    zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */

    -----------

    ------------ol------------ul---------------

    list-style-type:hiragana; ///平假名排列,属于有序列表

    --------------------

    可能的值有insideoutsideinherit

    默认是outside,如下图:

    设置inside,如下图:

    设置inside时,图标会出来一些,注意细节。

    所有浏览器都支持 list-style-position 属性

    -----------------------

    list-style:url(img/images/图标.png) lower-roman inside;   ///小写罗马数字,文字围绕小图标,

    list-style: outside decimal  url(img/images/图标.png);     ///值的顺序随意,如果设置了list-style-image,那么就会覆盖 list-style-type列表样式,只显示图标。

    顺序随意,那就规定一个习惯:

    list-style:list-style-image列表样式图标    list-style-type列表样式类型   list-style-position列表样式的位置

    list-style复合属性后面的值是有顺序无要求

    -====================

    background:image repeat attachment position;  //图片  重复  滚动  位置

    list-style: type image  position;  /// 类型 图片  位置

    list-style-type:

    无序列表:

    none:无标记

    disc:实心圆

    circle:空心圆

    aquare:实心方块

    有序列表

    none:无标记

    decimal:数字

    lower-roman:小写罗马数字

    upper-roman:大写罗马数字

    lower-alpha:小写英文字母

    upper-alpha:大写英文字母

  • 相关阅读:
    软件概要设计
    Jmter进行Rabbitmq测试
    分布式锁
    实用异常
    异常集合
    本地Windows环境安装RabbitMQ Server
    MySQL千万级多表关联SQL语句调优
    mysql数据库多表关联查询的慢SQL优化
    rabbitmq详细配置
    Idea连接服务器docker并部署代码到docker实现一键启动
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10650783.html
Copyright © 2011-2022 走看看