CSS回顧（基礎(chǔ)知識(shí)，元素，選擇器，盒子，顏色）

番茄西紅柿發(fā)布于2019-04-23 13:15 / 3158人閱讀

摘要：元素分類行級(jí)元素內(nèi)聯(lián)元素特征內(nèi)容決定元素所占位置，不可以通過(guò)改變寬高塊級(jí)元素特征獨(dú)占一行，可以通過(guò)改變寬高行級(jí)塊元素特征內(nèi)容決定大小，可以改變寬高選擇器類型通用的，沒(méi)寫(xiě)那些偽類父子選擇器派生選擇器有父子關(guān)系的幾個(gè)元素組成的選擇器，下的所有

元素分類：

1.行級(jí)元素：內(nèi)聯(lián)元素 inline

特征：內(nèi)容決定元素所占位置，不可以通過(guò)CSS改變寬高

span strong em a del

2.塊級(jí)元素：block特征：獨(dú)占一行，可以通過(guò)CSS改變寬高

div p ul li ol form address

3.行級(jí)塊元素：inline-block

特征：內(nèi)容決定大小，可以改變寬高

選擇器類型（通用的，沒(méi)寫(xiě)那些偽類）：

父子選擇器（派生選擇器）

div em {margin:0px} 有父子關(guān)系的幾個(gè)元素組成的選擇器，div下的所有em子孫

直接子元素選擇器

div>em { margin:0 } 表示的是div下的直接子元素

并列選擇器

div.red{ color:green } 表示并列關(guān)系

權(quán)重值比較：內(nèi)聯(lián)樣式，1000

id :100 class:10 標(biāo)簽:1 *:0 ，!important是無(wú)窮大權(quán)重,但是如果!important+1則要更大

分組選擇器

.demo{} .red{}

！！解決圖片間隔 margin-left:-6px

盒子組成部分：

盒子壁 border

內(nèi)邊距 padding

盒子內(nèi)容 width+weigth

margin+border+padding+content

顏色：

1.純英文單詞 red,green

2.顏色代碼 #00ff22

3.顏色函數(shù)　　rgb(00,ff ,ff)

rgb()表示光的三原色，red, green ,blue

GPU云服務(wù)器云服務(wù)器基礎(chǔ)選擇器css 元素選擇器 extjs顏色選擇器 css選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1637.html

相關(guān)文章

前端基礎(chǔ)入門二（CSS）

摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問(wèn)題比如使用的選擇器命名，在是無(wú)效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來(lái)表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評(píng)論0 收藏0
[譯]HTML&CSS Lesson4: 盒子模型

摘要：而內(nèi)聯(lián)元素會(huì)并排顯示，寬度緊隨內(nèi)容變化而變化。但元素又按照內(nèi)聯(lián)元素顯示，不會(huì)另起一行。這種情況下，只能指定非內(nèi)聯(lián)元素的屬性值。如下是為非內(nèi)聯(lián)元素設(shè)置寬度的例子高度元素的默認(rèn)高度取決于它的內(nèi)容。現(xiàn)在我們已經(jīng)熟悉了HTML和CSS。了解了它的基礎(chǔ)。現(xiàn)在我們來(lái)更深入的了解元素在頁(yè)面中的呈現(xiàn)和大小。在這節(jié)課中，我們將會(huì)討論什么是盒子模型，它的工作模式是怎樣的。我們也會(huì)在課程中學(xué)習(xí)一些新的C...

yzd 2019-08-01 17:21 評(píng)論0 收藏0
[譯]HTML&CSS Lesson4: 盒子模型

摘要：而內(nèi)聯(lián)元素會(huì)并排顯示，寬度緊隨內(nèi)容變化而變化。但元素又按照內(nèi)聯(lián)元素顯示，不會(huì)另起一行。這種情況下，只能指定非內(nèi)聯(lián)元素的屬性值。如下是為非內(nèi)聯(lián)元素設(shè)置寬度的例子高度元素的默認(rèn)高度取決于它的內(nèi)容。現(xiàn)在我們已經(jīng)熟悉了HTML和CSS。了解了它的基礎(chǔ)。現(xiàn)在我們來(lái)更深入的了解元素在頁(yè)面中的呈現(xiàn)和大小。在這節(jié)課中，我們將會(huì)討論什么是盒子模型，它的工作模式是怎樣的。我們也會(huì)在課程中學(xué)習(xí)一些新的C...

developerworks 2019-08-29 13:04 評(píng)論0 收藏0
JavaWEB開(kāi)發(fā)02——CSS&JS

摘要：今日目標(biāo)使用完成網(wǎng)站首頁(yè)的優(yōu)化使用完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語(yǔ)法，數(shù)據(jù)類型，能夠使用完成簡(jiǎn)單的頁(yè) 今日目標(biāo) 使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化使用CSS完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果教學(xué)目標(biāo)：了解...

MorePainMoreGain 2019-08-29 17:03 評(píng)論0 收藏0
JavaWEB開(kāi)發(fā)02——CSS&JS

摘要：今日目標(biāo)使用完成網(wǎng)站首頁(yè)的優(yōu)化使用完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語(yǔ)法，數(shù)據(jù)類型，能夠使用完成簡(jiǎn)單的頁(yè) 今日目標(biāo) 使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化使用CSS完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果教學(xué)目標(biāo)：了解...

高勝山 2019-08-02 11:49 評(píng)論0 收藏0