CSS屬性進階詳解
阿新 • • 發佈:2018-12-10
1.文字常用樣式屬性進階:
-
text-align 設定文字水平對齊方式,如text-align:center 設定文字水平居中
-
text-indent 設定文字首行縮排,如:text-indent:32px; 設定文字首行縮排32px
CSS部分:
HTML部分:
你好世界
大頭兒子小頭爸爸 一對好朋友 快樂父子倆 兒子的頭大手兒小 爸爸的頭小手兒很大 大手牽小手 走路不怕滑 走呀走呀走 走 走 轉眼兒子就長大 轉眼兒子就長大
- display屬性
作用: 第一個決定了當前元素是否應該顯示, 第二個決定了當前元素應該以什麼型別顯示
display 屬性規定元素應該生成的框的型別。
display 的預設屬性值是 inline, 此元素會被顯示為內聯元素
display屬性是用來設定元素的型別及隱藏的,常用的屬性有:
-
none 元素隱藏且不佔位置
-
block 此元素會被顯示為塊元素
-
inline 此元素會被顯示為內聯元素
-
inline-block 行內塊元素 ( 瞭解 )
CSS部分:
HTML部分:
我是要成為海賊王的男人 海賊王下面的div<a href="#">這是第一個連結</a> <a href="#">這是第二個連結</a> <p class="pbox" style="display:block"> 葫蘆娃 葫蘆娃 一根藤上七朵花 小小樹藤是我家 啦啦啦啦 叮噹當咚咚噹噹 澆不大 叮噹當咚咚噹噹 是我家 啦啦啦啦 </p>
補充: ( 瞭解 )
font:
font: 樣式屬性是一個集合, 可以吧關於 font 的都放到這個屬性裡面:
使用方法:
<style>
div {
font: bold italic 18px/20px arial;
}
</style>
HTML部分:
<div>這是div裡面的文字</div>
其中: arial 是一種字型, 和 微軟雅黑一樣.
font-size 和 font-family 的值是必需的。
- font-style 定義字型的風格
- normal: 正常
- italic: 瀏覽器會顯示一個2斜體的字型樣式。
- font-variant 能把字型變小一號並且全大寫顯示 small-caps 變小一號並且全大寫顯示 normal 正常
- font-weight 是否加粗 bold 是加粗 normal 正常
- font-size/line-height 字型大小 / 行高大小
- font-family 字型型別