關於css一點筆記

css

1 .css基礎選擇器

1.1 css選擇器的分類

選擇器分爲基礎選擇器和複合選擇器兩大類

基礎選擇器

• 基礎選擇器是由單個選擇器組成的
• 基礎選擇器包括標籤選擇器、類選擇器、id選擇器和通配符選擇器

1.1.1標籤選擇器

標籤選擇器（元素選擇器）是指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲網頁某一類標籤制定統一的css樣式

優勢：能夠統一同類型標籤樣式

缺點：不能差別化

1.1.2 類選擇器

能夠選擇一個或多個標籤

。類名{
	屬性1：屬性2；
	。。。
}

將全部擁有red類的html元素均爲紅色

。red{
	color；red；
}

不過結構須要加上class屬性來區分本身是哪一類的
<div class='red'>變紅色 </div>

1.1.3 類選擇器-多類名

一個標籤能夠指定多個類名

1. 使用方式

   <div class="red font20">亞瑟</div>

   class屬性裏能夠寫多個類名，但不一樣類名之間必須用空格空開

1.1.4 id選擇器

id選擇器能夠爲標有特定id的HTML元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器，CSS中id選擇器以「#」來定義

#id名 {
	屬性1：屬性值1；
	。。。
}

例如將id爲nav的元素中的內容設置爲紅色。
#nav {
	color : red;
}

1.1.5 類選擇器和id區別

id選擇器 樣式#定義，結構id調用，只能調用一次

類就能夠一直用、

1.1.6 通配符選擇器

通配符使用「 * 」，定義，他表示選取頁面中全部的元素（標籤）。

語法

* {
	屬性1 ： 屬性值1；
	。。。
}

通配符選擇器不用調用，直接給全部元素使用樣式

2 .css字體屬性

css Font（字體）屬性用於定義字體系列、大小、粗細、和文字樣式（如斜體）。

2.1字體系列

css 使用font-family 屬性定義文本的字體系列

p {
	font-family:"微軟雅黑";
}
div {
	font-family:Arial,"Microsoft Yahei","微軟雅黑"；
}

2.2 大小

css中用 font-size屬性定義字體大小

p {
	font-size: 20px;
}

2.3 粗細

css使用font-weight屬性設置weight屬性設置文本字體的粗細

2.4字體樣式（如斜體）

css使用 font-style 屬性設置文本的風格

2.5字體複合屬性

字體屬性能夠把以上文字樣式綜合來看，這樣寫能夠更節約代碼

例：
body {
	font :font-style font-weight font-size/line-height font-family;
}

注：**不能更換順序

比較麻煩，先無論了，有須要再看

總結

屬性	表示	注意點
font-size	字號	咱們一般用的單位是px像素，必定要跟上單位
font-size	字體	實際工做中按照團隊約定來寫字體
font-weight	字體粗細	記住加粗是700不加粗是400（數字後不跟單位）
font-style	字體樣式	italic是傾斜
font	字體連寫	字體連寫是有順序的

3.css文本屬性

文本屬性可定義文本的外觀，好比文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等

3.1 文本顏色

color屬性用於定義文本的顏色

div {
	color :red;
}

3.2 對齊文本

text-align屬性用於設置元素內文本內容的水平對齊方式

div {
	text-align: center;	
}

3.3 裝飾文本

text-decoration屬性規定添加到文本的修飾，能夠給文本添加下劃線、刪除線、上劃線等

屬性值	描述
underline	下劃線
overline	上劃線
line-through	刪除線

3.4文本縮進

text-indent 屬性用於指定文本的第一行縮進，一般是將段落的首行縮進

3.5 行間距

line-height 屬性用於設置行間的距離（行高），能夠控制文字行與行之間的距離

p {
	line-height:26px;
}

3.6 總結

屬性	表示	注意點
color	文本顏色	咱們一般用 十六進制
text-align	文本對齊	能夠設定文字水平的對齊方式
text-indent	文本縮進	一般咱們用於段落首行縮進2個字的距離 text-indent:2em
text-decoration	文本修飾	記住添加下劃線 underline 取消下劃線 none
line-height	行高	控制行與行之間的距離

4.css引入方式

4.1css的三種樣式表

三大類

1. 行內樣式表
2. 內部樣式表
3. 外部樣式表

4.1.1內部樣式表

是將全部css代碼抽取出來放到《style》標籤中，並寫在html頁面內部

4.1.2行內樣式表

直接在標籤內加入style屬性

4.1.3外部樣式表

<link rel="stylesheet" href="css路徑">

2 css次日

2.1 emmet語法

可使用縮寫來提升編寫速度

2.1.1 快速編寫html結構語法（重要）

