前端加油鴨! FCC CSS基礎(1)

2021-09-25 08:23:08 字數 3115 閱讀 3722

元素選擇器

在css中建立乙個style元素,在這個style元素內, 可以為所有的h2元素建立乙個元素選擇器。如下,將所有的h2元素設定為紅色:

一定要在屬性值的後面加上分號;類選擇器

宣告乙個類選擇器,名為blue-text

將該類選擇器應用於html的元素中

在css中,類選擇器應該新增.為字首;而在html中,class屬性不能新增.為字首。

這是因為在css中如果類選擇器前不新增.瀏覽器就會誤認為類選擇器是乙個元素選擇器。

id屬性與id選擇器

除了 class屬性之外,每乙個 html 元素還可以使用 id 屬性。

使用 id 屬性有若干好處,一旦當你開始使用 jquery 的時候你會有更深的體會。

id 屬性應該是唯一的,雖然瀏覽器並不強制唯一,但基於最佳實踐,這一點是被廣泛認可的,所以請不要給乙個以上的元素設定相同的 id 屬性。

和類選擇器一樣,id選擇器也可用來宣告樣式。

#cat-photo-element
注意:在 style 元素內部,定義類選擇器必須新增.為字首,定義id選擇器必須新增#為字首。

匯入新字型

link元素用於引入,現在即可將lobster作為 font-family屬性的值應用到元素中

有幾種預設的字型是所有瀏覽器都可用的,包括monospace、serif和sans-serif。

當某種字型不可用時,你可以讓瀏覽器自動降級到另一種字型。

例如,如果你想讓段落的字型為helvetica,但你同時想在helvetica字型不可用時自動降級使用sans-serif字型,可以使用如下css樣式:

p
層元素

div元素,也被稱作division(層)元素,是乙個盛裝其他元素的通用容器。

所以可以利用css的繼承關係把div上的css傳遞給它所有子元素。開始標記結束標記

乙個層中可包括多個元素。通過設定層元素的屬性,可實現層內元素的屬性批量修改。

設定元素尺寸

css包含乙個控制元素寬度的width屬性。像控制字型一樣,我們使用px(畫素)來指定的寬度。

例如,如果我們想要建立乙個名為larger-image的類選擇器,把html元素的寬度設定為500畫素,我們使用:

高度height的百分比相對于父元素的高度,而父元素預設是沒有高度的 。如果不給父元素乙個高度,子元素也不會有高度。padding-bottom 和padding-top 的百分比是相對于父元素的寬度,而不是高度。

在普通文件流中,塊級元素的寬度預設是瀏覽器的寬度,因此設定了padding-top 或者padding-bottom 百分比的子元素,其高度就不再依賴於父元素高度了。由於padding-bottom 和padding-top 的百分比是相對于父元素的寬度,當螢幕大小出現變化時,元素基於padding-top或者padding-bottom的高度也會隨著寬度的變化而等比例的縮放。

單獨對某個元素設定高度百分比沒有效果

設定元素邊框

css 邊框的屬性有style(樣式)、color(顏色)、width(寬度)、height(高度)等。

舉個例子,如果我們想要讓乙個html元素的邊框顏色為紅色、邊框寬度為5畫素(px)、邊框樣式為固體(solid),**如下:

可以應用多個class到乙個元素,只需要在多個class之間用空格分開即可。如:

border-radius(邊框半徑)屬性可使邊框變成圓的。

使用畫素或百分比來指定border-radius的屬性值,0—50%弧度逐漸向⚪形變化,50%以上保持⚪形不變

設定元素背景

background-color 屬性用來設定乙個元素的背景顏色。

html元素布局

有三個影響html元素布局的重要屬性:padding(內邊距)、margin(外邊距)、border(邊框)。

元素的 padding 控制元素內容 content和元素邊框 border 之間的距離。

元素的外邊距 margin 控制元素邊框 border 和元素實際所佔空間的距離。如果你將乙個元素的 margin 設定為負值,元素將會變大。盒子模型的乙個外邊距margin是有乙個預設的8px,只要設定成margin:0,就可以貼邊;

css 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left來控制元素上右下左四個方向的 padding。使元素的每乙個邊具有不同的 padding。margin同理

display: inline-block;支援樣式的換行

css繼承

每乙個 html 頁面都有乙個 body 元素,並且其 body 元素同樣能夠應用樣式。

有時你的 html 元素會得到相互衝突的多個樣式。

優先權:關鍵字!important>內聯》id屬性》class具有更高的優先權》body元素中宣告

部分中 class宣告的順序非常重要,第二個宣告總是比第乙個具有優先權

顏色表示

英文表示:如red、green、pink、black等;

十六進製制顏色表示: black表示為#000000 每兩位分別表示紅色、綠色和藍色

0表示完全缺失,f表示最大可能的亮度

十六進製制顏色可以被縮短 如紅色ff0000可縮為f00

rgb值顏色表示: 黑色表示為(0,0,0) 白色(255,255,255)

前端基礎1

目錄 介紹 html整體架構 標籤http的兩種常見方式 編寫html 執行方式 pycharm開啟網頁 本地找到網頁,開啟即可看到效果 真實的內容 直譯器 html5 直譯器 html4 head中的標籤 meta描述網頁元資訊 字元編碼 seo title 欠欠回到目錄 分類 單閉合標籤 自閉和...

前端面試 前端基礎面1

1.網路七層模型 2.tcp udp 區別,tcp怎麼實現可靠傳輸 4.死鎖 5.http https1.span的padding margin 2.垂直居中方法 不僅限於flex 1.陣列reduce和map 2.解決0.1 0.2不準確的問題 3.判斷單項鍊表是否有環 參考自 現代作業系統 1....

前端基礎 js1

break 直接跳出當前迴圈或者乙個switch語句。如果你的迴圈是巢狀的,需要逐步使用break跳出。for var b 1 b 20 b document.writeln b 輸出1 11 以上 在b 12的時候就結束循壞。continue 終止當前的一次迴圈過程,不跳出迴圈,繼續往下判斷循壞條...