在這篇文章中你能看到有關於 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...