記錄 前端入門之css 一

2021-09-29 16:41:59 字數 1464 閱讀 4847

css是一種層疊樣式表檔案 /

標籤選擇器: div{}

類名選擇器: .box{}

id選擇器: #boxid{}

body,ul,ol

假如在ul下面的li中巢狀乙個ol>li,像下面:

直接子代選擇器 (  ul>li {}  ):只能定位到ul下面的li,不能定位到ol下面的li.

間接後代選擇器(  ul li {}  ): 能定位到ul下面的li跟ol下面的li. 就是說間接後代選擇器可以選擇到父元素的兩個括號中間的所有為該命名的後代屬性.

div.img

自定義屬性

京東

hello1

hello2

hello3

hello4

hello5

css的層疊性最重要的就是權重問題,當有多個選擇器選上了某個元素的時候,需要通過就算權重才能決定最終顯示的是哪個樣式,就是通過計算id數量,類的數量,標籤的數量。一般都假設乙個id為100,乙個類(class)為10,乙個標籤為1.

青春無極限		 

上面的例子最終顯示的就是綠色的(green),綠色的權重最高121,假如將綠色的注釋掉顯示的就是藍色的.

如果權重一樣,最終顯示的就是最後出現的那個.

如果想要指定乙個屬性跳過權重計算直接顯示想要的樣式可以在屬性值後面的分號前加上"!important" . important 的英文意思是重要的,所以這裡不難理解, 加上之後這個屬性的權重值就是無窮大的,

注意: !important提公升的是乙個屬性,而不是乙個選擇器.

有些屬性,當自己設定的時候,自己的後代都繼承上了,這就是繼承性。

哪些屬性可以繼承?

color、text開頭的、line-開頭的、font-開頭的

關於文字樣式的都可以繼承,所有關於盒子定位的布局的屬性包括內邊距外邊距都不能繼承。

外邊距塌陷: 假如外層盒子又內層盒子撐開, 內層盒子的外邊距撐不開外層盒子的寬高就叫外邊距塌陷

外邊距重疊: 假如同時給兩個盒子上下的外邊距,兩個盒子上下之間的間距只能由其中的外邊距大的決定,不會兩個相加.

font-size 字型大小

font-style  字型樣式

font-weight  字型粗細

font-family  字型名稱

font-family: 中文名稱/英文名稱/unicode編碼

color  字型顏色

font: 字型粗細  字型大小/行高  字型名稱

font:800 1em/50px '\5b8b\4f53';

前端學習之CSS入門

這幾天正巧碰上好多事,只能斷斷續續的學習,並且確實也懈怠了不少。自學麼,總是會碰到各種問題的,不能全身心的投入到學習中去,進度也比較慢,更多的要靠自己的自控能力,所以說,沒有自制力的人還是要報班學習啊。而我呢,就是想挑戰下自己,並且鍛鍊下自己。加油吧!用了快兩周多的時間才更新,下一步我要端正下自己的...

前端之CSS(一)

css是cascading style sheets,層疊樣式表,高大上的說法是用來控制網頁資料的表現,可以使網頁的表現與資料內容分離。通俗來講,就是用各種盒子的堆疊實現我們想要的html頁面,武sir說招聘的時候都不說招前端,而是招div css,我覺得很貼切。1.行內式 background c...

前端 CSS 記錄

我的專案終於又走到了頁面設計階段,我又感受到了原來被頁面設計支配的感覺。色彩配置上來回糾結了好久,最終決定,按照原思路做,糾結浪費時間。暫時的效果是這樣的 最近一直在考慮我專案對不同尺寸介面的適應問題,暫時不想去弄bootstrap 終於用css的 calc 方法將我的低效的自適應介面準備出來了。c...