码迷,mamicode.com
首页 > Web开发 > 详细

css折叠样式(3)——常用样式属性

时间:2016-07-13 12:14:00      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:css常用样式属性、css


一、颜色属性

技术分享


demo.html

<!doctype html>
<html>
    <head>
        <title>CSS的颜色属性的四种方式</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                color:red
            }
            .c1{
                color:#ff6600
            }
        
            .c2{
                color:rgb(0,0,255)  /* 红(R)、绿(G)、蓝(B) 每个的取值范围0~255 */
            }
        
            .c3{
                color:rgba(0,100,0,0.4)    /* RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度(0-1) */
            }
        </style>
    </head>
    <body>
        <p>这是第一种方式</p>
        <p class="c1">这是第二种方式</p>
        <p class="c2">这是第三种方式</p>
        <p class="c3">这是第四种方式</p>
    </body>
</html>


二、字体属性

技术分享


demo.html

<!doctype html>
<html>
    <head>
        <title>CSS的字体属性</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>
        <p class="c1">字体大小20px</p>
        <p class="c2">楷体</p>
        <p class="c3">加粗</p>
        <p class="c4">斜体</p>
        
    </body>
</html>


style.css

p.c1{
    
    font-size:50px
}

p.c2{
    
    font-family:KaiTi,SimSun    /* 可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个 */
}

p.c3{
    
    font-weight:bold           /* font-weight 字体加粗,normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) */
                              /*另外一种方式:100、200、300~900,400 = normal,而 700 = bold,只能整百 */
}
    
p.c4{
    
    font-style:italic    /* normal:标准 italic:斜体 oblique:倾斜 inherit:继承  */
}


本文出自 “发酸的牛奶” 博客,转载请与作者联系!

css折叠样式(3)——常用样式属性

标签:css常用样式属性、css

原文地址:http://wengmengkai.blog.51cto.com/9016647/1825872

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!