zoukankan      html  css  js  c++  java
  • CSS总结

    1、  字体样式

    (1)       字体名称

    语法:

    font-family       :  <family-name>

    说明:

    设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体,因为有些浏览器并不具备一些字体

    例:

    p { font-family:‘宋体','黑体', 'Arial’ }

    (2)       font-size(字体大小)

    语法:

    font-size <length> | <percentage>

    注:如果用百分比作为单位,则是基于父元素字体的大小

    例:

    CSS:p { font-size:14px;}

    HTML:<body>

         <p>数风流人物</p>

    </body>

    (3)      font-weight(字体加粗)

    语法:

    font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    例:

    CSS: p { font-weight:bold;}

    HTML:<body>

         <p>这个文体加粗 </p>

    </body>

    (4)      font-style(字体斜体

    语法:font-style : normal | italic | oblique

    例:

    CSS:

    .box1{ font-style: normal; }

             .box2{ font-style: italic; }
    .box3 { font-style: oblique; }

    HTML:

    <p class="box1">美女</p>

    <p class="box2">美女</p>

    <p class="box3">美女</p>

    (5)      font(字体样式缩写)

    语法:

    font : font-style || font-variant || font-weight || font-size || / line-height || font-family

    例:

    p{

       font-style:italic;

       font-weight:bold;

       font-size:14px;

       line-height:22px;

       font-family:宋体;

    }

    缩写后:

    p { font:italic bold 14px/22px 宋体}

    (6)      color(字体颜色) ,如何控制字体颜色

    语法

    color<color>

    说明:

    颜色属性值分三种值的格式

    1. 英文单词,比如 red , yellow ,green …
    2. 十六进制表示方式,#开头,6个十六进制的字符或数字 组合。比如:#FFFFFF,#000000,#CCCAAA,#22BCAD。十六进制: 0-9 和 a-f
    3. RGB模式,红 0-255,绿 0-255,蓝 0-255。比如: RGB(120,33,234)

                          

                RGBA(255,0,0,.5)   RGBA模式,最后的A表示透明度50%

    例1:p{

       color:#FF0000;

    }

    例2:

    <html>

       <head>

                <title></title>

                <style type="text/css">

                a[class^="col"]{

                   background-color: red;

                }

              a[href$=".doc"]{

                     background-color: green;

              }

               a[title*="box"]{

                     background-color: blue;

              }

                </style>

       </head>

       <body>    

           <a href="##" class="columnNews">我的背景想变成红色</a>

                <a href="##" class="columnVideo">我的背景想变成红色</a>

                <a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>

                <a href="1.doc">我的背景想变成绿色</a>

                <a href="2.doc">我的背景想变成绿色</a><br/>

                <a href="##" title="this is a box">我的背景想变成蓝色</a>

                <a href="##" title="box1">我的背景想变成蓝色</a>

                <a href="##" title="there is two boxs">我的背景想变成蓝色</a>

       </body>

    </html>

     后续.......................

  • 相关阅读:
    第4章 栈和队列
    第3章 线性表
    第2章 算法
    第1章 数据结构绪论
    First Blood
    第52条:通过接口引用对象
    第51条:当心字符串连接的性能
    第50条:如果其他类型更合适,则尽量避免使用字符串
    第49条:基本类型优先于装箱基本类型
    第48条:如果需要精确的答案,请避免使用float和double
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5760535.html
Copyright © 2011-2022 走看看