随着html的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是随着這些功能的增加,HTML變得越來越雜亂,而且HTML頁面也越來越臃腫。于是css便誕生了。
Web前端基礎教程,Web前端開發,開課吧Web前端
CSS的三種導入方式
内聯樣式表<p style="font-size:50px;color:blue">css内聯樣式表</p>
内部樣式表<styletype="text/css">
p{
font-size:100px;
color:red;
}
</style>
<p>css内部樣式表</p>
外部樣式表
創建一個cssTest.css的css文件
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
使用外部樣式表<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
<p>優先級:内聯樣式表>内部樣式表>外部樣式表</p>
<span>外部樣式表</span>
完整測試代碼<!--文件名cssTest.html-->
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cssTest</title>
<styletype="text/css">
p{
font-size:50px;
color:red;
}
</style>
<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
</head>
<body>
<pstyle="font-size:50px;color:blue">css内聯樣式表</p>
<p>css内部樣式表</p>
<p>優先級:内聯樣式表>内部樣式表>外部樣式表</p>
<span>外部樣式表</span>
</body>
</html>
css文件<!--文件名cssTest.css-->
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
css三種導入方式的優先級:内聯樣式表>内部樣式表>外部樣式表
從HTML被發明開始,樣式就以各種形式存在。不同的浏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML隻包含很少的顯示屬性。
以上就是今天酷仔整理提供的“web前端基礎:CSS的三種導入方式說明”一文,希望為學習Web前端的同學提供幫助,以後酷仔每日均會提供Python編程及Web前端相關的知識内容。
特殊說明:以上資料由開課吧提供!
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!