zoukankan      html  css  js  c++  java
  • CSS基础知识-常用属性(updating)

    <meta charset="utf-8">

    <link type="text/css" rel="stylesheet" href="样式文件所在链接"> 

    • <p class="x"> </p>
    • 类选择器:p.x{};;;;;;h1.x, p.x{};;;;;;.x{}
    • 。。。。。。。。。。。。。。。。。。。。。。
    • <p id="x"> </p>
    • #x{}
    • p#x{}

    颜色:

    • color:
    • background-color;

    背景图像

    • background-image:url(图像链接);
    • background-repeat:no-repeat(图像只会显示一个);
      • repeat;
      • repeat-x(只在水平方向上重复)
      • repeat-y(只在垂直方向上重复)
      • inherit(按照父元素的设置来处理)
    • background-position:top left;(左上角)

    字体:

      • font-family:Verdana(PC 上),Geneva(MAC),Arial(MAC和PC),sans-serif(无衬线字体集);
      • font-size:以body的字体大小为准
        • body{font-size:small;large}相当于基本字体大小
        • h1{font-size:150%}
      • color:
      • font-weight:lighter;normal;bold;bolder;
      • text-decoration:
      • non
      • underline上划线
      • overline下划线
      • line-through有一条穿过的线
      • 指定样式的同时指定内容的含义:<del>{删除};<ins>{下划线,标记要插入的内容,填空?}
    • font-style:italic(斜体);(not)oblique(倾斜文本)

    段落

    • line-heighe:1.6em;//各行之间的间距:[em:相对于字体大小]

    盒模型

    #margin和padding的区别:margin主要用来控制两个父元素的间距,padding主要用来控制父元素和子元素之间的间距。

    • 内容区
    • padding:
      • padding-left:
      • padding-right:
    • border
      • border-width//边框宽度
      • border-style
        • solid 实线
        • double 两条线
        • outset外凸
        • inset 内凹
        • dotted 虚线
        • dashed 破折线
        • ridge 脊线
      • border-color
      • 合起来写:3px dotted gray;
      • 指定某一边的边框:border-top-color:……
      • top;left;right;bottom
      • 边框圆角:radius(px或者em)
    • margin
      • margin-left:
      • margin-right:

    标题
    overflow
    属性含义
    visible 默认属性,内容不会被隐藏
    hidden 内容会被隐藏
    scroll 多余的内容不会被隐藏,会以进度条的形式显示
    auto  如果内容被隐藏,会以进度条的形式
    inherit  继承父级元素的viewpoint属性
  • 相关阅读:
    LOJ 6089 小Y的背包计数问题 —— 前缀和优化DP
    洛谷 P1969 积木大赛 —— 水题
    洛谷 P1965 转圈游戏 —— 快速幂
    洛谷 P1970 花匠 —— DP
    洛谷 P1966 火柴排队 —— 思路
    51Nod 1450 闯关游戏 —— 期望DP
    洛谷 P2312 & bzoj 3751 解方程 —— 取模
    洛谷 P1351 联合权值 —— 树形DP
    NOIP2007 树网的核
    平面最近点对(加强版)
  • 原文地址:https://www.cnblogs.com/Thelma/p/5761422.html
Copyright © 2011-2022 走看看