zoukankan      html  css  js  c++  java
  • CSS文字段落排版常用设置

    .firstp {
        /* 文字排版:颜色、字号、字体、粗体、斜体、下划线、删除线 */
        color: #666;  /*颜色*/
        font-size: 30px; /*字号*/
        font-family: "宋体"; /*字体*/
        font-weight: bold; /*粗体*/
        font-style: italic; /*斜体*/
        text-decoration: underline; /*下划线  删除线用:line-through*/
    
        /* 段落排版:缩进、行高、文字距离、单词间距、对齐 */
        text-indent: 2em; /* 缩进 */
        line-height: 1.5em; /* 行高 */
        letter-spacing: 5px; /* 中文字距离 || 字母间距 */
        word-spacing: 50px; /* 单词间距 */
        text-align: center; /* 对齐:居中:center、左对齐:left、右对齐:right */
    
        /* 背景设置:背景色、背景图片、背景平铺模式、背景定位 */
        background-color: #333; /* 背景色*/
        background-image: url(img/bg.png); /* 背景图片 */
        background-repeat: no-repeat; /* 背景平铺模式: 不重复 */
        background-position: 30% 20px; /* 背景定位 */
    }
    

    CSS中设置颜色的方法有多种

    1. 颜色的英文单词
    .cont {color: red}
    
    1. RGB配色:由R(red)、G(green)、B(blue)三种颜色的比例来配色
    .cont {color: rgb(51, 102, 102)}
    

    这三个值也可以用0%~100%之间的值来设置

    .cont {color: rgb(10%, 30%, 66%)}
    
    1. 十六进制颜色:00-ff
    .cont {color: #0033ff}
    

    CSS的颜色值当使用16进制的色彩值时,若每两位的值相同,可以缩写一半

    .cont {color: #333333}
    

    可以缩写成:

    .cont {color: #333}
    

    .cont {color: #aa3366}
    

    可以缩写成:

    .cont {color: #a36}
    

    字体样式可以进行缩写

    .cont {font: bold italic small-caps 18px/1.5em "宋体"}
    

    上面的缩写顺序为:

    .con {
        font-weight: bold;
        font-style: italic;
        font-variant: small-caps;
        font-size: 18px;
        line-height: 1.5em;
        font-family: "宋体";
    }
    

    该缩写顺序的先后为:

    1. 先声明:font-weight、font-style、font-variant。这三个样式不分先后
    2. 然后是 font-size(通常设置字体的时候可以一起设置行高:字体/行高 如:18px/1.5em)
    3. 最后是 font-family

    背景样式可以缩写成

    .con {background: #333 url(img/bg.png) no-repeat 30% 20px;}
    

    该缩写顺序为:

    .con {
        background-color: #333; /* 背景色*/
        background-image: url(img/bg.png); /* 背景图片 */
        background-repeat: no-repeat; /* 背景平铺模式: 不重复 */
        background-position: 30% 20px; /* 背景定位 */
    }
  • 相关阅读:
    win7下的vxworks总结
    ubuntu 无法获得锁 /var/lib/dpkg/lock
    项目中用到了的一些批处理文件
    win7下安装 WINDRIVER.TORNADO.V2.2.FOR.ARM
    使用opencv统计视频库的总时长
    January 05th, 2018 Week 01st Friday
    January 04th, 2018 Week 01st Thursday
    January 03rd, 2018 Week 01st Wednesday
    January 02nd, 2018 Week 01st Tuesday
    January 01st, 2018 Week 01st Monday
  • 原文地址:https://www.cnblogs.com/Ao-min/p/13691252.html
Copyright © 2011-2022 走看看