屬性名:屬性值
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...