CSS筆記
阿新 • • 發佈：2017-11-27
矩形 pad 文字 兩個 bin 表現 vertica roo all
CSS
---
1.簡介
2.優勢
3.網頁中插入css
CSS介紹
-------
Cascading Style Sheets
網頁中插入CSS的三種方法
-----------------------
1.鏈接式
2.嵌入式
3.行內樣式
鏈接式
------
推薦方式
<link rel="stylesheet" type="text/css" href="index.css"/>
嵌入式
------
當單個文檔需要特殊的樣式時，建議使用<style>標簽在文檔頭部定義樣式表
行內樣式
--------
當樣式僅需要在一個元素上應用一次時，可以使用行內樣式
會失去樣式表“表現與內容分離的優勢”
<p style="color:blue;font-size:20px">
行內樣式
</p>
CSS語法
-------
一條CSS樣式規則由選擇器和一條或多條聲明組成
選擇器
1.標記名
2.自定義類名
3.自定義id
每條聲明由屬性和屬性的值組成
h1 {
color:blue;
font-size:20px;
}
h1 { color: #0000ff; }
h1 { color: #00f; }
h1 { color: rgb(0,0,255); }
h1 { color: rgb(0%,0%,100%); }
基本CSS選擇器
-------------
1.標記選擇器
2.類選擇器
3.id選擇器
標記選擇器
----------
標記是元素固有的屬性，CSS標記選擇器用來聲明哪種標記采用哪種CSS樣式，因此，每一種html標記的名稱都可以作為相應的標記選擇器的名稱。
類選擇器
--------
類選擇器以半角“.”開頭，且類名稱的第一個字母不能為數字
id選擇器
--------
id選擇器的使用方法與class選擇器基本相同，不同之處在於一個id選擇器只能應用於html文檔中的一個元素，因此其針對性更強，而class選擇器可以應用於多個元素。
id選擇器以半角“#”開頭，且id名稱的第一個字母不能為數字
CSS文本屬性
-----------
定義文本外觀，文本顏色，字符間距，對齊文本，裝飾文本，文本縮進
屬性 描述
color 文本顏色(所有瀏覽器都支持 color 屬性)
text-align 文本水平對齊方式
text-decoration 添加到文本的裝飾效果
text-indent 規定文本塊首行縮進
line-height 設置行高
text-transform 控制文本大小寫
letter-spacing 設置字符間距
word-spacing 設置單詞間距
color屬性
---------
值 描述
color_name 顏色名稱red
hex_number 十六進制值#ff0000
rgb_number rgb顏色rgb(255,0,0)
inherit 繼承父元素
text-align屬性
--------------
水平對齊方式(默認值由瀏覽器決定)
值 描述
left 左對齊
right
center
justify 兩端對齊
inherit 繼承父元素
text-decoration屬性
-------------------
設置文本的上劃線，下劃線，刪除線等
值 描述
none 默認。標準文本
underline 下劃線
overline 上劃線
line-through 刪除線
inherit 繼承父元素
text-indent屬性
---------------
文本的首行縮進text-indent: 2em;(20px, 50%)
值 描述
length 定義固定的縮進，默認值為0
百分比 定義基於父元素的百分比縮進
inherit 繼承父元素
text-line-height屬性
--------------------
設置行間的距離(行高)
值 描述
normal 默認行高
% 基於當前字體尺寸的百分比行間距
length 使用像素值設置行間距
number 使用數值設置行間距
inherit 繼承父元素
text-transform屬性
------------------
控制文本大小寫
值 描述
none 默認
uppercase 設置文本中所有字母為大寫
lowercase 小寫
capitalize 首字母大寫
inherit 繼承父元素
text-letter-spacing屬性
-----------------------
值 描述
normal 默認
length 定義字符間默認的固定距離(可以為負值)
inherit 繼承父元素
<p style="letter-spacing:-0.2em;">Huaiyin institute of technology</p>
<p style="letter-spacing:1em;">Huaiyin institute of technology</p>
<p style="letter-spacing:20px;">Huaiyin institute of technology</p>
text-word-spacing屬性
-----------------------
值 描述
normal 默認
length 定義單詞間默認的固定距離(可以為負值)
inherit 繼承父元素
CSS字體屬性
-----------
定義文本字體系列，大小，加粗，風格，變形
屬性 描述
font-family 字體
font-size 字體尺寸
font-weight 字體粗細
font-style 字體樣式
font 可以設置字體的所有屬性
font-size屬性
-------------
設置文本大小
值 描述
xx-small
x-small
small
medium 從xx-small到xx-large, 默認值為medium
large
x-large
xx-large
smaller 比父元素更小的尺寸
larger 比父元素更大的元素
length 設置為一個固定值
% 設置為基於父元素的一個百分比值
inherit 繼承父元素
font-weight屬性
---------------
設置文本粗細
值 描述
normal 默認值，定義標準字符
bold 粗體
bolder 更粗
lighter 更細
100
200
300
400 定義由細到粗的字符400等同於normal, 700等同於bold
500
600
700
800
900
inherit 繼承父元素
font-style屬性
--------------
設置文本是否傾斜
值 描述
normal 不傾斜
italic 傾斜
font屬性
--------
一次性設置針對字體的屬性
按照如下順序：font-style font-weight font-size/line-height font-family
CSS背景屬性
-----------
可以設置純色為背景，也可以使用圖像作為背景
屬性 描述
background-color 設置元素的背景顏色
background-image 設置元素的背景圖片
background-repeat 設置是否重復背景圖像或如何重復背景圖片
background-position 設置背景圖片開始位置
background-attachment設置背景圖片是否固定或者隨著頁面其余部分滾動
background 設置背景的所有屬性
background-color屬性
--------------------
用於設置對象的背景色
值 描述
color_name 顏色值為顏色名稱的背景顏色red
hex_number 顏色值為16進制的背景顏色#ff0000
rgb_number 顏色值為rgb代碼的背景顏色rgb(255,0,0)
inherit 繼承父元素
background-color屬性
--------------------
設置背景圖像
元素的背景占據元素的全部尺寸，包括內邊距和邊框，但不包括外邊框
默認情況背景圖片位於元素左上角，並在水平和垂直方向上重復
<div style="background-image:url(xxx.jpg/png/gif)"; height:150px; width:800px;></div>
background-repeat屬性
---------------------
設置是否及如何重復背景圖像
值 描述
repeat 默認。背景圖片在垂直和水平方向上重復
repeat-x 僅在水平方向上重復
repeat-y 僅在垂直方向的重復
no-repeat 圖像僅顯示一次
inherit 繼承父元素
background-position屬性
-----------------------
設置背景圖像的起始位置
值 描述
top left 如果僅設置了一個關鍵詞，那麽第二個值將是“center”
top center 默認值：0% 0%
top right
center left
center center
center ritht
bottom left
bottom center
bottom right
x% y% 第一個值是水平位置，第二個值是垂直位置
左上角是0% 0% 右下角是100% 100%
如果僅規定一個值，另一個值將是50%
xpos ypos 第一個值是水平位置，第二個值是垂直位置
左上角是0, 0。單位是像素(0px, 0px)或其他CSS單位
如果僅規定一個值另一個將是50%
可以混合使用%和position值
backgroun-attachment屬性
------------------------
設置背景圖像是否固定或者隨著頁面的其余部分滾動
值 描述
scroll 默認值。背景圖像會隨著頁面其余部分的滾動而移動
fixed 當頁面其余部分滾動時背景圖片不會移動
inherit 繼承父元素
background屬性
--------------
一次性設置針對背景的屬性
順序：background-color background-image background-repeat background-attachment background-position
CSS列表屬性
-----------
屬性 描述
list-style-type 設置列表項標記的類型
list-style-position 設置列表項標記的位置
list-style-image 將圖像設置為列表項標記
list-style 設置列表項的所有屬性
list-style-type屬性
-------------------
用於設置列表項的類型
值 描述
none 無標記
disc 默認。標記是實心圓
circle 標記是空心圓
square 標記是實心方塊
decimal 標記是數字
decimal-leading-zero 0開頭的數字標記01 02 03
lower-roman 小寫羅馬數字
upper-roman 大寫羅馬數字
lower-alpha 小寫英文字母
upper-alpha 大寫英文字母
lower-greek 小寫希臘字母
lower-latin 小寫拉丁字母
upper-latin 大寫拉丁字母
list-style-position屬性
-----------------------
設置列表標記的位置
值 描述
inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊
outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊
inherit 繼承父元素
list-style-image屬性
--------------------
將列表標記設置為圖像
list-style-image:url(1.png);
list-style屬性
--------------
設置關於列表的所有屬性
順序：list-style-type list-style-position list-style-image
CSS表格屬性
-----------
表格屬性可以改善表格的外觀
1.邊框border屬性(border:1px solid blue;)
2.單線條邊框border-collapse(border-collapse:collapse;)
3.寬度和高度width height(height:10px; width:75%;)
4.文本對齊方式text-align vertical-align(text-align:center;)
5.控制內容與邊框的距離padding(padding:9px;)
6.制作隔行變色表格
7.設置表格標題的位置coption-side(caption{caption-side:bottom;})
CSS單位
-------
單位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em
1em 等於當前的字體尺寸。
2em 等於當前字體尺寸的兩倍。
例如，如果某元素以 12pt 顯示，那麽 2em 是24pt。
在 CSS 中，em 是非常有用的單位，因為它可以自動適應用戶所使用的字體。
ex 一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)
pt 磅 (1 pt 等於 1/72 英寸)
pc 12 點活字 (1 pc 等於 12 點)
px 像素 (計算機屏幕上的一個點)
顏色
單位 描述
(顏色名) 顏色名稱 (如 red)
rgb(x,x,x) RGB 值 (如 rgb(255,0,0))
rgb(x%, x%, x%) RGB 百分比值 (如 rgb(100%,0%,0%))
#rrggbb 十六進制數 (如 #ff0000)
CSS的兩個特性：層疊性和繼承性
-----------------------------
層疊性
當有多個選擇器都作用於同一元素時，即多個選擇器的作用範圍發生了重疊
1.如果多個選擇器的定義的規則不發生沖突，則元素將應用所有選擇器定義的樣式
2.如果多個選擇器定義的規則發生了沖突，則CSS按選擇器的優先級讓元素應用優先級高的選擇器定義的樣式。
CSS規定選擇器的優先級從高到低為：行內樣式 > ID樣式 > 類別樣式 > 標記樣式。總的原則是：越特殊的樣式，優先級越高。
繼承性
CSS的繼承性是指如果子元素定義的樣式沒有和父元素的樣式發生沖突，那麽子元素將繼承父元素的樣式風格，並可以在父元素的基礎上再加以修改，自己定義新的樣式，而子元素的樣式風格不會影響父元素
一般是CSS的文本屬性具有繼承性，而其他屬性(背景屬性，盒子屬性等)則不具有繼承性
具有繼承性的屬性：color,font-類,text-indent,text-align,teext-decoration,line-height,letter-spacing,border-collapse等
無繼承性的屬性：text-decoration:none，所有背景屬性，所有盒子屬性，布局屬性等
CSS選擇器的組合
---------------
1.交集選擇器
2.並集選擇器
3.後代選擇器
1.交集選擇器
------------
交集選擇器是由兩個選擇器直接連接構成，其結果是選中兩者各自作用範圍的交集
其中第一個必須是標記選擇器，第二個必須是類選擇器或id選擇器。如:h1.class p#intro。這兩個選擇器之間不能有空格
2.並集選擇器
------------
並集選擇器是對多個選擇器進行集體聲明，多個選擇器之間用","隔開(h1,h2,.class)
所有元素使用通配符*
3.後代選擇器
------------
在後代選擇器中，規定左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符(combinator)。每個空格結合符可以解釋為"...在...找到", "...作為...的後代"
ul li選擇器可以解釋為"作為ul元素後代的任何li元素", "包含li的所有ul會把以下樣式應用到該li"
寫法:把外層的標記寫在前面，內層的標記寫在後面，之間用空格隔開。
不僅標記選擇器可以用這種方式組合，類選擇器和ID選擇器也都可以進行嵌套，而且後代選擇器還能夠進行多層嵌套。
兩個元素之間的層次間隔可以是無限的。
例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。
CSS常用的偽類與偽元素
---------------------
CSS偽類用於向某些選擇器添加特殊的效果，偽元素用於向某些選擇器設置特殊效果，常用的偽類和偽元素主要有
偽類
----
屬性 描述
:link 超鏈接正在瀏覽狀態時的樣子
:visited 被單擊過的鏈接的樣式
:hover 懸停風格
:active 鼠標單擊與釋放之間
:first-child 向元素第一個元素添加樣式
偽元素
------
:first-letter 向元素的第一個字母添加樣式
:first-line 向文本的首行添加樣式
CSS盒子模型
-----------
盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互。
頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內容、內邊距、邊框和外邊距。組成。
網頁就是由許多個盒子通過不同的排列方式（上下排列，並列排列，嵌套排列）堆積而成
每個HTML元素都可以看作是一個裝了東西的盒子；
盒子裏面的內容到盒子的邊框之間的距離即內邊距(padding),盒子本身的邊框(border),而盒子邊框外和其它盒子之間的外邊距(magin),
默認情況下盒子的邊框是無，背景色是透明，所以我們在默認情況下看不到盒子
提示：內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。
提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
CSS邊框屬性
-----------
元素的邊框(border)是圍繞元素內容和內邊距的一條或多條線
屬性 描述
border 簡寫屬性，在一個聲明中設置所有的邊框屬性
border-width 簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨為各邊邊框設置寬度
border-style 簡寫屬性，用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式
border-color 簡寫屬性，用於設置元素的所有邊框中可見部分的顏色，或為4個邊分別設置顏色
border-top 簡寫屬性，在一個聲明中設置所有的上邊框屬性
border-top-width
border-top-style
border-top-color
border-right
...
border-bottom
...
border-left
...
1.在一個聲明中設置所有的邊框屬性
--------------------------------
寬度，樣式，顏色
2.設置4條邊框的寬度
-------------------
border-width簡寫屬性，為元素的所有邊框設置寬度，或者單獨為各邊設置寬度
值 描述
thin 定義細的邊框
medium 默認。定義中等的邊框
thick 定義粗的邊框
length 自定義寬度
inherit 繼承父元素
1.1個屬性值，表示4條邊框的屬性(border-width:thin;)
2.2個屬性值，value1上下邊框，value左右邊框
3.3個屬性值，value1上邊框，value2左右邊框，value3表示下邊框
4.4個屬性值，上，右，下，左，順時針
3.設置4條邊的樣式
-----------------
border-style簡寫屬性為元素的所有邊框設置樣式，或單獨為各邊邊框設置樣式
值 描述
none 無邊框
hidden 與"none"相同。不過應用於表時除外，對於表，hidden用於解決邊框沖突
dotted 點狀邊框。多數瀏覽器呈現實線
dashed 虛線。多數瀏覽器呈現實線
solid 實線
double 雙線
groove 3D凹槽邊框
ridge 3D壟狀邊框
inset 3Dinset邊框
outset 3Doutset邊框
inherit 繼承父元素
簡寫形式與上述border-width規則類似
4.設置四條邊框的顏色
--------------------
border-color簡寫屬性為元素的所有邊框設置顏色，或者單獨為各邊邊框設置顏色
5.設置上邊框的屬性
------------------
border-top簡寫屬性，在一個聲明中依次設置上邊框的寬度，樣式和顏色
CSS內邊距屬性
-------------
盒子的內邊距就是盒子邊框到內容之間的距離，和表格的填充屬性celladding相似。如果填充屬性為0，則盒子的邊框會緊挨著內容
當對盒子設置了背景顏色或背景圖像後，那麽背景會覆蓋padding和內容組成的範圍，並默認情況下背景圖像是以padding的左上角為基準點在盒子中平鋪的
屬性 描述
padding 設置所有內邊距的屬性
padding-top 上編劇
padding-right 右內邊距
padding-bottom 下內邊距
padding-left 左內邊距
可以在一個聲明中按照上、右、下、左的順序分別設置各邊的內邊距屬性
也可以通過下面四個單獨的屬性padding-top、padding-right、padding-bottom以及padding-left分別設置上、右、下、左內邊距：
CSS外邊距margin
---------
圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的空白
屬性 描述
margin 在一個聲明中設置所有外邊距屬性
margin-top 上外邊距
margin-right
margin-bottom
margin-left
可以在一個聲明中按照上、右、下、左的順序分別設置各邊的外邊距屬性
也可以通過下面四個單獨的屬性margin-top、margin-right、margin-bottom以及margin-left分別設置上、右、下、左外邊距：
CSS外邊距合並
-------------
外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。
CSS的三種定位形式
-----------------
1.普通流
2.浮動
3.絕對定位
普通流
------
除非專門指定，否則所有框都在普通流中定位。
普通流定位方式：
1.行內元素在同一行內橫向排列。
行內元素(inline)是指元素與元素之間從左到右並排排列，只有當瀏覽器窗口容納不下才會轉到下一行。 行內元素舉例：a，img，font，b，i，u， span，input
2.塊級元素占滿整個一行，在頁面中豎向排列。
塊級元素(block)是指每個元素占據瀏覽器一整行位置，塊級元素與塊級元素之間自動換行，從上到下排列。 塊級元素舉例：p, div, hn, pre, hr, ul, ol, li, form
3.對於嵌套的元素盒子也是嵌套的關系
通過display屬性可以控制元素是以行內元素顯示還是以塊級元素顯示，或是不顯示
block
若display的屬性設為block，則元素總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非用width設定一個寬度
inline
若display的屬性設為inline，則元素和其他元素都在一行上，高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。
none
若display的屬性設為none，該元素被設置為隱藏，瀏覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據文檔中的位置。如制作下拉菜單、tab面板等有時就需要用 display: none把菜單或面板隱藏起來
list-item
在html中只有li元素默認是 list-item ，將元素設置為列表項元素後將按列表元素顯示，再通過設置列表選項可使元素的左邊出現小黑點。
CSS浮動
-------
在普通流中，一個塊級元素在水平方向會自動延展，在它的父元素中占滿一行，而在豎直方向和其他元素依次排列，不能並排
float屬性
---------
值 描述
none 默認值
left 向其父元素的左側靠近，盒子的寬度不再延伸，而是收縮，在沒設置寬度時會根據盒子的內容來確定寬度
right
浮動後的盒子將以塊級元素顯示，但寬度不會自動延伸
浮動的盒子將脫離普通流，即不再占據瀏覽器原來分配的位置
"脫離普通流"是指元素不再占據在普通流下瀏覽器分配給他的空間，其他元素就好像這個元素不存在一樣
未浮動的盒子將占據浮動盒子的位置，同時未浮動的盒子內的內容會環繞浮動後的盒子
多個盒子都浮動後，就產生了塊級元素水平排列的效果
多個浮動元素不會相互覆蓋，一個浮動元素的外邊界margin碰到另一個浮動元素的外邊界後便停止運動
浮動的清除
----------
clear是清除浮動屬性
值 描述
left 不允許左浮動
right
both
none
CSS定位
-------
使元素通過設置偏移量定位到頁面或其包含框的任何地方
position
值 描述
static 默認值。表示不使用定位屬性
fixed 固定定位，它和絕對定位類似，只是總是以瀏覽器窗口為基準進行定位(不常用)
relative 使用相對定位的盒子的位置定位依據常以標準流的排版方式為基礎，然後使盒子相對於它在原來的標準位置偏移指定的距離
absolute 設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊
相對定位的作用
--------------
讓元素相對它原來的位置發生位移，同時不釋放它原來占據的位置
讓元素的子元素以他為定位基準進行定位，同時保持他的位置不變，這時相對定位的元素成為包含框，一般是幫助裏面的元素進行絕對定位
CSS絕對定位
-----------
設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊
元素原先在正常文檔流中所占的空間會自動關閉，就好像該元素原來不存在一樣
元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於他在普通流中的位置。
若不設置父標記的定位屬性為relative，則絕對定位的元素默認以瀏覽器為包含框按照left和top設置的值偏移
相對定位和絕對定位的比較
relative absolute
定位基準 以自己原來的位置為基準 以距離它最近的設置了定位屬性的父級元素為定位基準，若所有父級元素都未設置定位則以瀏覽器窗口為基準
原來的位置 還占著原來的位置，為脫離普通流 不占用其原來的位置，已經脫離普通流，其他元素就當它不存在
cursor常用屬性
--------------
值 描述
default 默認光標（通常是一個箭頭）
auto 默認。瀏覽器設置的光標。
pointer 光標呈現為指示鏈接的指針（一只手）
move 此光標指示某對象可被移動。
text 此光標指示文本。
wait 此光標指示程序正忙（通常是一只表或沙漏）。
help 此光標指示可用的幫助（通常是一個問號或一個氣球）
Crosshair
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
CSS筆記