CSS基礎屬性2

2021-08-03 18:29:05 字數 2729 閱讀 4067

屬性名:屬性值

background-color:red

p 2.1字型相關屬性

font-family:字型名稱

font-size:字型大小

font-style:字形(斜體等)

font-variaus:字型變化

font-variant:字型變化(如大寫)

font-weight: 100;字型粗細

italic:斜體

type="text/css">

pstyle>

可以簡寫,書寫循序

font-style: font-variant: font-weight: font-size: font-family:

前面三個不可去缺,使用預設值,font-size:和font-family:必須指定值。

p

2.2文字相關屬性

主演包括顏色、對齊方式、修飾效果等。

color設定文字的顏色

text-decoration文字的修飾

none:預設值,沒有修飾效果;

uaderline:加下劃線;

overline:加上劃線;

line-through:加刪除線;

text-shadow:增加陰影。比如text-shadow: 5px 20px blue的含義是定義乙個綠色的背景,其水平方向上左移5px,垂直向上上移10px。

direction:文字的方向:

text-align:文字對其方式:

vertical-align:文字垂直對其方式:

text-indent:文字縮排

letter-spacing:字元之間的間距

word-spacing:字(單詞)間距

line-height:設定行高,實際上是調整行間距

2.3 背景相關屬性

body

background-color:背景色;

background-image:設定背景,需要設定的url位址;

background-repeat:的複製選項;

repeat:在水平和垂直兩個方向上進行複製;

no-repeat:不複製;

repeat-x:在水平方向上覆制;

repeat-y:在垂直方向上覆制;

也可以將這一組屬性值封裝到乙個屬性background中,書寫書序是:背景色background-color;

背景background-image;

重複方式background-repeat;

位置backgroud-position;

表達更加簡潔

body>max-width:最大寬度

max-height:最大高度

min-width:最小寬度

min-height:最小高度

2.5顯示相關屬性

隱藏元素的方法

(1)visibility:hidden:僅僅隱藏內容,該元素所佔位置依然存在;

(2)display:none:(顯示為空)不僅隱藏內容,還隱藏元素所

divplay可以設定元素的顯示模式

inline;將塊級元素以內聯元素顯示,此刻width和height屬性無效,其空間取決於元素的內容。

inline-block將塊級元素以內聯元素形式顯示,同時兼具塊級元素的某些特徵,比如可以使用width和height設定所佔位置大小。

type="text/css">

li span

style>

也可以將內聯元素以塊級元素形式來顯示,即display:block。

2.6 盒子模型

margin:外邊距

margin-top、margin-right、margin-bottom、margin-left

使用方式

(1)margin:30px;表示上下左右外邊距都未30px;

(2)margin-left:30px;單獨設定上下左右外邊距

(3)margin:10px 20px 30px 40px;分別設定上右下左四個邊距為10px 20px 30px 40px

padding:內邊距

也有上下左右邊距,和margin類似,不再贅述。

border:邊框

border-width: 邊框寬度;

border-style: 邊框線條型別;

border-color: 邊框的顏色;

word中設定邊框的操作

也可以使用更優化的書寫方式

border:10px dashed blue;

margin: 20px 40px 60px 80px;

padding: 50px;

border: 5px solid blueviolet;

outline: 5px dotted red;

CSS基礎屬性

字型有以下相關屬性 font size 字型大小 font family 字型型別 font style 字形 斜體等 font variant 字型變化 如大寫 font weight 字型粗細 也可以簡寫為,但必須按以下順序排序 font style font variant font weig...

CSS基礎屬性

background color red p 文字相關屬性 文字相關屬性主要包括顏色 對齊方式 修飾效果等 none 預設值 eg text decoration line through underline 加下劃線 overline 加上劃線 line through 加刪除線 text sha...

2 基礎屬性

1.塊級元素 block 一整行 2.行內元素 inline 一小塊 3.行內塊元素 inline block 相比於2而言可以自己設高度 4.flex 5.grid1.背景 image background image url none 2.背景平鋪 repeat background repea...