CSS 行内样式 页内样式 外部样式

行内标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!--style="background-color: red;"-->
<body style="background-color: red;">
<!--行内样式-->
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <p style="font-size: 40px; color: yellow;">旭宝爱吃鱼</p>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>
    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

</body>
</html>

图片

业内标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
      css遵循一个规律:
      1.就近原则
      2.叠加原则
    -->
    <style>
        div{
           color: purple;
           font-size: 40px;
           background-color: yellowgreen;
        }

        p{
            color: deeppink;
            font-size: 50px;
        }
    </style>

    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <div style="color: hotpink; background-color: red;">旭宝爱吃鱼</div>
   <div>旭宝爱吃鱼</div>
   <div>旭宝爱吃鱼</div>
   <div>旭宝爱吃鱼</div>
   <div>旭宝爱吃鱼</div>
   <p>旭宝爱吃鱼</p>
   <p>旭宝爱吃鱼</p>
   <p>旭宝爱吃鱼</p>
   <p>旭宝爱吃鱼</p>
</body>
</html>

图片:

外部样式:

div{
    color: brown;
    font-size: 50px;
}

p{
    background-color: yellow;
    color: darkgreen;
    font-size: 39px;
}

图片:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
   <div>旭宝爱吃鱼</div>
   <p>旭宝爱吃鱼</p>
</body>
</html>

图片:

posted @ 2016-05-20 22:41  旭宝爱吃鱼  阅读(2356)  评论(0)  编辑  收藏  举报