本課內容：
1，每個html標籤中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標籤)
2，使用style標籤的方式。 一般都定義在head標籤中。(針對多個相同的標籤)
3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS檔案匯入
<style type=”text/css”>@import url(“1.css”);</style>
4，通過HTML頭標籤中的link標籤連結一個CSS檔案
<link rel=”stylesheet” href=”1.css” media屬性可選，預設裝置螢幕/>
標籤選取器 p{}
類別選取器 .haha
id選取器 #qq (id的取值在頁面中是唯一的，因為該屬性除了給CSS使用，還要給javascript使用)
類別選取器和id選取器用法一樣，id選取器的優先順序比類別選取器高，優先順序越少越高
css：將網頁內容和顯示樣式進行分離，提高了顯示功能。
CSS層疊樣式表cascading style sheets
將網頁中的樣式單獨分離出來，完全由CSS控制，增強樣式複用性和擴充性。
格式：選取器{屬性名稱：屬性值；屬性名稱：屬性值；……}
CSS與HTML結合的4中方式：
1、每個HTML標籤都有style屬性
2、當頁面中有多個標籤具有相同樣式時，可定義style標籤封裝樣式以複用
<style type=”text/css”>css代碼</style>
3、當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS檔案匯入
<style type=”text/css”>@import url(“1.css”);</style>
4、通過HTML頭標籤中的link標籤連結一個CSS檔案
<link rel=”stylesheet” href=”1.css” media屬性可選，預設裝置螢幕/>
技巧：為提高樣式的複用性和可擴充性，將多個樣式單獨定義並封裝為CSS檔案，如p.css、p.css……在一個總的CSS檔案中，使用import匯入這些CSS檔案，然後在HTML頁面中用link標籤將這個總的CSS檔案匯入即可。
優先順序：就近原則 標籤上設定的style屬性可以覆蓋其他樣式
選取器：
1、標籤選取器：每個HTML標籤名即為一個選取器
2、類別選取器：標籤中的class屬性指定 定義樣式要加點 js引用時用className
3、ID選取器：標籤的id屬性，盡量保證唯一，便於JavaScript擷取元素
4、延伸選取器：
a、關聯選取器：標籤中的標籤 table p表示表格中的p地區
b、組合選取器：多個選取器 逗號分隔
c、為元素選取器：元素的狀態 如超連結的預設狀態、點擊狀態、懸停狀態等
a:link a:visited a:hover a:active LVHA順序
刪除超連結預設底線：text-decoration：none
p:first-letter p:first-line focus:IE6不支援
CSS濾鏡：通過一些代碼豐富了的樣式
網頁設計時，p+CSS
p和P標籤都屬於行級地區，斷行符號效果，SPAN標籤為塊級地區，無斷行符號效果
可加border、color等屬性，P標籤中不要嵌套p標籤
<!--本課內容：一、實現CSS四種方式1，每個html標籤中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標籤)2，使用style標籤的方式。 一般都定義在head標籤中。(針對多個相同的標籤)3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS檔案匯入 <style type=”text/css”>@import url(“1.css”);</style>4，通過HTML頭標籤中的link標籤連結一個CSS檔案 <link rel=”stylesheet” href=”1.css” media屬性可選，預設裝置螢幕/>二、選取器標籤選取器 div{}類別選取器 .hahaid選取器 #qq (id的取值在頁面中是唯一的，因為該屬性除了給CSS使用，還要給javascript使用)類別選取器和id選取器用法一樣，id選取器的優先順序比類別選取器高，優先順序越少越高 --><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- type指定下面的css以什麼方式解析 --><!--指定這兩個樣式都作用與div，所以用div後的大括弧括起來--><!-- css一般放在頭部，因為要積極式載入，所以每個出現div的位置都已經被換了樣式 --><!--第二種方式：標籤選取器div{ background-color: #000; color: #FFF } --><!-- @IMPORT url("div.css");第三種方式 --><!-- 第四種 link --><link rel="stylesheet" href="div.css" type="text.css"><style type="text/css">/* @IMPORT url(1.css); @IMPORT url(div.css);@IMPORT url(span.css);*/div.haha{ background-color: #000;}</style><!-- 類別選取器div.haha 優先順序比標籤選取器高 約少數，優先順序越高 --><!-- 類別選取器不僅可以相同標籤的少部分做，還可以對不同的標籤做 --><!-- div.haha中的div可以不寫，.haha，那就所有的有哈哈類的都變了 --><!-- 按鈕加多套這樣的.haha實現動態樣式 --></head><body> <!-- css和html相結合的第一種方式 1，每個html標籤中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標籤) 2，使用style標籤的方式。 一般都定義在head標籤中。(針對多個相同的標籤) 3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS檔案匯入 <style type=”text/css”>@import url(“1.css”);</style> 4，通過HTML頭標籤中的link標籤連結一個CSS檔案 <link rel=”stylesheet” href=”1.css” media屬性可選，預設裝置螢幕/> --> <!-- --> <!-- 樣式的重疊 重複樣式一最後載入為主，不重複樣式層疊，其實都是層疊 --> <!-- color: #F00 為顏色的縮寫 --> <div style ="color: #F00">這是一個div地區1</div> <div class="haha">這是一個div地區2</div> <span>span地區1</span> <span>span地區2</span> <p>這是一個段落1</p> <p>這是一個段落2</p> </body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><!--link rel="stylesheet" href="1.css" type="text/css" /--><style type="text/css">/*@import url(1.css);p{ background-color:#09F; color:#FFF;}.haha{ background-color:#FF3; color:#0C0;}*//*預定樣式，實現動態載入。.hehe{ background-color:#C93; color:#00F;}*//*#qq{通常ID的取值在頁面中是唯一的，因為該屬性除了給css使用，還可以被js使用。id通常都是為了去標示頁面中一些特定地區使用的。 background-color:#000; color:#FFF;}*//*span b{關聯選取器 選取器中的選取器 background-color:#09F; color:#FFF;}*//*組合選取器*//*.haha,p b{對多種選取器進行相同樣式定義 background-color:#000; color:#C00;}*//*虛擬元素超連結的狀態。*//*未訪問*/a:link{ background-color:#06F; color:#FFF; text-decoration:none; font-size:18px;}/*滑鼠移至上方*/a:hover{ background-color:#FFF; color:#F00; font-size:24px;}/*點擊效果*/a:active{ background-color:#000; color:#FFF; font-size:36px;}/*訪問後效果*/a:visited{ background-color:#FF9; color:#000; text-decoration:line-through;}p:first-letter{ font-size:36px; color:#F00;}p:hover{ background-color:#F00; color:#FFF;}input:focus{ background-color:#09F;}#qq{ float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" /> <hr /><a href="http://www.sina.com.cn" target="_blank">虛擬元素選取器示範</a><hr /> <!-- css和html相結合的第一種方式。 1，每一個html標籤中都有一個style樣式屬性。該屬性的值就是css代碼。 2，使用style標籤的方式。 一般都定義在head標籤中 優先順序： 標籤選取器<類別選取器<id選取器<style屬性 --> <p id="qq">這是一個p<b>地區</b>1</p> <p class="haha" id="qq">這是一個p地區2</p> <span>span<b>地區</b>1</span> <span class="haha">span地區2</span> <p>這是一個段落1</p> <p class="haha">這是一個段落2</p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
