css與html的三種結合方式
阿新 • • 發佈：2018-12-26
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="Demo.css"></link> <!-- css與html的結合方式: 一、內聯樣式 在開始標籤內部關聯：即在styel屬性裡面寫CSS程式碼。 優點：直接，很靈活。 缺點：如果同一標籤，樣式一樣，會造成程式碼重複。 二、內部樣式表： 在 style 標籤中新增css程式碼 優點：對網頁中相同的標籤進行統一設定。 缺點：對區域性設定不夠靈活。2、如果有多個頁面樣式相同，會造成程式碼重複。 解決方式： @import url(); 三、聯接外部樣式表 <link rel="stylesheet" type="text/css" href="xxx.css"></link> 優先順序關係： 三 < 二 < 一 由內到外，優先順序，由大到小。 --> <style type="text/css"> .div_1{ color: blue; font-size: 20px; } </style> </head> <body> <span style="color: yellow;"> 內部樣式表</span> <div class="div_1"> 內聯式樣式表</div> <div>外部樣式表</div> </body> </html>