標籤：str 閃爍 aaaaa square 重要 檔案 目的 不同 行高
CSS樣式
CSS是Cascading Style Sheets的簡寫，它除了可以輕鬆設定網頁元素的顯示位置和格式處，甚至還能產生濾鏡，映像淡化，網頁淡入淡出的漸層效果。CSS就是要對網頁的顯示效果實現與Word一樣的排版控制一個段落、字型、顏色、背景、邊框等。
註：注釋/* */裡面不能再包含注釋
1、CSS的四種設定方式
內聯樣式表：在HTML元素標籤中使用style屬性內聯，在需要相同樣式情況下，不適用
每個HTML標籤都可以加樣式，如下：
<span style="font-size:18px;"><span style="font-size:18px;"><body><p>aaaaa</p><p style="color:red;font-size:4cm;border:2px solid blue; text-align:center">bbbb</p><p style="color:red;font-size:4cm;border:2px solid blue; text-align:center">cccc</p><b style="color:blue">wwwwwww</b></body></span></span>
內建樣式表：通過HTML的<style>標籤將CSS嵌入到HTML中使用
可以控制整個頁面的所有樣式
<span style="font-size:18px;"><head><title>CSS內建樣式</title><style>CSS內建樣式</style></head</span>
外部樣式表：將樣式單獨定義在一個尾碼名為.css的文檔中，並在HTML中通過link元素串連到HTML中使用。
多個頁面都可以使用
<span style="font-size:18px;"><head><title>CSS樣式</title><link rel="stylesheet" type="text/css" href="css/layout.css" /></head></span>
輸入樣式表：可以將一個樣式檔案輸入到另外一個樣式檔案的中，或將一個樣式檔案輸入到<style>元素中
@import url(css檔案)【片段檔案組合成完整CSS檔案】
<span style="font-size:18px;">p {background-color:green;}@import url(one.css);@import url(two.css);@import url(three.css);</span>
優先順序別：
內聯的高於其它的， 其它的和載入的順序有關
2、樣式選取器
Selector:當定義一條樣式規則時，必須指定受這條樣式規則作用的網頁元素，在一條規則中定義的網頁元素就是selector（選取器），也就是選擇該樣式規則作用於的網頁元素。
1、HTML選取器
HTML有標籤， CSS就用選取器
選擇符就是賦予內部或外部樣式表的名字
HTML的標籤，用來改變一個指定標籤的樣式
任何一個元素都可以是一個CSS選擇符
2、類別選取器
同一個選取器能有不同的類，因而允許同一個元素有不同的樣式定的方法
[tag].類名 （類名是自訂的,如果不加tag則代表所有HTML元素）
<tag class=“類名 類名1 類名2”> （同一個元素可以使用多個類，類名之間使用空格分開）
3、ID選取器
在HTML頁面中， ID屬性指定了某個單一元素，id屬性就用來對單一元素定義單獨樣式
一個HTML頁面中，ID屬性值要唯一
4、關聯選取器
關聯選取器只不過是一個用空格隔開的兩個或更多的單一選取器給成的字串
因為層疊順序的規則，它們的優先權比單一的選擇符大
必須按關聯關係使用，不能有反順序
只要能保持關聯關係就可以，不管是在多少層
5、組合選取器
為了減少樣式表的重複聲明，組合是允許的
只要使用英文逗號（,）隔開每個選擇符就可以了
6、虛擬元素選取器
虛擬元素選取器是指對同一個HTML元素在不同的狀態下的一種定義方式
目前只有a和p兩處HTML元素可以使用
<a> 標籤定義超連結，用於從一張頁面連結到另一張頁面。其最重要的屬性是 href 屬性，它指示連結的目標。
<p> 標籤定義段落。
#使用時的文法
標籤：虛擬元素 標籤［.類名］：虛擬元素
a:link 沒有任何運作前的狀態
a:hover 游標移到到超連結上的狀態
a:active: 選擇超連結的狀態
a:visited 訪問過超串連的狀態
p:first-letter 一個段落中首個字母的狀態
P:first-line 一個段落中首行的狀態
<style>a:link {color:green;font-size:1cm;}a:hover {color:red;font-size:2cm;}a:active {color:blue;font-size:2cm;}a:visited {color:yellow;font-size:1cm;} p:first-letter {color:red;font-size:3cm;}p:first-line {color:yellow;font-size:1cm;}</style></head><body><a href="http://www.yyyyy.com">yyyyyyyyyy</a><br><a href="http://www.xxxxx.com">xxxxxxxxxxxx</a><br><a href="http://www.zzzzz.com">zzzzzzzzzzzzzz</a><br><p>hhhhhhhhhhhhhhhhhhh<br> uuuuuuuuuuuuuuuuuuu<br> xxxxxxxxxxxxxxxxxxxxx<br> </p> <p>hhhhhhhhhhhhhhhhhhh<br> uuuuuuuuuuuuuuuuuuu<br> xxxxxxxxxxxxxxxxxxxxx<br> </p> </body>
##樣式規則的繼承
所有嵌套在某個HTML標籤中的HTML標籤都會繼承外層標籤設定的樣式規則。
##樣式規則的優先順序
關聯>ID選取器>CLASS選取器>HTML標籤選取器
#################################################################################
如何下載頁面中的css檔案：http://www.daimami.com/HTML-CSS/188531.htm
#################################################################################
3、常見CSS的屬性和值
1、字型
font: [ <字型風格> || <字型變形> || <字型加粗> ]? <字型大小> [ / <行高> ]? <字型族科>
#根據值判斷屬性，最好按順序輸入
CSS中修飾字型的屬性
屬 性
描 述
屬 性 值
font-family
字型族科
任意字型族科名稱都可以使用例如Times、serif等，而且多個族科的賦值是可以使用的，中間用逗號分隔，以防止選擇不存在的字型族科
font-size
字型大小
可以使用絕對大小、相對大小、長度或百分比
font-style
字型風格
normal（普通），italic（斜體）或oblique（傾斜）
font-weight
字型加粗
normal、bold、bolder或lighter等
font-variant
字型變形
normal（普通）或small-caps（小型大寫字母）
2、文本
CSS中常見的控制文本的屬性
屬 性
描 述
屬 性 值
letter-spacing
字母間隔
該值必須符合長度格式，允許使用負值
word-spacing
文字間隔
該值必須符合長度格式，允許使用負值
text-decoration
文字修飾
underline（底線），overline（上劃線），line-through（刪除線），blink（閃爍），或預設地使用無
text-align
橫向排列
left、right、center或justify
text-indent
文本縮排
該值必須是一個長度或一個百分比，若百分比則視上階項目的寬度而定
line-height
行高
可以接受一個控制文本基準之間的間隔的值。當值為數字時，行高由元素字型大小的量與該數字相乘所得。百分比的值相對於元素字型的大小而定。不允許使用負值
3、背景
background: <背景顏色> || <背景圖象>|| <背景重複> || <背景附件>|| <背景位置>
CSS中常見的控制背景的屬性
屬 性
描 述
屬 性 值
background-color
背景顏色
值和color屬性值設定方式相同，或使用transparent（透明）值
background-image
背景圖象
圖片URL或none（無）
background-repeat
背景重複
repeat、repeat-x、repeat-y、no-repeat
background-attachment
背景附件
scroll（滾動）或fixed（固定）
background-position
背景位置
橫向的關鍵字（left, center, right），縱向的關鍵字（top, center, bottom）百分比和長度也可用做安排背景圖象的位置
頁面最佳化
應用多個表徵圖放到同一個圖片裡【可減少伺服器請求次數，到達最佳化目的】
多個表徵圖放到同一個圖片裡，通過定義某區塊的背景定位，調用同一個圖片中不同位置上的小表徵圖，好處是可以減少對伺服器的請求次數，從而加快頁面的訪問速度
4、位置
5、邊框
a.邊框屬性
任何一個元素都可以設定邊框邊框屬性是用於設定一個元素邊框風格、邊框寬度、邊框顏色的略寫，可以一起設定4邊的邊框，也可對上邊框、右邊框、下邊框和左邊框單獨設定。
b.邊框風格屬性
可以通過邊框風格屬性border-style設定上下左右邊框的風格，該屬性用於設定一個元素邊框的樣式，而且必須用於指定可見的邊框。可以使用1到4個關鍵字，如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等也可以分別使用border-top-style、border-bottom-style、border-left-style和border-right-style屬性單獨設定各邊的風格
c.各邊的風格使用的屬性值
none：沒有邊框，無論邊框寬度設為多大dotted：點線式邊框dashed：破折線式邊框solid：直線式邊框double：雙線式邊框groove：槽線式邊框ridge：脊線式邊框inset：內嵌效果的邊框outset：突起效果的邊框
d.邊框寬度屬性
可以通過邊框寬度屬性border-width設定上下左右邊框的寬度，該屬性用1到4個值來設定元素的邊界，值是一個關鍵字或長度，不允許使用負值長度。
如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。
如果只給出一個值，它將被運用到各邊上。
如果兩個或三個值給出了，省略了的值與對邊相等。這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。
也可以分別使用border-top-width、border-bottom-width、border-left-width和border-right-width屬性單獨設定各邊的寬度。除了可以使用長度單位定值外，還可以用medium（是預設值）、thin（比medium細）或thick（比medium粗）值。e.邊框顏色屬性
可以通過邊框顏色屬性border-color設定上下左右邊框的顏色，可以使用1到4個關鍵字。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等
f.略寫的邊框屬性
滑鼠游標屬性CSS屬性border是邊框屬性的一個快捷的綜合寫法，是一個用於設定一個元素邊框的寬度、式樣和顏色的略寫，它包含border-width，border-style和border-color屬性。
邊框屬性border只能設定四種邊框，也只能給出一組邊框的寬度和式樣。為了給出一個元素的四種邊框的不同的值，網頁製作者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。
在網頁中預設的滑鼠指標只有兩種，一種是最普通的箭頭，另一種是當移動到連結上時出現的“小手”。但現在越來越多的網頁都使用了CSS滑鼠指標技術，當將滑鼠移動到連結上時，可以看到多種不同的效果。CSS可以通過Cursor屬性實現滑鼠形狀的改變，其屬性可以是預設的滑鼠形狀default、小手形狀hand、交叉十字crosshair、文本選擇符號text、Windows的沙漏形狀wait、帶有問號的滑鼠help以及move各個方向的箭頭屬性值。
6、列表【常用為樣式自調】
CSS中常見的控制列表的屬性
nl style：無序
ol style：有序
屬 性
描 述
list-style-type
設定引導清單項目的符號類型，可以設定多種符號類型，值為disc、circle、square等
list-style-image
使用映像作為定製列表符號
list-style-position
決定清單項目縮排的程度
7、其他
PHP.9-HTML+CSS（三）-CSS樣式
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