1. 生成標籤直接輸入標籤名摁回車或者TAB就行
2. 若是想要生成多個相同標籤，加上*就能夠了，好比div *3就能夠快速生成3個div
3. 若是有父子級關係的標籤，能夠用 > 好比 ul> li就能夠了
4. 若是有兄弟關係的標籤，用 + 就能夠了 好比 div+p
5. 若是生成帶有類名或者id名字的，直接寫.demo或者 #two tab 鍵就能夠了
6. 若是生成的div類名是有順序的，能夠用自增符號$再 * 幾 就表明有幾個順序數
7. 若是想生成的標籤內部寫內容能夠用{ }表示

2.1.2 快速生成css樣式格式

1. 好比 w200按 回車 能夠生成 width：200px；
2. lh26 按回車 能夠生成 line-height：26px；

3.css複合選擇器

1.1 後代選擇器（重要）

後代選擇器又稱爲包含選擇器，能夠選擇父元素裏的子元素，其寫法就是把外層標籤寫到前面，內層標籤寫在後面，中間用空格分隔，當標籤發生嵌套時，內層標籤就成了外層標籤的後代

標籤1 標籤2 {
	asjd
}

上述語法表示選擇元素1裏面全部的元素2

1.2 子選擇器（重要）

子元素選擇器（子選擇器）只能選擇做爲某個元素的最近一級子元素，簡單理解就是說選親兒子元素

元素1>元素2 {
	sasaf
}

1.3 並集選擇器（重要）

並集選擇器能夠同時選擇多組標籤，爲他們定義相同的樣式，一般用於集體聲明

1.4 僞類選擇器（重要）

僞類選擇器用於向某些選擇器添加特殊的效果，好比給連接添加特殊效果，或選擇第一個，第n個元素

僞類選擇器用「 ： 」表示

1.4.1 連接僞類

a:link    /*選擇全部未被訪問的連接*/
a:visited  /*選擇全部已被訪問的連接*/
a:hover    /*選擇鼠標指針位於其上的連接*/
a：active   /*選擇活動連接（鼠標按下未彈起的連接）*/

注意事項

1. 爲了生效，請按照LVHA的順序聲明：link ：visited ：hover ：active下

1.4.2 foucs僞類選擇器

用於選取得到焦點的元素（即光標）通常都是input類表單元素纔有

input:foucs {
	background-color:yellow;
}

總結

選擇器	做用	特徵	使用狀況	隔開符號及用法
後代選擇器	用來選擇後代元素	能夠是子孫後代	較多	符號是空格 .nav a
子代選擇器	選擇最近一級元素	只能選親兒子	較少	符號是大於 .nav>p
並集選擇器	選擇某些相一樣式的元素	能夠用於集體聲明	較多	符號是逗號 .nav,header
連接僞類選擇器	選擇不一樣狀態的連接	跟連接相關	較多	重點記住a{}和a:hover實際開發的寫法
focus選擇器	選擇得到光標的表單	跟表單相關	較少	input：foucs 記住這個寫法

4.css的元素顯示模式

4.1 什麼是元素的顯示模式

元素顯示模式就是元素（標籤）以什麼方式進行顯示

HTML元素通常分爲塊元素和行內元素兩類

4 .1.1塊元素

特色

1. 寬度高度內外邊距均可以設置
2. 獨佔一行
3. 寬度默認是容器（父級寬度）100%
4. 是容器，能夠放別標籤

4.1.2 行內元素

特色

1. 相鄰行內元素在一行，一行能夠顯示多個
2. 高寬直接設置是無效的
3. 默認寬度就是他自己內容的寬度
4. 行內元素只能容納文本或其它行內元素

4.1.3 行內塊元素

特色

1. 和相鄰行內元素（行內塊）在一行上，可是他們之間會有空白縫隙，一行能夠顯示多個（行內元素特色）
2. 默認寬度就是它自己內容的寬度（行內元素特色）
3. 高度，行高，外邊距以及內邊距均可以控制（塊級元素特色）

例：

4.2 元素顯示模式轉換

轉化爲塊元素： display：block；

轉化爲行內元素： display：inline；

轉化爲行內塊： display：inline-block

小技巧：讓文本在區間內垂直居中

只要讓行高等於盒子高度就能夠了

line-height=height

5.css背景

5.1 背景圖片

控制位置很方便

background-image：url（）；

5.2 背景平鋪

background-repeat

5.3 背景圖片位置（重要）

backgound-position屬性能夠改變圖片在背景中的位置

5.4 背景半透明

backgroung：rgba（0，0，0，0.3）；

• 最後一個參數是alpha透明度，取值在0~1之間

5.5 背景總結

6 css三大特性

層疊性、繼承性、優先級

6.1優先性

相同選擇器選擇相同的樣式，此時一個樣式會覆蓋另外一個衝突的樣式

• 就近原則，哪一個樣式離結構近，就執行哪一個樣式

6.2繼承性

子標籤會繼承父標籤某些樣式，如文本顏色和字號

能夠繼承（text-，font-，line-這些元素開頭的能夠繼承，以及color屬性）

6.2.1 行高的繼承性

6.3 優先級

一個元素指定多個選擇器

