HTML樣式

乞力馬紮羅的雪CYF發表於2015-09-27
HTML

1.標籤

<style>:樣式定義

<link>:資源引用


2.屬性

rel:"stylesheet":外部樣式表

type:"text/css":引入文件的型別

margin-left:邊距


3.三種樣式表插入方式

（1）外部樣式表：

<link rel="stylesheet" type="text/css" href="mystyle.css">


（2）內部樣式表：

<style type="text/css">

body{

background-color:red

}

p{

margin-left:20px

}

</style>


（3）內聯樣式表

直接在標籤內部制定樣式；

<p style="color:red">


具體的實現程式碼如下：

【一】外部樣式表

1).新建一個檔案，命名為mystyle.css.裡面程式碼如下：

h1{

    color: red;
}

2).新建一個HTML檔案，index.html，裡面程式碼如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>


    <h1>神奇網站</h1>

</body>
</html>

3).執行程式：

。




【二】內部樣式表

1).內部樣式表其實和外部樣式表非常類似，只是把在css檔案中的程式碼直接寫到了HTML中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>

    <style type="text/css">
        h1{
            color: red;
        }
    </style>

</head>
<body>


    <h1>神奇網站</h1>

</body>
</html>

2).效果如下：其實和第一個外部樣式表是一樣的。

。



【三】內聯樣式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>

</head>
<body>

<!--直接在標籤內部制定樣式-->
    <h1 style="color: red">神奇網站</h1>

</body>
</html>

實現效果同上面兩個。



github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章