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

    [目录]

    一、CSS背景

    1. 背景颜色:设置元素的背景颜色
      background-color:颜色/transparent
      • transparent是全透明黑色的速记法
      • 颜色值/颜色名/RGB/六进制
      • 背景区包括:内容、内边距和边框、不包含外边距
    2. 背景图片:设置元素的背景图片
      backgroun-image:URL|none
      • url地址可以是相对于地址也可以是绝对地址
      • 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
      • 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复
    3. 背景图片重复:设置元素的背景图片的重复方式
      background-repeat:repeat重复/no-repeat不重复/repeat-x水平重复/repeat-y垂直重复
    4. 背景图片显示方式:设置元素的背景图片的显示方式
      background-attachment:scroll/fixed
      • scroll:默认值,背景图片随滚动条滚动
      • fixed:当页面的其余部分滚动时,背景图片不会移动
    5. 背景图片定位:设置元素的背景图片的起始位置
      background-position:百分比/值/top/right/bottom/left/center
    6. 背景缩写
      background:background-color、background-image、background-repeat、background-attachment、background-position
      • 各值之间用空格分割,不分先后顺序

    二、CSS列表样式

    1. 列表项标记:设置列表项的标记样式
      类型:list-style-type:关键字/none
    2. 列表项位置:设置列表项标记的位置
      list-style-type:关键字/none
      • inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
      • outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐
    3. 列表样式缩写
      list-style:list-style-type、list-style-position、list-style-image
      • 值之间用空格分隔开
      • 顺序不固定
      • list-style-image会覆盖list-style-type的设置
  • 相关阅读:
    Chrome扩展开发之一——Chrome扩展的文件结构
    Chrome扩展开发(Gmail附件管理助手)系列之〇——概述
    Springfox与swagger的整合使用
    Maven的简单使用
    关于接口功能自动化的思考
    发版流程优化备忘录
    Aho-Corasick 自动机 学习笔记
    Luogu P1495 曹冲养猪
    Luogu P2670 【扫雷游戏】
    1.1 整除
  • 原文地址:https://www.cnblogs.com/yujiao-99/p/12907154.html
Copyright © 2011-2022 走看看