CSS基礎知識四

知識點導航:

* 行高和字號
    + 行高
    + 單行文本垂直居中
    + font 屬性
* 超級鏈接
    + 偽類
* background 系列屬性
    + background-color
    + background-image
    + background-repeat
    + background-position
    + background-attachment
    + background 綜合屬性

行高和字號<p>

行高<p>

在 CSS 中,所有的行都有行高。盒模型的 padding 不是作用在文字上的,而是作用在 “行”上的

line-height: 40px

文字是在自己的行里面居中的

字號 14px 行高 24px

為了嚴格保證字在行里面居中,行高、字號一般都是偶數,這樣他們的差就是偶數,能夠被 2 整除

單行文本垂直居中<p>

文本在行里面居中: 對于單行文本, 讓行高等于盒子高;多行文本垂直居中,設置盒子的 padding。

單行文本垂直居中
多行文本垂直居中

font 屬性<p>

font 綜合屬性<p>
font: 14px/24px "宋體"

等價于:

font-size: 14px;
line-height: 24px;
font-family: "宋體";
字體<p>

有些時候設置的字體系統沒有,默認會設置為宋體。遇到這種情況可以設置備選字體( 英語字體放前面,這樣所有的中文就不能匹配英語字體,因為英語字體內沒有中文字 )

font-family: "Times New Roman", "微軟雅黑", "宋體";
行高使用百分比<p>

行高可以用百分比,表示字號的百分之多少。一般來說,都是大于 100%的,因為行高一定要大于字號

font: 12px/200% "宋體";

等價于:

font: 12px/24px "宋體";

超級鏈接<p>

偽類<p>

同一個標簽根據用戶的狀態不同有不同的樣式,這就是偽類,它用冒號來表示。

a 標簽有 4 種偽類:

a:link {  //正常狀態下
  color: red;
}
a:visited {  //已訪問的狀態
  color: orange;
}
a:hover {  //鼠標懸停的狀態
  color: green;
}
a:active {  //鼠標點擊的狀態
  color: black;
}
//必須按照這個順序寫,否則會失效

編寫代碼時,a 標簽中描述盒子;偽類中描述文字的樣式、背景

所有的 a 不繼承 text、font 這些東西,因為 a 自己有一個偽類的權重

background 系列屬性<p>

1. background-color<p>

CSS2.1 中,顏色的表示方法共有三種:

1. 單詞      (簡單的顏色)
2. rgb     
3. 十六進制   (可以簡化成三位)

2. background-image<p>

用來給盒子加上背景圖片,默認會被鋪滿(padding的區域有背景圖)

background-image: url(images/wuyifan.jpg) //相對路徑
本地圖片

在 CSS 2.1 中,背景圖片是不能調整尺寸大小的

3. background-repeat<p>

用來設置背景圖是否重復以及重復方式。共有三種值:

background-repeat: no-repeat;  //不重復
background-repeat: repeat-x;  //橫向重復
background-repeat: repeat-y;  //縱向重復

4. background-position<p>

背景定位屬性,類似iOS中的 frame 的 origin 的感覺,可以為負數,表示相反方向

background-position

它還可以用單詞來描述:

background-position: right bottom; //右下角
right bottom

CSS 精靈
"CSS 精靈"也叫做"CSS 雪碧"技術(CSS Sprite),是一種 CSS 圖像合并技術,該方法是將小圖標和背景圖像合并到一張圖片上,然后利用 CSS 的背景定位來顯示需要顯示的圖片部分,減少了請求,比如 4 張小圖片,原本需要 4 個請求,但是用了 CSS 精靈,小圖片變為了一張圖,請求就只有一個了。

5. background-attachment<p>

背景是否固定<p>

background-attachment: fixed;

背景被固定住,不會被滾動條滾走

6. background 綜合屬性<p>

background 屬性和 border 一樣,是一個綜合屬性

background: red url(1.jpg) no-repeat 100px 100px fixed;

等價于:

background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;

它是可以任意省略某個部分不寫的:

background: blue url(1.jpg) no-repeat 100px 100px;
如圖

精靈的使用

background: url(1.jpg) no-repeat 0-133px;
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text-align:c...
    DCbryant閱讀 238評論 0 0
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,865評論 0 6
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,114評論 0 40
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 【編者按】本篇文章作者是 Reinder de Vries,既是一名企業家,也是優秀的程序員,發表多篇應用程序的博...
    OneAPM閱讀 753評論 0 3