web前端(9)—— CSS屬性
屬性
終於到css屬性,前面就零零散散的用了什麼color,font-size之類,本篇博文就專項的介紹它了
字型屬性
font-family
此屬性是設定字型樣式的,比如微軟雅黑,方正書體,華文宋體之類的
例,給body標籤設定字型:
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型,則會嘗試下一個。瀏覽器會使用它可識別的第一個值
font-weight
字重,即設定字型的粗細
取值有以下:
值 | 描述 |
---|---|
normal | 預設值,標準粗細 |
bord | 粗體 |
border | 更粗 |
lighter | 更細 |
100~900 | 設定具體粗細,400等同於normal,而700等同於bold |
inherit | 繼承父元素字型的粗細值 |
font-size
這個前面也用到過了,就是設定字型大小的
例:
p { font-size: 14px; }
color
設定字型顏色,前面也用過了
例:
p{
color:red;
}
支援三種顏色值:
- 十六進位制值 如: #FF0000
- 一個RGB值 如: RGB(255,0,0)
- 顏色的名稱 如: red,blue,black,white(顏色的英文單詞)
文字屬性
text-align
設定文字的水平方向的對齊方式,其值有:
值 | 描述 |
---|---|
left | 左邊對齊 預設值 |
right | 右對齊 |
center |
居中對齊 |
justify | 兩端對齊 |
例:
p{
text-align:center;
}
line-height
即行高,文字垂直方向的佔位,其值為畫素大小
例:
p{
line-height:20px
}
text-decoration
文字裝飾,其值有:
值 | 描述 |
---|---|
none | 預設。定義標準的文字。 |
underline | 定義文字下的一條線。 |
overline | 定義文字上的一條線。 |
line-through | 定義穿過文字下的一條線。 |
inherit | 繼承父元素的text-decoration屬性的值 |
例:
a{
text-decoration:none;/*表示a標籤無下劃線*/
}
text-index
設定文字縮排,其值為畫素單位
例:
p{
text-index:2px; /*表示縮排兩個畫素位置*/
}
背景屬性
背景屬性就很多了,不過不用死記:
background-color
要使用的背景顏色,其值和前面的color屬性的值相同
例:
body{
backgroud-color:red;
}
background-image
要使用的背景影象
例:
body{
background-image: url(xx.png);
}
background-size
背景圖片的尺寸
例:
body{
background-image: url(xx.png);
background-size:200px;
}
background-repeat
如何重複背景影象,當設定了背景圖片的尺寸後,如果尺寸並不能剛好放下圖片,就會產生拉伸或者平鋪等效果
值 | 描述 |
---|---|
repeat | 預設。背景影象將在垂直方向和水平方向重複。 |
repeat-x | 背景影象將在水平方向重複。 |
repeat-y | 背景影象將在垂直方向重複。 |
no-repeat | 背景影象將僅顯示一次。 |
inherit | 規定應該從父元素繼承background-repeat屬性的設定 |
例:
body{
background-image: url(xx.png);
background-size:200px;
background-repeat:no-repeat;
}
background-attachment
背景影象是否固定或者隨著頁面的其餘部分滾動,其值有如下:
值 | 描述 |
---|---|
scroll | 預設值。背景影象會隨著頁面其餘部分的滾動而移動。 |
fixed | 當頁面的其餘部分滾動時,背景影象不會移動。 |
inherit | 規定應該從父元素繼承background-attachment屬性的設定 |
例:
body{
background-image: url(xx.png);
background-size:200px;
background-repeat:no-repeat;
background-attachment:scroll
}
background-position
背景影象的位置,其值為如下:
值 | 描述 |
---|---|
top left top center top right center left center center center right bottom left bottom center bottom right |
如果只設置了一個關鍵詞,那麼第二個值就是"center"。 預設值:0% 0%。 |
x% y% | 第一個值是水平位置,第二個值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只設置了一個值,另一個值就是50%。 |
xpos ypos | 第一個值是水平位置,第二個值是垂直位置。 左上角是 0 0。單位是畫素 (0px 0px) 或任何其他的 CSS 單位。 如果只設置了一個值,另一個值就是50%。 可以混合使用 % 和position 值。 |
inherit
表示應該從父元素繼承background屬性的設定,這個很少用
以上背景屬性綜合使用:
body {
background-color: blue;
backgraound-image: url(xx.png);
background-size: 200px 250px;
background-repeat: no-repeat;
background-position: center
}
當然,也可以簡寫成這樣:
body {
background: red url(xx.png) no-repeat fixed center/200px 250px;
}
display屬性
在前面學html標籤時,我們就學過行內標籤,塊級標籤,行內塊級標籤,而控制這些標籤相互轉換的就是這個display屬性
先說下行內和塊級標籤的概念:
行內元素的特性:
- 與其他行內元素並排;
- 不能設定寬、高。預設的寬度,就是文字的寬度,可以使用line-height設定垂直方向的佔比
塊級元素的特性:
- 霸佔一行,不能與其他任何元素並列;
- 能接受寬、高。如果不設定寬度,那麼寬度將預設變為父親的100%
塊級元素和行內元素的分類:
在以前的HTML知識中,我們已經將標籤分過類,當時分為了:文字級、容器級。
從HTML的角度來講,標籤分為:
- 文字級標籤:p、span、a、b、i、u、em。
- 容器級標籤:div、h系列、li、dt、dd。
PS:為甚麼說p是文字級標籤呢?因為p裡面只能放文字&圖片&表單元素,p裡面不能放h和ul,p裡面也不能放p。
從CSS的角度講,CSS的分類和上面的很像,就p的不一樣:
-
行內元素:除了p之外,所有的文字級標籤,都是行內元素。p是個文字級,但是是個塊級元素。
-
塊級元素:所有的容器級標籤都是塊級元素,還有p標籤
轉換:
塊級轉為行內,之前的特性丟失:
div{
display:inline;
}
之後會擁有行內標籤的特性:
- 此時這個div不能設定寬度、高度;
- 此時這個div可以和別人並排了
行內轉為塊級,之前的特性丟失:
span{
display:block;
}
之後會擁有行內標籤的特性:
- 此時這個span能夠設定寬度、高度
- 此時這個span必須霸佔一行了,別人無法和他並排
- 如果不設定寬度,將撐滿父級html元素
盒模型
盒模型說白了就是以div標籤為代表的這種塊級標籤的模型,在html5和css3裡還有很多類似div的標籤,用到的額時候再說吧
在CSS中,"box model"這一術語是用來設計和佈局時使用,然後在網頁中基本上都會顯示一些方方正正的盒子。我們稱為這種盒子叫盒模型
盒模型有兩種:標準模型和IE模型
如果朋友您還是沒太懂,這樣,我們還是以百度首頁為例:
我選中了id為head的div,然後右邊的css樣式的最下面有個這個圖形,它這就是一個盒模型的樣子。相信你已經注意到裡面的margin和padding之類的字眼了,接下來就開始介紹它們
margin
即外邊距的意思,表示邊框到最近盒子的距離,(比如兩個div之間)
margin-top,margin-left,margin-right,margin-bottom分別表示距離上左右下的距離
例:
div{
margin: 20px; /*表示四個方向的外邊距離為20px*/
margin-top: 30px;/*表示盒子距離上邊30px*/
margin-left: 50px;/*表示盒子距離右邊50px*/
margin-bottom: 100px;/*表示盒子距離下邊100px*/
}
padding
即內邊距的意思,表示盒子內部內容距離盒子邊框的距離
同樣,padding也有padding-top,padding-left,padding-right,padding-bottom四個小屬性,表示距離也分別是上左右下的
分別寫:
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
簡寫:
上下左右
*/
padding: 20px;
/*還有其他的簡寫寫法:*/
/*
上 右 下 左
*/
padding: 20px 30px 40px 50px ;
/*
上 左右 下
*/
padding: 20px 30px 40px;
/*
上下 左右
*/
padding: 20px 30px;
/*
根據以上的話,相信你之前或許看到過這種:
*{
padding:0;
margin:0;
}
那麼這個就好理解了,就是對通用選擇器進行內外邊距的控制,因為很多html標籤是有一些預設的樣式的,所以我們需要重新設定下
盒模型的其他屬性
width:內容的寬度
height: 內容的高度
left:左邊距
right:右邊距
top:上邊距
bottom:下邊距
盒模型的計算
盒子的真實寬度=width+2*padding+2*border
盒子的真實寬度=height+2*padding+2*border
還有因為html標籤巢狀的關係,子元素會繼承父元素的css樣式,所以寬度高度等都有不同的畫素單位
假如一個大div的樣式如下:
width:1000px;
這個大div內還有一個小div,其樣式為:
width:80%
那麼這個小div寬度是多少呢?
我們知道,預設的話,80%就是螢幕的寬度的80%對吧,但是由於其外層還有一個大的div,且大的div已經設定了寬度為1000px,那麼這個小div的實際width其實是1000px乘以80%=800px
border
即邊框的意思,描述盒子的邊框。邊框有三個要素: 粗細(畫素單位) 線性樣式 顏色(color值)
線性樣式也有小屬性:
- solid(實線)
- dashed(虛線)
- double(雙實線)
border也有同margin和padding一樣的上下左右四個小屬性
例:
border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
清除邊框的預設樣式:
border:none;
border:0;
例:使用border設定出一個小三角形
/*小三角 箭頭指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}