溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css嵌入到html的方法有哪些”，在日常操作中，相信很多人在css嵌入到html的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css嵌入到html的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1、行內樣式
行內樣式就是把 CSS 樣式直接放在代碼行內的標簽中，一般都是放入標簽的style屬性中，由于行內樣式直接插入標簽中，故是最直接的一種方式，同時也是修改最不方便的樣式。
【示例1】針對段落、<h2> 標簽、<em> 標簽、<strong>標簽以及 <div> 標簽，分別應用 CSS 行內樣式。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>行內樣式</title> </head> <body> <p style="background-color: #999900">行內元素，控制段落-1</p> <h2 style="background-color: #FF6633">行內元素，h2 標題元素</h2> <p style="background-color: #999900">行內元素，控制段落-2</p> <strong style="font-size:30px;">行內元素，strong 比 em 效果要強</strong> <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;"> 行內元素，div 塊級元素</div> <em style="font-size:2em;">行內元素，em 強調</em> </body> </html>
2、內嵌式
內嵌式通過將 CSS 寫在網頁源文件的頭部，即在 <head> 和 <head> 之間，通過使用 HTML 標簽中的 <style> 標簽將其包圍，其特點是該樣式只能在此頁使用，解決行內樣式多次書寫的弊端。
【示例2】為段落設置內嵌式樣式書寫方法，減少代碼量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左對齊*/
font-size: 18px; /*字體大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行縮進2個文字大小空間*/
width: 500px; /*段落寬度 500 像素*/
margin: 0 auto; /*瀏覽器下居中*/
margin-bottom: 20px; /*段落下邊距 20 像素*/
}
</style>
</head>
<body>
<p>這是一個文本段落，這是一個文本段落，這是一個文本段落。</p>
</body>
</html>3、鏈接式
鏈接式通過 HTML 的 <link> 標簽，將外部樣式表文件鏈接到 HTML 文檔中，這也是網絡上網站應用最多的方式，同時也是最實用的方式。這種方法將 HTML 文檔和 CSS 文件完全分離，實現結構層和表示層的徹底分離，增強網頁結構的擴展性和 CSS 樣式的可維護性。
4、導入樣式
導入樣式使用 @import 命令導入外部樣式表。導入樣式有 6 種書寫方式：
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");到此，關于“css嵌入到html的方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
