|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 在進行頁面布局時，必然會用到CSS和HTML，因為HTML是頁面的主體內容部分，CSS是頁面的表現，通俗的講，CSS是給HTML進行化妝的。那CSS的樣式怎么在HTML中實現呢？這時候就需要在HTML中引入CSS文件，今天就和大家聊聊如何將CSS導入HTML中，有需要的可以參考一下。將CSS導入HTML的方式有四種，分別是行內式，嵌入式，外部樣式。外部樣式又分為import導入式，link鏈接式。 一、行內式，即在HTML標簽中直接加上css樣式，用style添加。 比如：將div中的字體設置為40px，顏色設為紅色。代碼如下： <div style="font-size: 40px;color: red;">今天星期一</div> 效果圖：
二、嵌入式，即將CSS樣式寫在<style type="text/css"></style>中，然后將style放在<head></head>之間。 比如：在<style>中寫入樣式，將div的顏色設為橙色，字體為40px。代碼如下： <html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{font-size: 40px;color: orange;}
</style>
</head>
<body>
<div>今天星期二</div>
</body>
</html>效果圖：
三、外部樣式（外部樣式又分為import導入式，link鏈接式） 外部樣式就是把css樣式代碼寫在一個單獨的外部文件中，這個外部文件以“.css”為擴展名，然后將其引入需要的HTML中。import導入式和link鏈接式的引入方法不一樣，接下來一一介紹。 1、import導入式，即在<style type="text/css"></style>中用@import的URL引入。 比如：用import導入式將div的字體設為40px,顏色為黃色。代碼如下： <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>效果圖：
2、link鏈接式，即在<head></head>中添加<link rel="stylesheet" type="text/css" href="css/index.css"/> 調用外部css文件來實現樣式效果。 比如：用外部樣式link將div的顏色設置為綠色，字體為40px。代碼如下： <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html> 效果圖：
總結： 1、行內式這種方式麻煩，查找不方便，也沒有體現CSS的優勢，因此不推薦使用。 以上介紹了4種方式將CSS導入到HTML中，具體用什么方式，還需要看情況決定，但是用的最多的還是link鏈接式，正在學習的小伙伴可以多去練習嘗試，希望對你有幫助！ 以上就是分享四種方式將CSS樣式導入到HTML中的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
