CSS的书写格式

CSS有3种书写形式

行内样式:(内联样式)直接在标签的style属性中书写

<body style="color: red;">

<div style="background-color: aqua; color: deeppink; font-size: 34px">我是一段文字</div>
<p style="font-size: 50px; color: #34ff76; border: 2px plum dashed">我是一段文字</p>

页内样式:在本网页的style标签中书写

<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Test</title>
    <style>
        div {
            font-size: 20px;
            background-color: rgba(58, 53, 255, 0.16);
            border-color: royalblue;
            border: dashed 2px;
            width: 46%;
        }

        p {
            font-size: 30px;
            background-color: rgba(255, 51, 47, 0.82);
            border: solid 3px ;
        }
    </style>
</head>
<body>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
</body>
</html>

外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

testcss.css

div {
    font-size: 20px;
    background-color: rgba(58, 53, 255, 0.16);
    border-color: royalblue;
    border: double 1px;
    width: 46%;
}

p {
    font-size: 30px;
    background-color: rgba(255, 51, 47, 0.82);
    border: solid 3px ;
}

test.html

<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Test</title>
    <link href="testcss.css" rel="stylesheet">
</head>
<body>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <div>我是一段文字</div><br>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
    <p>我是一段文字</p>
</body>
</html>

results matching ""

    No results matching ""