CSS基礎屬性

2021-08-03 20:02:31 字數 4236 閱讀 7622

字型有以下相關屬性:

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的尺寸...