03css初步（行間樣式，內部樣式，外部樣式）
阿新 • • 發佈：2018-12-31
CSS (Cascading Style Sheets)層疊樣式表
1.行間樣式
<div style="width:300px;height:200px;background:red;">div</div>2.內部樣式
在head區定義style樣式區 #代表唯一識別樣式的ID，在body區引用樣式時用ID<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css_樣式位置</title> <style> #box1{ width:400px;height:200px;background:blue; } #box2{ width:300px;height:200px;background:red; } </style> </head> <body> <div id="box1">div1</div> <div id="box2">div2</div> </body> </html>
3.外部樣式
頁面1
頁面2<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css_外部樣式1</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="box">div1</div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_外部樣式2</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="box">div2</div>
</body>
</html>樣式檔案單獨寫，這是最規範的用法。#box{ width:400px;height:200px;background:blue; }
在head區定義
<span style="font-size: 18px;"><link href="style.css" rel="stylesheet"/>或者</span><span style="font-size: 18px;"><link rel="stylesheet" type="text/css" href="style.css"></span>href 表示超文字引用
rel 表示relationship
stylesheet 表示樣式表
type=“text/css” 表示程式碼解釋的方式是css文字
第一句的意義：連結超文字引用檔案style.css，引用關係為樣式表。