css嵌入到html的方法:1、在標簽的style屬性中添加css樣式代碼,比如“<p style="background-color: #999900">行內元素,控制段落-1</p>”;2、在html文件中的<head>和</head>之間使用<style>標簽添加css樣式代碼,比如“<style type="text/css">css樣式代碼</style>”;3、使用html中的<link> 標簽引用外部css樣式文件;4、使用“@import”命令導入外部css樣式表使用即可。
具體內容如下:
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");