CSS常用的属性和值

2017-01-18  本文已影响16人  毛毛虫灾害

CSS文本

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本</title>
<style type="text/css">
   
   body{
       /*color:颜色*/
       color:#F00;
       /*字符间距*/
       letter-spacing:10px;
       /*对齐方式*/
       text-align:center;
       /*文本修饰  下划线-underline,  中划线(line-through)   上划线-overline  没有:none*/
       text-decoration:line-through;
       /*单词间距*/
       word-spacing:30px;
   }
</style>
</head>

<body>
今天 天气 不错!
</body>
</html>

CSS字体

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字体</title>
<style type="text/css">
    body{
        /*字体类型 
        注意:这里的字体类型是读取系统的默认字体库,尽量使用通用的字体,如果你设置的字体,用户的系统上没有,就是使用默认的宋体显示。
        */
        /*
        font-family:"宋体";
        */
        /*字体大小*/
        /*
        font-size:24px;
        */
        /*字体样式: 正(normal默认)  斜(italic)*/
        /*
        font-style:italic;
        */
        /*字体粗细  bold 加粗*/
        /*
        font-weight:bold;
        */
        
        /* font: 简写属性 */
        font:italic bold 36px "黑体";
    }
</style>
</head>

<body>
传智播客
</body>
</html>

CSS背景

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>
<style type="text/css">
    
    body{
        /*背景颜色*/
        /*
        background-color:#0CF;
        */
        /*背景图片*/
        /*
        background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
        */
        /*设置背景图片是否重复,或如何重复
            not-repeat: 不重复
            repeat-x: x轴重复
            repeat-y: y轴重复
            repeat: x和y轴重复(默认)
        */
        /*
        background-repeat:no-repeat;
        */
        /*设置背景的起始位置*/
        /*
        background-position:top center;
        */
        /*简写属性*/
        background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
        
    }
</style>
</head>

<body>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读