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>

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

  • 相关阅读:
    svn导入项目和部署方面的相关问题
    JDK版本会影响项目部署
    在HTML中限制input 输入框只能输入纯数字
    mui-下拉刷新
    抽象工厂模式(Abstract Factory)C#实例
    C++基础-结构体伪函数与多线程(void operator()(int))
    Android基础-Activity生命周期
    Android基础-Adapter适配器生成对话框
    Android基础-弹窗对话框(popup)
    Android基础-自定义对话框
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5760535.html
Copyright © 2011-2022 走看看