新手福音！最全面的易懂CSS總結(jié)，一篇博文讓你了解CSS，動(dòng)一動(dòng)小手收藏吧
前言
這是我學(xué)習(xí)了這個(gè)網(wǎng)站整理的筆記
如果寫的不對(duì)的地方請(qǐng)告訴我，謝謝大家。
@TOC
一.CSS的基本概念
CSS允許您將特定樣式應(yīng)用于特定HTML元素。
CSS的主要好處是它使您可以將樣式與內(nèi)容分開(kāi)。
僅使用HTML，所有樣式和格式都位于同一位置，隨著頁(yè)面的增長(zhǎng)，維護(hù)變得相當(dāng)困難。
所有格式都可以（并且應(yīng)該）從HTML文檔中刪除，并存儲(chǔ)在單獨(dú)的CSS文件中。
內(nèi)聯(lián)式
將==style屬性==（style attribute）添加到==相關(guān)標(biāo)簽==（relevant tag）。
列：
This is an example of inline styling.
嵌入式
在HTML頁(yè)面head的
3.外聯(lián)式（最有用）
使用此方法，所有樣式規(guī)則都包含在單個(gè)文本文件中，該文件以.css 擴(kuò)展名保存。然后使用標(biāo)記在HTML中引用此CSS文件。元素位于頭部?jī)?nèi)部。
列：
HTML
CSS
p { color:white; background-color:gray; }
==相對(duì)路徑==和==絕對(duì)路徑==均可用于定義CSS文件的href。在我們的示例中，路徑是相對(duì)的，因?yàn)镃SS文件與HTML文件位于同一目錄中。
樣式規(guī)則包含三部分：==選擇器（selector），屬性（property）和值（value）==。
聲明塊包含一個(gè)或多個(gè)用分號(hào)分隔的聲明。 每個(gè)聲明都包含一個(gè)==屬性名稱==和一個(gè)==值==，并用==冒號(hào)==分隔。
Type Selectors（類型選擇器）
列：
p { color: red; font-size:130%; }
CSS聲明始終以分號(hào)結(jié)尾，并且聲明組用花括號(hào)括起來(lái)。
id and class Selectors（id和class選擇器）
id選擇器允許您設(shè)置具有id屬性的HTML元素的樣式，無(wú)論它們?cè)谖臋n中的位置如何。
列：
HTML
This paragraph is in the intro section.（此段落在簡(jiǎn)介部分。）
This paragraph is not in the intro section.（此段落不在簡(jiǎn)介部分中）
CSS
#intro { color: white; background-color: gray; }
class選擇器:和id主要區(qū)別在于，id每頁(yè)只能應(yīng)用一次，而class可以根據(jù)需要在頁(yè)面上使用多次。
HTML
This is a paragraph(這是第一個(gè)段落)
This is the second paragraph.(這是第二個(gè)段落)
This is not in the intro section（這不在簡(jiǎn)介部分）
The second paragraph is not in the intro section.（第二段不在介紹部分）
CSS
.first {font-size: 200%;}
id用#，class用.
Descendant Selectors(后代選擇器)
這些選擇器用于選擇作為另一個(gè)元素的后代的元素。選擇級(jí)別時(shí)，可以根據(jù)需要選擇任意多個(gè)深度。
所得結(jié)果，僅影響選定的元素
后代選擇器匹配作為指定元素后代的所有元素。
例如，僅在“intro”部分的第一段中定位元素：
HTML
This is a paragraph.
CSS
#intro .first em { color: pink; background-color:gray; }
1.Comments（注釋）
/* Comment goes here（注釋此處） */
2.Cascade(級(jí)聯(lián))
CSS指定的樣式是級(jí)聯(lián)樣式表的縮寫。
形成級(jí)聯(lián)的樣式信息的三個(gè)主要來(lái)源是：
瀏覽器的默認(rèn)樣式
用戶使用樣式
3.Inheritance（繼承）
指屬性在頁(yè)面中流動(dòng)的方式。除非另有定義，否則子元素通常將具有父元素的特征。
This is a text inside the paragraph. （這是段落內(nèi)的文本。）
注：
由于段落標(biāo)簽（子元素）在body標(biāo)簽（父元素）內(nèi)部，因此采用了分配給body標(biāo)簽的任何樣式。
二.CSS文字處理
一.介紹
font-family屬性指定元素的字體。
字體系列名稱有兩種類型：
字體系列：特定的字體系列（例如Times New Roman或Arial）
通用系列：外觀相似的一組字體系列（例如Serif或Monospace）
這是一個(gè)不同的示例字體樣式：
列：
HTML
This is a paragraph shown in serif font. （這是以襯線字體顯示的段落。）
CSS
p.serif { font-family: "Times New Roman", Times, serif; }
效果：
注意：
用逗號(hào)分隔每個(gè)值以指示它們是替代項(xiàng)。如果字體系列的名稱超過(guò)一個(gè)單詞，則必須用引號(hào)引起來(lái)：“ Times New Roman”。
font-family屬性應(yīng)包含多個(gè)字體名稱，作為“后備”系統(tǒng)。
body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
（1） 如果瀏覽器不支持Arial字體，它將嘗試下一種字體（Helvetica Neue，然后是Helvetica）。如果瀏覽器沒(méi)有任何瀏覽器，它將嘗試使用sans-serif。
（2） 如果字體名稱包含多個(gè)單詞，請(qǐng)記住使用引號(hào)。
二. 字體大小—— font-size
font-size屬性設(shè)置字體的大小。在網(wǎng)絡(luò)上設(shè)置字體大小的一種方法是使用keywords（關(guān)鍵字）。例如==xx-small, small, medium, large, larger, 等==.
列；
HTML
Paragraph text set to be small
Paragraph text set to be medium
CSS
p.small { font-size: small; } p.medium { font-size: medium; }
效果：
（1）其他字體大家可以自由嘗試
（2）如果您不希望用戶增加字體大小，則==關(guān)鍵字==很有用，因?yàn)檫@會(huì)對(duì)您網(wǎng)站的外觀產(chǎn)生不利影響。
使用==像素==或ems中的==數(shù)值==來(lái)控制字體大小
列：
h1 { font-size： 20 px ; }
em =像素/ 16；
h1 { font-size： 1.25 em ; }
在各種瀏覽器中嘗試使用文本大小和頁(yè)面縮放的不同組合，以確保文本保持可讀性。
三. 字體樣式—— font-style
font-style屬性通常用于指定斜體文本。
font-style屬性具有三個(gè)值：normal（正常），italic（斜體）和oblique（斜）。
HTML
This is a paragraph in italic style.（這是斜體樣式的段落。）
CSS
p.italic { font-style: italic; }
注：HTML 標(biāo)簽將產(chǎn)生與斜體字體樣式完全相同的結(jié)果
四. 字體粗細(xì)—— font-weight
font-weight 控制文本的粗體或粗細(xì)。
可設(shè)置： normal (正常), bold（粗）, bolder（更粗）, 和 lighter.
使用代碼跟樣式style一樣。
你還可以用數(shù)字表示，其范圍為100（細(xì)）至900（粗）。400與普通相同，而700與粗體相同。
p.thicker { font-weight: 700; }
HTML標(biāo)記還使文本變?yōu)榇煮w。
五.字體變換——font-variant
font-variant屬性允許您將字體轉(zhuǎn)換為所有小寫字母。
值設(shè)置為：normal，small-caps（大寫）和Inherit。
六.字體顏色—— color
color屬性指定文本的顏色。red, green, blue, 等.
p.example { color: green; }
十六進(jìn)制值和RGB。十六進(jìn)制形式是磅符號(hào)（＃），后跟最多6個(gè)十六進(jìn)制值（0-F）。RGB定義了Red，Green和Blue的各個(gè)值。
h1 { color: #0000FF; } p.example { color: rgb(255,0,0); }
一.文本對(duì)齊——text-align
text-align屬性==指定==元素中文本的水平==對(duì)齊方式==。
文本對(duì)齊的屬性值如下：left，right，center和justify。
列：CSS
p.left { text-align: left; }
當(dāng)text-align設(shè)置為“justify”時(shí)，將拉伸每行，以使每行具有相等的寬度，并且左右邊距是直的（如在雜志和報(bào)紙中）。
二.垂直對(duì)齊——vertical-align
vertical-align屬性設(shè)置元素的垂直對(duì)齊方式。常用的值是top，middle和bottom。
下面的示例顯示如何在表格之間垂直對(duì)齊文本。
HTML
| Top | Middle | Bottom |
CSS
td.top { vertical-align: top; } td.middle { vertical-align: middle; } td.bottom { vertical-align: bottom; }
效果圖：
vertical-align屬性還采用以下值：baseline(內(nèi)嵌)，sub(子)，super(超級(jí))，％和px（或pt，cm）。
列
This is a sub line text example.
span.sub { vertical-align: sub; }
注意：==vertical-align屬性對(duì)所有元素的作用方式不同。==
例如，div元素需要一些其他CSS樣式。
此文本與中間對(duì)齊
.main { height: 150px; width: 400px; background-color: LightSkyBlue; display: inline-table; } .paragraph { display: table-cell; vertical-align: middle; }
注意
display: inline-table;（內(nèi)聯(lián)表）和display: table-cell;（表格單元）應(yīng)用樣式規(guī)則使vertical-align屬性與div一起工作。
三.文本修飾——text-decoration
none ：默認(rèn)文本
inherit ：從父元素繼承此屬性（博主表示不太理解這個(gè)意思，哪位大佬知道的講講）
overline ： 上劃線
underline ： 下劃線
line-through ： 在文本中畫一條橫線（相當(dāng)于去除線）與HTML 標(biāo)記類似
小知識(shí)：
您可以將underline，overline 或line-through值組合在以空格分隔的列表中，以添加多條裝飾線。
四.文本縮進(jìn)——text-indent
text-indent屬性指定在文本第一行的開(kāi)頭之前應(yīng)保留多少水平空間。屬性值包括==length (px, pt, cm, em, etc.), %, and inherit==.
p { text-indent: 60px; }
注意：==如果該值為負(fù)，則第一行將向左縮進(jìn)==。
五.文本陰影——text-shadow
文本陰影示例
h1 { color: blue; font-size: 30pt; text-shadow: 5px 2px 4px grey; }
在上面的示例中，我們使用以下參數(shù)創(chuàng)建了陰影：
5px：X坐標(biāo)
2px ：Y坐標(biāo)
4px：模糊半徑
grey ：陰影的顏色（灰色）
小知識(shí)：
要在文本中添加多個(gè)陰影，添加以逗號(hào)分隔的陰影列表。
六.具有模糊效果——text-shadow with Blur Effect
對(duì)于x和y偏移，可以使用各種類型的單位（例如px，cm，mm，in，pc，pt等）。
h1 { font-size: 20pt; text-shadow: rgba(0,0,255,1) -1px -2px 0.5em; }
注：0.5em模糊。
七.文本轉(zhuǎn)換——text-transform
text-transform CSS屬性指定如何大寫元素的文本。
例如它可以用于使每個(gè)單詞==大寫==的文本出現(xiàn)。
never give up.
p.capitalize { text-transform: capitalize; }
可以使文本==全部==大寫或全部小寫。
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; }
一.字母間距——letter-spacing
定義：指定文本中字符之間的間隔。
never give up
p.positive { letter-spacing: 4px; }
注：可以使用==負(fù)值==。
二.單詞間距——word-spacing
測(cè)量值：px, pt, pc, cm, mm, inches, em, and ex.
p.positive { word-spacing: 30px; }
小知識(shí)：
當(dāng)使用怪異的間距，并且有必要使所選段落==保持正常==的單詞間距時(shí)，通常使用normal的選項(xiàng)。
三.文章空格和換行——white-space
空格值：
（1）pre：能進(jìn)行空格和一個(gè)換行符。
（2）pre-pre-line：有多個(gè)空格和一個(gè)換行符，但是換行后空格無(wú)效
（3）pre-wrap：在文本中我們可以多個(gè)空格多個(gè)換行
在文本中我們 可以 多個(gè)空格多個(gè)換行
p.prewrap { white-space: pre-wrap; }
小知識(shí)
Pre-wrap值的行為與pre值相同，不同之處在于它增加了額外的換行符以防止文本脫離元素框。
敲了那么多,用還用去還是這個(gè)最實(shí)用,hh.
h1{ font-size:14px; font-weight:bold; color:red;
三.盒子模型與背景
所有HTML元素都可以視為方框。
CSS邊框模型代表網(wǎng)站的設(shè)計(jì)和布局。
它由==邊緣==（margins），==邊框==（ borders），==內(nèi)邊距==（paddings），和==內(nèi)容==（content）組成的。
這些屬性以什么的==順序==工作：top->right->bottom->left。
小知識(shí)：
網(wǎng)頁(yè)的每個(gè)元素都是一個(gè)==盒子==（box）。 CSS使用盒子模型來(lái)確定盒子有多大以及如何放置它們。
框模型還用于計(jì)算HTML元素的實(shí)際寬度和高度。
（1）總寬度等于左右邊緣，邊框，邊距相加：
（2）總高度：上下相加
一.基本設(shè)置
border屬性允許您自定義HTML元素的邊框。
為了向元素添加邊框，您需要指定邊框的==大小，樣式，顏色==。
p { padding: 10px; border: 5px solid green; }
二.邊框?qū)挾取狟order Width
使用border-width屬性可以 單獨(dú)設(shè)置邊框?qū)挾?/p>
p{ padding: 10px; border-style: solid; border-width: 2px; }
三.邊框顏色——Border Color
可以使用顏色名稱，RGB或十六進(jìn)制值定義元素的邊框顏色。
p.first { padding: 10px; border-style: solid; border-width: 2px; border-color: blue; }
四.邊框樣式——Border style
默認(rèn)值為none
多種樣式：**dotted（點(diǎn)）, dashed（虛線）, double（雙邊框）**等。
p {border-style: none;} p {border-style: dotted;} p{border-style: dashed;} p{border-style: double;} p {border-style: groove;} p {border-style: ridge;} p{border-style: inset;} p{border-style: outset;} p {border-style: hidden;}
效果圖：
四.CSS的邊寬和高度——width height
要設(shè)置
元素的總寬度和高度為100px：
div { border: 5px solid green; width: 90px; height: 90px; }
框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；
可以使用百分比 進(jìn)行分配。
div { border: 5px solid green; width: 100%; height: 90px; }
3.要設(shè)置元素的最小和最大高度與寬度，可以使用以下屬性：
min-width-元素的最小寬度
min-height-元素的最小高度
max-width-元素的最大寬度
max-height-元素的最大高度
p{ border: 5px solid green; min-height: 100px; }
一.背景顏色——background color
background-color屬性用來(lái)指定一個(gè)元素的背景色。
列：
body { background-color: #C0C0C0; } h1 { background-color: rgb(135,206,235); } p { background-color: LightGreen; }
二.背景圖像—— background image
background-image屬性中的元素可以設(shè)置一個(gè)或幾個(gè)背景圖像。
URL指定路徑的圖像文件。相對(duì)路徑和絕對(duì)路徑均受支持。
默認(rèn)情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復(fù)以覆蓋整個(gè)元素。
列;為
元素設(shè)置背景圖片。
p { padding: 30px; background-image: url("1.jpg"); color: white; }
小知識(shí)
要指定多個(gè)圖像，只需用逗號(hào)分隔URL。
三.背景重復(fù)—— background repeat
repeat-x：圖片延x軸復(fù)制
repeat-y：圖片延y軸復(fù)制
Inherited：繼承父級(jí)屬性相同的指定值
no-repeat:不重復(fù)，只有單個(gè)圖片
列：
body { background-image: url("1.png"); background-repeat: repeat-x; } p { background-image: url("1.png"); background-repeat: inherit; margin-top: 100px; padding: 40px; }
四.背景的附件（固定與滾動(dòng)）——background attachment
有效值
fixed：固定背景圖片
scroll：向下滾動(dòng)頁(yè)面是，背景也隨著滾動(dòng)
Inherit：繼承
列：
body { background-image: url("1.png"); background-repeat: no-repeat; background-attachment: scroll; }
四.列表樣式與鏈接樣式
一.介紹
CSS列表屬性允許我們?cè)O(shè)置不同的列表項(xiàng)標(biāo)記。
在HTML中，列表有兩種類型：
無(wú)序列表（
- ）：列表項(xiàng)用符號(hào)標(biāo)記為
- Red
- Green
- Blue
有序列表（
- ）：列表項(xiàng)用數(shù)字或字母標(biāo)記
在CSS中使用list-style-type屬性
可以設(shè)置為circle，square，decimal，disc，lower-alpha等
列：HTML
CSS
ol.lower-alpha { list-style-type: lower-alpha; }
效果圖
二. 列表圖像和位置—— List Image and Position
list-style-image：指定要用作列表項(xiàng)標(biāo)記的圖像。
list-style-position：指定標(biāo)記框的位置（inside內(nèi)部，outside外部）。
CSS
ul { list-style-image: url("1.jpg"); list-style-position: inside; }
效果圖
小知識(shí):list-style-position: outside：表示默認(rèn)值
列
CSS
ul { list-style: square outside none; }
相當(dāng)于
ul { list-style-type: square; list-style-position: outside; list-style-image: none; }
一.表屬性——Tables Properties
作用：使用CSS可以大大改善HTML表格的外觀。
border-collapse：指定表格的邊框是否被折疊成一個(gè)單一的邊界或分離為默認(rèn)值。
border-spacing：更改邊框的間距
HTML
| Red | Green |
| Blue | Yellow |
CSS
table { border-collapse: separate; border-spacing: 20px 40px; }
效果圖
二.標(biāo)題設(shè)置——caption-side
作用：caption-side屬性指定一個(gè)表標(biāo)題的位置。可以設(shè)置為top或bottom。
h1 { caption-side：top; }
三.空白單元格設(shè)置——empty-cells
作用：指定上表中的空單元格是否顯示邊界和背景。
屬性值：show（顯示），hide（隱藏）。
列
table { border-collapse: separate; empty-cells: hide; }
四.表格布局——table-layout
屬性值：
（1）auto(自動(dòng))：為默認(rèn)值。
（2）fixed（固定）：固定單元格長(zhǎng)度。
列 HTML
| 500.000.000.000.000 | 20.000 |
CSS
table { border-collapse: separate; width: 100%; border: 1px solid gray; } td { border: 1px solid gray; } table.fixed { table-layout: fixed; }
一.設(shè)置樣式
作用：鏈接可以使用任何CSS屬性（例如顏色，字體系列，背景等）設(shè)置樣式。
選擇器：
a:link-定義普通未訪問(wèn)鏈接的樣式
a:visited- 定義訪問(wèn)鏈接的樣式
a:active -當(dāng)點(diǎn)擊時(shí)鏈接就會(huì)變顏色
a:hover -當(dāng)鼠標(biāo)移動(dòng)鏈接時(shí)才會(huì)變顏色
列
a:hover { color: red; }
小知識(shí)：
各個(gè)選擇器是有順序的：hover在link和visite后，active在hover后。
二.修飾鏈接的文字——Links’ Text Decoration
作用：text-decoration屬性用于刪除鏈接文字的下劃線。
a:link { text-decoration: none; }
五.文字顯示和定位
一.塊元素——block
介紹：塊元素是占據(jù)最大可用寬度的元素，前后都有換行符。
事列：下例中的樣式規(guī)則將內(nèi)聯(lián)元素顯示為塊級(jí)元素：
HTML
內(nèi)容
CSS
二.內(nèi)聯(lián)元素——inline
介紹：不強(qiáng)制換行
p { display：inline ; }
三.隱藏元素——none
介紹：元素將被隱藏，并且頁(yè)面將顯示為該元素不在其中。
h1 { display: none; }
四.是否顯示——visibility
介紹：visibility屬性指定是否一個(gè)元素是可見(jiàn)（visible）或隱藏（hidden）。
HTML
This text will not display in browser.
CSS
div.hidden { visibility: hidden; }
一.基本概念
可以使用top，bottom，left，right屬性定位元素。但是，首先要設(shè)置position屬性，否則這些屬性將不起作用。
二.靜態(tài)定位——static
p.position_static { position:static; top: 30px; right: 5px; color: red; }
靜態(tài)定位的元素不受top，bottom，left和right屬性的影響。
三.固定定位——Fixed Positioning
固定位置的元素相對(duì)于瀏覽器窗口定位，并且即使?jié)L動(dòng)窗口也不會(huì)移動(dòng)。
p.position_fixed { position: fixed; top: 30px; right: 5px; color: red; }
通俗的話講就是：一動(dòng)不動(dòng)。
四.相對(duì)定位——Relative Position
HTML
CSS
p { width: 350px; border: 1px black solid; position: fixed; } span { background: green; color:white; position: relative; top: 150px; left: 50px; }
相對(duì)定位的元素的內(nèi)容可以移動(dòng)并與其他元素重疊，但是仍保留該元素的空間。
五. 絕對(duì)定位——Absolute Position
絕對(duì)定位使用通常是父級(jí)定義position:relative定位，子級(jí)定義position:absolute絕對(duì)定位屬性，并且子級(jí)使用left，right，top，bottom進(jìn)行絕對(duì)定位。
絕對(duì)定位的元素可以與其他元素重疊。
HTML
CSS
.abs { width: 150px; left:100; border: 3px black solid; position: absolute;} /* it works without top/bottom or left/right */ .fix { width: 150px; border: 2px red dotted; position: fixed; top:50; left:100;} /* work only with positioning */ .rel { width: 150px; border: 1px blue dashed; position: relative;}
輸出效果
六.CSS 浮點(diǎn)數(shù)（float）
（1） 使用float屬性，可以將一個(gè)元素向左或向右推，允許其他元素環(huán)繞它。
（2）浮點(diǎn)數(shù)通常用于圖像，但在處理布局時(shí)也很有用。
（3） float屬性的值分別為left，right，none。分別在這些方向上的左右浮動(dòng)元素。none（默認(rèn)）確保該元素不會(huì)浮動(dòng)。
HTML
CSS
img { float: right; }
效果圖：
注意：元素水平浮動(dòng)，這意味著元素只能向左或向右浮動(dòng)，而不能向上或向下浮動(dòng)。
如果將多個(gè)浮動(dòng)元素一個(gè)接一個(gè)放置，則如果有足夠的空間，它們將彼此相鄰浮動(dòng)。
示例，在打印布局中，可以將圖像設(shè)置到頁(yè)面中，以便文本根據(jù)需要環(huán)繞它們。
HTML
CSS
img { float: left; width: 25%; margin-right: 10px;/*添加邊距使文本不能太靠近圖像*/ } p { width: 50%; float: right; }
效果圖：
（1）clear屬性值：right，left，both。
（2）默認(rèn)值是none，這允許在兩側(cè)都浮動(dòng)元素。
（3）作用：指定其他段落不受float元素的影響。
（4）both：用于清除來(lái)自任一方向的浮子。
HTML
CSS
.floating { float: right; } .cleared { clear: right; } /*或者可以使用 .clearing { clear: both; }*/
這篇博客是以下這些的博客的總結(jié)，推薦給不喜歡看長(zhǎng)篇幅的人
1.CSS的基本概念———每天一遍小知識(shí)
2.CSS之處理文字（working with Text）———每天一遍小知識(shí)
3.CSS之盒子模型與背景屬性————每天一遍小知識(shí)
4.CSS之列表樣式與鏈接樣式——每天一遍小知識(shí)
5.CSS相對(duì)，絕對(duì)，固定，靜態(tài)定位和顯示效果——每天一遍小知識(shí)
6.CSS 浮點(diǎn)數(shù)（float）——每天一遍小知識(shí)
請(qǐng)給我點(diǎn)個(gè)贊鼓勵(lì)我吧
CSS HTML
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
