css是什么

　　CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表，用來(lái)控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁(yè)的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。

　　簡(jiǎn)單的說(shuō)css的引入就是為了使得HTML語(yǔ)言能夠更好地適應(yīng)頁(yè)面的美工設(shè)計(jì)。

　　同時(shí)我們可以理解html與css的關(guān)系如下圖：

?

　　使用CSS的優(yōu)點(diǎn)：

?

?

css的語(yǔ)法與注釋規(guī)則

?

?css的三種引入方式

　　css有三種引入方式，分別為：

　　內(nèi)聯(lián)式

<p style="color: red">不卑不亢不慫</p>

　　嵌入式

<style type="text/css">p{color: red}</style>

　　外部式

<link rel="stylesheet" type="text/css" href="">

　　注意

　　三種方式都具有優(yōu)缺點(diǎn)，內(nèi)聯(lián)式便于查找具體的一個(gè)標(biāo)簽修改樣式，嵌入式分離html與css,但是推薦外部式，因?yàn)榭蓮?fù)用，降低代碼量，可能會(huì)產(chǎn)生請(qǐng)求，但是可以通過(guò)技術(shù)避免，也符合軟件開(kāi)發(fā)規(guī)范，推薦使用外部式。

　　三種引入方式的優(yōu)先級(jí)

　　內(nèi)聯(lián)式>嵌入式&外部式，外部式與嵌入式的優(yōu)先級(jí)由html文件解析順序決定，后執(zhí)行的覆蓋先執(zhí)行的，也就是為什么css叫層疊樣式表的原因了。（其實(shí)是一種覆蓋現(xiàn)象，內(nèi)聯(lián)式直接在標(biāo)簽內(nèi)所以優(yōu)先級(jí)最大）

?

css選擇器

　　css選擇器是用于選擇需要的標(biāo)簽進(jìn)行樣式操作的工具，有很多不同形式的選擇器。

基礎(chǔ)選擇器

　　標(biāo)簽選擇器

　　顧名思義就是根據(jù)標(biāo)簽進(jìn)行選擇，示例如下：

p{color: red
}

　　ID選擇器

　　根據(jù)標(biāo)簽ID進(jìn)行選擇

#i1{color:red;
}

　　類選擇器

　　根據(jù)自定義的類進(jìn)行選擇，同時(shí)一個(gè)標(biāo)簽中可以使用多個(gè)類，通過(guò)類選擇器我們可以實(shí)現(xiàn)一個(gè)類操作多個(gè)標(biāo)簽的功能。

　　如何玩好類選擇器，提取類中的公共類，實(shí)際就是一個(gè)降低代碼冗余的過(guò)程，提高頁(yè)面加載速度，寫(xiě)更少的代碼，實(shí)現(xiàn)同樣的功能。

.active{color:red;     
}

css高級(jí)選擇器

　　后代選擇器

　　后代選擇器，顧名思義就是當(dāng)前選擇器的后代選擇，只要是后代就可以被選擇，沒(méi)有代數(shù)限制,各個(gè)基礎(chǔ)選擇器直接用空格連接。

div a{color:red;
}

　　子代選擇器

　　選擇當(dāng)前基礎(chǔ)選擇器的下一代的選擇器，之間用>連接。

div>a{color:red;  
}

　　組合選擇器

　　組合選擇器將不同的基礎(chǔ)選擇器進(jìn)行并列選擇，使用,連接。　　

div,a,p{color:red;    
}

　　交集選擇器

　　設(shè)置兩個(gè)基礎(chǔ)選擇器之間的樣式，直接連接。

?

　　偽類選擇器

　　偽類選擇器是用于標(biāo)簽狀態(tài)的選擇器，圖中已做詳細(xì)說(shuō)明。

　　其中hover不止適用于a標(biāo)簽，也能使用在其他任何標(biāo)簽。同時(shí)偽類選擇器也可以與其他選擇器一起使用

css的繼承性

　　css中也具有繼承性，例如body下設(shè)置的樣式可以在其他標(biāo)簽中生效，但是不是所有繼承，具體可以通過(guò)瀏覽器的控制臺(tái)查看屬性是否高亮進(jìn)行判斷，高亮則是繼承的。

css選擇器權(quán)重

　　權(quán)重是用于判斷使用哪個(gè)樣式的計(jì)算方法，永不進(jìn)位。

?　　注意

　　在權(quán)重中，繼承的權(quán)重接近于0，低于其他權(quán)重，示例代碼如下：

?

?　　一個(gè)!important的問(wèn)題：!important改變的只是當(dāng)前所在那一行的屬性，其余仍舊遵循權(quán)重規(guī)則。

css字體屬性

font-family

　　font-family是字體的類型屬性，比如宋體、黑體等，可以填寫(xiě)很多備選字體，瀏覽器會(huì)依次查找本機(jī)電腦安裝的字體，從而進(jìn)行展示。

font-size

　　font-size是字體大小的屬性，通常用px表示大小，谷歌瀏覽器中默認(rèn)為16px,px是像素，是一種點(diǎn)陣的概念

