CSS學習筆記 三 樣式宣告

2021-09-10 16:35:21 字數 3497 閱讀 1108

在這篇文章中你能看到有關於 css 樣式設定的常用屬性

(1)背景顏色

可以使用background-color屬性為元素設定背景顏色,它接受任何合法的顏色值,預設是transparent

注意,background-color 屬性不能繼承

(2)背景

可以使用background-image屬性為元素設定背景,它接受任何合法的 url,預設是none

注意,background-image 屬性不能繼承

(3)背景重複

可以使用background-repeat屬性對背景影象進行平鋪,其可選值如下:

(4)背景位置

可以使用background-position屬性改變影象的位置,其可選值如下:

(5)背景大小

可以使用background-size屬性改變影象的大小,其可選值如下:

>

>

>

body

style

>

head

>

>

>

面朝大海,春暖花開h3

>

body

>

html

>

(1)文字顏色

可以使用color屬性設定文字顏色,它接受任何合法的顏色值

(2)行間間隔

可以使用line-height屬性設定行間的距離,其可選值如下:

(3)字間間隔

可以使用letter-spacing屬性改變字間的間隔,其可選值如下:

(4)文字對齊

可以使用text-align屬性控制元素中的文字對齊方式,其可選值如下:

(5)處理空白

可以使用white-space屬性定義處理空白的規則,這裡的空白指的是空格和回車,其可選值如下:

>

>

>

.title

.author

.contain

style

>

head

>

>

class

="title"

>

面朝大海,春暖花開h3

>

class

="author"

>

—— 海子

p>

class

="contain"

>

從明天起,做乙個幸福的人

喂馬,劈柴,周遊世界

從明天起,關心糧食和蔬菜

我有一所房子,面朝大海,春暖花開

從明天起,和每乙個親人通訊

告訴他們我的幸福

那幸福的閃電告訴我的

我將告訴每乙個人

給每一條河每一座山取乙個溫暖的名字

陌生人,我也為你祝福

願你有乙個燦爛的前程

願你有情人終成眷屬

願你在塵世獲得幸福

我只願面朝大海,春暖花開

p>

body

>

html

>

(6)文字陰影

可以使用text-shadow屬性設定文字陰影效果,其可選值如下:

>

>

>

h1style

>

head

>

>

>

你好,世界h1

>

body

>

html

>

(7)文字修剪

可以使用text-overflow屬性規定當文字溢位時發生的動作,其可選值如下:

>

>

>

divstyle

>

head

>

>

>

如果這是一段很長很長的文字,那麼就會溢位div

>

body

>

html

>

(1)字型系列

可以使用font-family屬性指定字型系列,在 css 中存在兩種字型系列:

(2)字型風格

可以使用font-style屬性設定字型風格,其可選值如下:

(3)字型加粗

可以使用font-weight屬性設定字型粗細,其可選值如下:

(4)字型大小

可以使用font-size屬性設定字型大小,其可選值如下:

>

>

>

正常文字p

>

style

="font-family

: cursive

">

草書p>

style

="font-style

: italic

">

斜體p>

style

="font-weight

: bold

">

粗體p>

style

="font-size

: large

">

大字p>

body

>

html

>

(1)顏色

可以使用outline-color屬性設定輪廓顏色,它接受任何合法的顏色值

(2)樣式

可以使用outline-style屬性設定輪廓樣式,其可選值如下:

(3)寬度

可以使用outline-width屬性設定輪廓寬度,其可選值如下:

(4)簡寫屬性

為了方便,我們可以只在outline屬性中設定所有有關輪廓的屬性,它們的排列順序如下:

>

>

h1style

>

>

>

面 朝 大 海 , 春 暖 花 開 h1

>

body

>

html

>

CSS 知識整理 三 樣式

目錄 css 知識整理 三 樣式 一 字型 二 文字 三 列表 四 背景 css 列表屬性允許你放置 改變列表項標誌,或者將影象作為列表項標誌。設定列表項標誌為實心圓 空心圓 方形 設定列表項標誌為一張 可設定是重複排滿背景還是其他 這個比較簡單,可現用現查 舉個例子 李白噫籲嚱,危乎高哉!蜀道之難...

MVC框架(三)樣式和布局

部分 3 新增樣式和統一的外觀 布局 檔案 layout.cshtml 表示應用程式中每個頁面的布局。它位於 views 資料夾中的 shared 資料夾。開啟這個檔案,把其內容替換為 renderbody 在上面的 中,html 幫助器用於修改 html 輸出 url.content url 內容...

Vue語法基礎三(樣式繫結)

vue繫結樣式有繫結class和繫結style兩種方式,這兩種方式都有物件語法和陣列語法。一 class繫結 1.1 物件語法 使用js物件的方式,也就是key value的方式,給元素的class屬性繫結樣式,其中key是樣式,value控制key樣式是否有效,value是個布林值。style d...