字型有以下相關屬性:
font-size:字型大小
font-family:字型型別
font-style:字形(斜體等)
font-variant:字型變化(如大寫)
font-weight:字型粗細
也可以簡寫為,但必須按以下順序排序:
font-style font-variant font-weight font-size font-family
前面三個可預設,使用預設值,foot-size和font-family必須指定值。
font: 60px 楷體;
文字相關屬性主要包括顏色、對齊方式、修飾效果等。
color:設定文字的顏色。
text-decoration有以下屬性:
none:預設值,沒有裝飾效果,
underline:加下劃線,
overline:加上劃線,
line-through:加刪除線。
text-shadow:增加陰影,比如text-shadow:-5px -5px gray的含義是定義乙個灰色的背景,其水平方向上左移5px,垂直方向上移5px。
direction有兩個屬性:ltr:自左至右;rtl自右至左。
text-align:文字對齊方式,有以下屬性:
left:左對齊,
righe:右對齊,
center:居中對齊,
justify:兩端對齊。
vertical——align:文字垂直對齊方式,有以下屬性:
top:靠上對齊,
buttom:靠下對齊,
middle:垂直居中對齊,
text-indent:文字縮排。
letter-spacing:字元之間的間距。
word-spacing:字(單詞)間距。
line-height:設定行高,實際上是調整行間距。
body
background-color:背景色
background-image:設定背景,需要設定的url位址
background-repeat:的複製選項
(1)repeat:在水平和垂直兩個方向上進行複製
(2)no-repeat:不複製
(3)repeat-x:在水平方向上覆制
(4)repeat-y:在垂直方向上覆制
background-position:背景的位置
也可以將這一組屬性值封裝到乙個屬性background中,表達更加簡潔,書寫順序是:background-color background-image background-repeat background-position:
height:高度,
width:寬度
max-width:最大寬度
max-height:最大高度
min-width:最小寬度
min-height:最小高度
隱藏元素的方法:
(1)visibility:hidden,僅僅隱藏內容,該元素所佔位置依然存在;
(2)display:none,不僅隱藏內容,且不佔位置
div
而且display屬性可以設定元素的顯示模式,可以將塊級元素和內聯元素之間的轉換
li
span
inline:將塊級元素以內聯元素形式顯示,此時width和height屬性無效,其空間取決於元素的內容。
inline-block:將塊級元素以內聯元素形式顯示,同時兼具塊級元素的某些特徵,比如可以使用width和height設定所佔位置的大小
block:將內聯元素以塊級元素形式來顯示,即display:block。
盒子模型有三個主要屬性:
margin:外邊距,與margin關聯的有margin-top、margin-right、margin-bottom、margin-left
margin的使用方式
(1)margin:30px;表示上下左右外邊距都為30px;
(2)margin-left:30px;單獨設定上下左右外邊距
(3)margin:10px、20px、30px、40px:分別設定上右下左四個邊距為10px 20px 30px 40px
padding:內邊距,與padding關聯的有padding-top、padding-right、padding-bottom、padding-left
padding的使用方式和和margin類似
border:邊框
border有兩種寫法:
(1)border: 1px dashed #ffa7ac;
(2)border-width:邊框寬度
(3)border-style:邊框線條型別
(4)border-color:邊框的顏色
outline:邊框的輪廓線,用法同border
定位方式有:static、fixed、relative、absolute
static:靜態定位(預設)
無定位,元素正常出現了流中,不受left、right、top、bottom影響
div
fixed:固定定位
body>fix定位會將元素從流中「摘」出來單獨進行定位,定位取決於left、top。
重新定位之後可能會出現重疊,通過z-index可以調整順序,但是靜態定位z-index無效
relative:相對定位
body>相對定位是從原有位置進行位移,但並不影響後續位置。
absolute:絕對定位
body>絕對定位的元素將從流中被「摘」出來依靠left、top屬性進行定位。
與fixed類似,但是參照物不同,fixe參照元素(html),absolute參照父容器
CSS基礎屬性
background color red p 文字相關屬性 文字相關屬性主要包括顏色 對齊方式 修飾效果等 none 預設值 eg text decoration line through underline 加下劃線 overline 加上劃線 line through 加刪除線 text sha...
CSS基礎屬性2
屬性名 屬性值 background color red p 2.1字型相關屬性 font family 字型名稱 font size 字型大小 font style 字形 斜體等 font variaus 字型變化 font variant 字型變化 如大寫 font weight 100 字型粗...
css基礎 font link list屬性
1 字型 2字型系列 font family 3字型樣式 font style normal 預設 italic 斜體 oblique 傾斜的字型 4字型大小 font size 5字型的粗細 font weight normal 預設 bold 定義大小數字67 8用em來設定字型大小,em的尺寸...