color

　　color是字體的顏色屬性，通常有3種表示方式：英文法，rgb（255，255，255） & rgba（255，255，255，.5），16進(jìn)制法(其實(shí)就是rgb換算成16進(jìn)制的結(jié)果#FFFFFF)。

font-style

　　字體的樣式，正常或者斜體的樣式，斜體的屬性為italic

font-weight

　　font-weight屬性用于設(shè)置字體的粗細(xì)默認(rèn)是normal,bold是加粗。

　　也可使用數(shù)值進(jìn)行調(diào)節(jié)，區(qū)間是100-900，400是正常值。

css文本屬性

text-decoration

　　文本的下劃線，刪除線，上劃線樣式的屬性，none用于清除

?

?

?text-indent

　　用于文本的首行縮進(jìn)，可以使用em或者px單位，一般縮進(jìn)兩格推薦使用2em

文本行高、字間距、英文間距設(shè)置

?text-align

　　文本水平居中顯示為center，靠左為left（默認(rèn)），靠右是right

元素

元素分類

　　在css中元素分為三類，分別為塊狀元素、行內(nèi)元素、行內(nèi)塊元素。

　　塊狀元素

屬于塊狀元素的有:div, ui, ol, p, h, table, form

　　行內(nèi)元素

屬于行內(nèi)元素的有:a, span, em, strong, lable

　　行內(nèi)塊元素

?

?

?屬于行內(nèi)塊元素的有:input, img

?display屬性

　　display屬性用于修改標(biāo)簽的元素屬性，即塊狀元素、行內(nèi)元素、行內(nèi)塊元素。

　　通常的屬性為：塊級(jí)元素 block, 行內(nèi)元素 inline, 行內(nèi)塊元素 inline-block

　　我們可以通過(guò)display屬性修改標(biāo)簽實(shí)現(xiàn)我們所需要的功能

?

?盒子模型（重點(diǎn)）

?什么是盒模型

官方說(shuō)法：

css model這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。

所有的HTML元素可以看做盒子。

它包括：外邊距、邊距、內(nèi)填充和實(shí)際內(nèi)容。

具體實(shí)例

　　一般塊級(jí)元素都具有盒子模型的特征，以div模型為例，如圖:

?

　　此圖是在控制臺(tái)的屬性圖其中有四個(gè)屬性，分別為：

1.內(nèi)容（content）,是圖中最中間的部分，通常設(shè)置寬高修改的是content的寬高

2.內(nèi)邊距（padding），是邊框距離內(nèi)容的距離，修改之后視覺(jué)上感覺(jué)盒子變大，實(shí)際修改的是內(nèi)邊距。

　　padding的一些基礎(chǔ)用法:

?

?

3.邊框（border）,是圖中黑色實(shí)線部分，也可修改邊框的寬度。可以根據(jù)方向修改邊框粗細(xì)，形狀以及樣式。?

清除input默認(rèn)樣式可以使用border:0/none,點(diǎn)擊時(shí)的外邊框則是outline:0/none

?

?

4.外邊距（margin）,是盒子與盒子的距離，修改可以改變盒子的位置。

　　margin在水平方向上的邊距是疊加的，在垂直方向上的是包含的，又稱塌陷，即取最大邊距為準(zhǔn)。

清除html的一些默認(rèn)樣式

　　為了是我們的網(wǎng)頁(yè)更加符合UI的設(shè)計(jì)，我們通常需要將一些標(biāo)簽的默認(rèn)樣式清除，下圖是部分樣式清除的方法：

?

?

　　同時(shí)我們可以使用其他大牛寫(xiě)好的樣式清除CSS文件來(lái)實(shí)現(xiàn)樣式清除，比如reset.css等。

?

HTML盒子居中顯示

　　想要使一個(gè)盒子在另一個(gè)盒子里面居中顯示，可以使用margin:0 auto實(shí)現(xiàn)。如果是帶方向的margin-left；auto則會(huì)盒子向右移，同理其他方向的auto也是如此。

浮動(dòng)

　　浮動(dòng)一開(kāi)始的出現(xiàn)是為了解決文本環(huán)繞問(wèn)題，類似圖片周圍包裹著文字。現(xiàn)在多用于多元素的排版，常用屬性有：

?

　　關(guān)于文字環(huán)繞

在將圖片和文字都存在的頁(yè)面中。如果我們將圖片設(shè)置浮動(dòng)，則文字就會(huì)包裹著圖片，形成一種文本環(huán)繞的現(xiàn)象，其實(shí)是一個(gè)文本流的問(wèn)題。

　　文檔流?

　　在html文件中，文件的解析過(guò)程是從左往右，自上而下的，也就是文檔流的解析過(guò)程。而浮動(dòng)在這里就是脫離文本流的存在，給人一種飄起來(lái)的感覺(jué)。同時(shí)也會(huì)引發(fā)一個(gè)文本塌陷問(wèn)題，根本原因就是浮動(dòng)的元素與普通元素不在一個(gè)文本流上，無(wú)法支撐一定的高度，導(dǎo)致下面的元素向上擠，從從而導(dǎo)致文本塌陷。

清除浮動(dòng)

　　有四個(gè)方法，具體如圖：

　　偽元素選擇器清除浮動(dòng)

將我們需清除浮動(dòng)的標(biāo)簽中添加該屬性，可以清除浮動(dòng)，并且此方式較為友好，不改變代碼結(jié)構(gòu)。

?

?

?　　通過(guò)overflow:hidden實(shí)現(xiàn)浮動(dòng)清除（添加于父級(jí)標(biāo)簽）

?

?

?BFC

目前已知通過(guò)bfc去計(jì)算浮動(dòng)的元素的高度，從而解決高度塌陷問(wèn)題。

?

?

?

?

?

?

解決兩個(gè)標(biāo)簽高度不一致的問(wèn)題

在css樣式中添加vertical-align:middle;

原理探索：

定位

定位的分類

其中靜態(tài)定位不能夠設(shè)置定位，即靜態(tài)定位是默認(rèn)狀態(tài)的定位。

?

?相對(duì)定位 position:relative

相對(duì)定位不脫離文檔流，可以調(diào)整元素。定位以該元素原來(lái)的位置為參考點(diǎn)，原來(lái)位置所占區(qū)域不脫離文本流。

絕對(duì)定位 子絕父相

?

?固定定位 position:fixed

?浮動(dòng)和定位給行內(nèi)元素帶來(lái)的影響

　　總結(jié)一句話，只要是脫離了標(biāo)準(zhǔn)文本流的行內(nèi)元素，它的寬高就可以被修改。

z-index

　　該屬性用于解決不同定位元素之間的壓蓋現(xiàn)象，屬性的值為整數(shù)，數(shù)值大的壓蓋數(shù)值小的元素，只能用于已經(jīng)定位的元素。

從父現(xiàn)象

　如果兩個(gè)同級(jí)元素各自有自己定位的父級(jí)元素，則z-index越大的父級(jí)壓蓋另外的父級(jí)，就是所說(shuō)的從父現(xiàn)象。

css背景屬性

屬性總覽

?

?

?background-position詳解

　　除了使用px定位，還可使用關(guān)鍵字、百分比等定位，其中百分比定位于之前的絕對(duì)定位等不同，具體為水平百分比的值 = 容器寬度的百分比 - 背景圖片的百分比

?

?示例：MIUI大圖居中顯示，代碼如下，實(shí)際應(yīng)用的代碼為注釋代碼的簡(jiǎn)寫(xiě)，一般X-Y都可以用X的簡(jiǎn)寫(xiě)來(lái)實(shí)現(xiàn)。

?

?雪碧圖技術(shù)

　　雪碧圖技術(shù)，就是將頁(yè)面中一些不隨著用戶需求而改變的類似圖標(biāo)的小圖合成一個(gè)大圖，通過(guò)定位去截取獲取圖標(biāo)的技術(shù)，這樣可以減少頁(yè)面請(qǐng)求次數(shù)（因?yàn)槊恳淮谓㈡溄有枰獣r(shí)間），提高網(wǎng)頁(yè)性能。