• 選擇器相同，則執行層疊性
• 選擇器不一樣，按權重

7 盒子模型

邊框border

內容content

外邊距margin

內邊距padding

7.1 border

border-width 定義邊框粗細，單位是px

border-style 邊框的樣式

border-color 邊框顏色

border-collapse:collapase; 合併邊框

7.2 padding

padding-left

padding-right

padding-top

padding-bottom

複合寫法：padding：

運用實例：能夠不設置盒子寬和高，用padding來撐開盒子，盒子大小就隨文字而變。

7.3 margin

margin-left。。。。。。與padding一致

7.3.1 外邊距典型應用（重要）

1. 盒子必須指定寬度
2. 盒子左右的外邊距都設置了auto

div {
	width:960px; margin:上下邊距 auto;
}

上述方法只能讓塊級元素居中，==行內元素和行內塊元素水平居中給其父元素添加 text-align：center便可

7.3.2 嵌套塊元素塌陷

解決方法

1. 能夠爲父元素加上個邊框
2. 能夠爲父元素定義一個內邊距
3. 能夠爲父元素添加overflow:hidden.

清楚內外邊距

不一樣瀏覽器自帶的不一樣，因此乾脆把全部邊距清零

* {
	padding:0;
	margin:0;
	
}

額外補充去掉列表前符號用list-style ：none；

8。圓角邊框

border-radius:length;

radius半徑（圓的半徑）原理：（橢）圓與邊框的交際造成圓角效果

border-radius：屬性；屬性能夠有四個，順時針 左上-》右上-》右下-》左下

也能夠分開寫border-top-left-radius左上角，必須top在前面

7.盒子陰影

語法

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平陰影的位置，容許負值
v-shadow	必需。垂直陰影的位置，容許負值
blur	可選。模糊距離
spread	可選。陰影的尺寸
color	可選。陰影的顏色，請查閱css顏色值
inset	可選，將外部陰影（outset）改成內部陰影

8.文字陰影

text-shadow

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必須水平陰影的位置，容許負值
v-shadow	必須，垂直陰影的位置，容許負值
blur	可選。模糊的距離
color	可選。陰影的顏色

9.浮動

• 普通流
• 浮動
• 定位

9.1 標準流

1. 按照規定好的默認方式排列

9.2 浮動

浮動能夠改變標籤默認排列方式

語法
選擇器 {
	float:屬性值;
}

屬性值	描述
none	元素不浮動（默認）
left	元素向左浮動
right	元素向右浮動

浮動特性

設置了浮動，會脫標，不保留原來位置

浮動元素會具備行內塊元素特性

浮動元素常常和標準流父級一塊兒用

來保證浮動元素不是按瀏覽器排

網頁佈局第一準則：左右浮動，上下標準

網頁佈局第二準則：先設置盒子大小，再設置盒子位置

浮動注意點

1. 浮動和標準流的父盒子搭配
2. 一個元素浮動了，理論上其他的兄第元素也要浮動

9.3清除浮動

• 若是父盒子有高度則不須要清除浮動
• 清除浮動後，符集會根據浮動的子盒子自動檢測高度。父級有了高度就不會影響下面的標準流

選擇器 { clear:屬性值；}

屬性值	描述
left	不容許左側有浮動元素（清除左側浮動影響）
right	不容許右側有浮動元素
both	同時清除左右兩側浮動的影響

在實際工做中幾乎只用both

通常都是在浮動元素後面再增長一個空元素，爲這個空元素定義「clear：both」

10。定位

定位佈局

position來實現四種方式

屬性值	說明
fixed	固定定位
relative	相對定位
absolute	絕對定位
static	靜態定位（默認值）

10.1 靜態定位

瞭解一下，如今不重要

10.2 絕對定位

絕對定位是相對它父元素來講

選擇器 {
position：absolute；
top:像素值；
bottom:像素值；
left:像素值；
right：像素值；//他們結合起來用，以後的幾種定位都是同樣
}

特色：

1. 若是父元素沒有定位，則以瀏覽器爲準定位
2. 若是父元素有定位，則以最近一級的有定位祖先元素爲參考點移動位置

10.3 相對定位

相對於他原來的位置

選擇器 {position:relative}

1. 他是相對於本身原來的位置來移動的
2. 原來在標準流的位置繼續佔有
3. 相對定位沒有脫標，最典型的應用是給絕對定位當爹。

10.4 固定定位

position：fixed

以可視化窗口爲參考對象

跟父元素不要緊

不隨滾動條滾動

固定工位不佔有原來的位置

11 .顯示與隱藏元素

display屬性

display：none;隱藏對象（位置也沒了）

display：block；除了轉化爲塊級元素以外，同時還有顯示元素的意思

visibility可見性

visible可見

hidden隱藏（位置保留）

overflow溢出位置

visible顯示

hidden隱藏

scroll溢出部分顯示滾動條

auto在須要的時候添加滾動條