前端 CSS屬性相關

2022-06-13 09:00:10 字數 3580 閱讀 1509

width:屬性可以為標籤設定寬度

height:屬性可以為標籤設定高度

注意:塊級標籤才能設定寬度,行內標籤的寬度由內容決定

文字型別

font-family可以選擇文字的型別(比如:微軟雅黑、宋體、楷體……)

p
字型大小

font-size:控制字型大小

p
字重(粗細)

font-weight:用來設定字型的字重(粗細)

有這幾個屬性值

normal:預設值,標準粗細

bold:粗體

bolder:更粗

lighter:更細

100-900:設定具體粗細,400等同於normal,而700等同於bold

inherit:繼承父類元素字型的粗細值

p
字型顏色

設定字型顏色有三種方式

p
對齊方式

text-align:屬性規定標籤內的文字的水平對齊方式

p
文字裝飾

text-decoration:用來給字型新增特殊效果

underline:文字下加一條線

overline:文字上加一條線

line-through:為文字加一條從中間穿過的線

inherit:繼承父標籤的text-decoration屬性值

p
首行縮排

text-indent:將段落的第一行縮排xx畫素

p
可以使用純色和當做背景

background-color:用來設定背景顏色

background-repeat:用來設定背景是否平鋪,預設repeat:平鋪,no-repeat:不平鋪、repeat-x:水平方向平鋪、repeat-y:垂直方向平鋪

上面的這些屬性都可以彙總簡寫到:background

.c1
背景小案例

邊框屬性

邊框有四邊分別是left,top,right,bottom

border-color:邊框顏色

border-width:邊框粗細

div
通過border-radius可以實現圓角邊框

div
display用於控制html標籤的顯示效果

display:"none"與visibility:"hidden"的區別

visibility:hidden: 可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。

display:none: 可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。

盒子模型中包含了border(邊框)、margin(外邊距)、padding(內邊距/內填充)以及標籤(也稱之為元素)

margin:外邊距,設定標籤與標籤之間的距離

border:邊框,標籤的邊框

padding:內邊距,標籤內部文字與邊框之間的距離

margin-外邊距屬性

.d1 

.d2

#d2

ps:一般瀏覽器都會自動給body標籤增加8px的外邊距,如果需要,需要我們自己取消

網頁內的便簽都水平居中,則通過設定margin處理

margin: 0 auto; /*水平居中*/
padding內填充

.d1 

.d2

#d2

在css中,任何元素都可以浮動

浮動元素會產生乙個塊級框,二不論它本事是何種元素

關於浮動的兩個特點

三種取值

left:向左浮動

right:向右浮動

none:預設值,不浮動

詳情:

clear屬性規定元素的哪一側不允許其他浮動元素

描述

left

在左側不允許浮動元素

right

在右側不允許浮動元素

both

在左右兩側不允許浮動元素

none

預設值,允許浮動元素出現在兩側

inherit

規定應該從父元素繼承 clear 屬性的值。

ps:clear屬性只會對自身起作用,而不會影響其他元素。

清除浮動的***(父標籤塌陷問題

主要有三種方式:

偽元素清除法(使用較多)

.clearfix:after

描述visible

預設值。內容不會被修剪,會呈現在元素框之外。

hidden

內容會被修剪,並且其餘內容是不可見的。

scroll

內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。

body 

.c1

img

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

css字型屬性相關。

出處 css 參考手冊 說明 這個屬性允許對文字設定某種效果,如加下劃線。如果後代元素沒有自己的裝飾,祖先元素上設定的裝飾會 延伸 到後代元素中。不要求使用者 支援 blink。可能的值 描述 none 預設。定義標準的文字。underline 定義文字下的一條線。overline 定義文字上的一條...

day05 css屬性相關筆記

1 預定義顏色 bule,red,black。2 十六進製制顏色 0f0f0f 3 rgb顏色 128,0,0 全紅 4 rgba 在rgb的基礎上又新增了表示透明度的alpha 5 hsi 用色調 飽和度 和透明度三個分量來表示顏色 6 hsla 在his的基礎上又新增了表示透明度的alpha 實...