示例代碼：

?

?快速修改背景圖的縮放比例，注意，將大圖比例縮小之后，其他定位的比例也需要等比縮小

?

?雪碧圖技術(shù)的項(xiàng)目示例中，小的選項(xiàng)的列表重合部分可以使用圖片邊框顏色調(diào)透明來(lái)實(shí)現(xiàn)不重疊的現(xiàn)象。

?

?通過(guò)border-radius實(shí)現(xiàn)圓，半圓等圖形

?

邊框陰影

可參考此網(wǎng)站:https://www.html.cn/tool/css3Preview/Box-Shadow.html

css命名規(guī)范

http://www.divcss5.com/jiqiao/j4.shtml#no3

各類元素的居中方式

行內(nèi)元素水平垂直居中

?

其中方法二是將元素設(shè)置成單元格的形式，從而實(shí)現(xiàn)居中效果的。

塊級(jí)元素水平垂直居中的方法

方法一：通過(guò)定位position加margin:auto的方法實(shí)現(xiàn)，實(shí)現(xiàn)水平或者垂直只需其中兩個(gè)屬性即可。

.box1{width: 200px;height: 200px;background: green;position: relative;}.box2{width: 100px;height: 100px;background: red;position: absolute;margin: auto;top: 0;right: 0;left: 0;bottom: 0;}

方法二：通過(guò)設(shè)置單元格的模式居中，但是子元素必須是行內(nèi)塊標(biāo)簽

?

?

?

?方法三：通過(guò)設(shè)置具體像素實(shí)現(xiàn)定位，使用較多的一種方式

?

轉(zhuǎn)載于:https://www.cnblogs.com/swearBM/p/11490643.html

總結(jié)

以上是生活随笔為你收集整理的前端之css基础学习（更正版）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。