1. 程式人生 > >web前端(9)—— CSS屬性

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;
     }