常見CSS樣式詳解

2021-10-07 10:34:39 字數 2663 閱讀 5608

背景基本屬性

background: 「 顏色」 url(「位址」) 是否(重複)平鋪 的水平位置 的垂直位置 (如果不需要顏色,就可以不加)

注:背景設定後,一般需要設定background-size

在我們開發中,有時要開發一種半透明的效果,這時我們可能會用到opacity, 但是,這樣會有乙個問題,就是當乙個父元素的opacity設定為半透明的時候,子元素也會變成半透明 ,這時就可以用到:

==>設定透明的背景色 background-color:rgba(); 填寫4個值,前三個數字,指的是rgb的顏色,最後乙個數字是透明度(0-1)

文字顏色

color: 「」

顏色屬性: 十六進製制-eg: #ff0000; 乙個rgb值-eg: rgb(255, 0, 0)

顏色的名稱-eg: red

文字對齊方式

text-align: 「」

文字居中: center 文字對齊到左: left

文字對齊到右: right

文字修飾

文字縮排

指定文字的第一行的縮排。

行高

line-height: 「50px」 指定文字一行文字的行間距, (當設定為1時,高度=字型大小)

字體系類

fong-family:「宋體」

字型大小

font-size:14px

字型粗細

font-weight: normal (正常)

bold (粗體字元)

bolder(更粗的字元)

100–900

border-collapse: collapse

設定**的邊框是否被摺疊成乙個單一的邊框或隔開

使用前

使用後

border-style: 邊框樣式 none (無邊框)

solid ( 實線邊框)

dashed (虛線邊框)

border-color: 邊框顏色

簡寫屬性:(常用)

border: 邊框的粗細 邊框的樣式 邊框的顏色

也可以是只顯示一邊: border-top:

border-bottom

border-right

border-left

(1)display:none

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

這是乙個可見標題

注意:例項中的隱藏標題不占用空間

(2)visibility:hidden

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

這是乙個可見標題

注意:例項中的隱藏標題仍然占用空間

list-style:none

使用前

使用後

text-decoration:none

使用前使用後

outline: none

input聚焦外層自帶的藍框

將超出區域的文字變為省略號,可以使用以下屬性:

1.強制文字單行顯示:white-space:nowrap;

2.設定溢位文字顯示為省略標記:text-overflow:ellipsis;

3.設定溢位隱藏:overflow:hidden;

Css樣式 文字樣式詳解

文字樣式包括所謂的文字縮排 text indent 水平對齊 text align center left right 字間隔和字母間距 字元轉換 text transform等 1.文字縮排 text indent 如下 p 1.實用負值 設定負值時要當心,如果對乙個段落設定了負值,那麼首行的某些...

常見CSS樣式寫法

1 寬高 1 如按鈕盒子的高度和寬度設定為 width 0.3rem height 0.3rem 2 如果是簡單的div和以及p的組合,則最外層div的padding可設定為0.2 0 可設定為 1.8 1.8 半徑12 設定背景色。padding 0 0 0 0.2 p的話,一般設定margin ...

常見的CSS樣式

常見的css樣式 color 文字顏色 background color 背景顏色 opacity 設定透明度 顏色 光的三原色 紅 綠 藍 三種顏色表示法 名詞表示法 red green blue 16進製制顏色表示法 000000 十六進製制 0 f ff 紅色 00 綠色 00 藍色 十進位制...