css学习代码-颜色与背景

来源:互联网 发布:知无知 谌洪果视频 编辑:程序博客网 时间:2024/06/06 05:36

selector{property:value}

比如:body{

   background-color:#FF0000

}

内部样式表:

<html>
    <head>
        <title>css</title>
        <style type="text/css">
            body{
                background:red ;
            }
        </style>
    </head>
    <!--
    <body bgcolor="red">
    -->
    <body>
    红色背景!
    </body>

</html>


外部样式表:

在一个文件夹(一般是style)新建一个:style.css文件

body{
    background-color:red

/*

background-color:blue

*/
}


<html>
    <head>
        <title>css外部样式表</title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    
    <body>
    红色背景!
    </body>
</html>

颜色与背景

<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            h1{
                color:red ;
            }
        </style>
    </head>
    
    <body>
        <h1>color测试</h1>
        <h3>color测试</h3>
    </body>
</html>


<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            h1{
                /*
                    color:red ;
                */
                color:#990033;
            }
        </style>
    </head>
    
    <body>
        <h1>color测试</h1>
        <h3>color测试</h3>
    </body>
</html>


<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            h1,h3{
                /*
                    color:red ;
                */
                color:#990033;
            }
        </style>
    </head>
    
    <body>
        <h1>color测试</h1>
        <h3>color测试</h3>
    </body>
</html>


<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            h1,h3{
                background-color:#990033
            }
        </style>
    </head>
    
    <body>
        <h1>color测试</h1>
        <h3>color测试</h3>
    </body>
</html>


背景

<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            body{
                background-image:url("style/前田墩子.jpg")
            }
        </style>
    </head>
    
    <body>
        背景是一张图片
    </body>
</html>


<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            body{
                background-image:url("style/前田墩子.jpg")
                background-repeat:no-repeat ;
            }
        </style>
    </head>
    
    <body>
        背景是一张图片
    </body>
</html>


<html>
    <head>
        <title>css外部样式表</title>
        <style type="text/css">
            body{
                background:url("style/前田墩子.jpg") no-repeat
            }
        </style>
    </head>
    
    <body>
        背景是一张图片
    </body>
</html>