css中內嵌,內聯以及外聯的區別


在學習css的過程中,經常會用到內嵌,內聯以及外聯這三種,接下來我就對於自己所學的一點介紹一下:

1、內嵌

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1 style="color:red;">web前端<h1>
</body>
<html

類似於上圖代碼中:

<h1 style="color:red;">web前端<h1>
這句代碼中在h1標簽中插入了
style="color:red。這種寫法就叫做內嵌,相對而言比較簡單也比較容易理解。
2、內聯
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
           h1{
              color:red; 
              }
<style>
</head> <body> <h1>web前端<h1> </body> <html

內聯的格式如上圖的代碼,所要聲明的屬性都在<head>中,這樣可以聲明多個屬性值,簡潔易懂。

3.、外聯

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>web前端<h1>
</body>
<html
.h1{color:red}

第一圖的代碼是在html中書寫,而第二圖的代碼則是在css中書寫,這樣可以使源代碼和屬性值分開書寫,這樣更加簡潔,在面對大段落的編寫來講很大程度降低了我們的書寫難度已經出錯率。

以上就是所學這三種方式的內容的簡單理解。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM