當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端技术之_CSS详解第五天

發布時間：2023/11/29 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了前端技术之_CSS详解第五天小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端技術之_CSS詳解第五天

一、行高和字號

1.1 行高

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

文字，是在自己的行里面居中的。比如，現在文字字號14px，行高是24px。那么：

為了嚴格保證字在行里面居中，我們的工程師有一個約定：?行高、字號，一般都是偶數。這樣，它們的差，就是偶數，就能夠被2整除。

1.2 單行文本垂直居中

文本在行里面居中

公式：

1 行高:盒子高;

需要注意的是，這個小技巧，行高=盒子高。 ?只適用于單行文本垂直居中！！不適用于多行。?

如果想讓多行文本垂直居中，需要設置盒子的padding：

1.3 font屬性

●?使用font屬性，能夠將字號、行高、字體，能夠一起設置。

?等價于三行語句：

font-family就是“字體”。family是“家庭”、“伐木累”的意思。

● 網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦里面裝沒裝，比如你設置：

1 font-family: "華文彩云";

?如果用戶電腦里面沒有這個字體，那么就會變成宋體。

頁面中，中文我們只使用：微軟雅黑、宋體、黑體。如果頁面中，需要其他的字體，那么需要切圖。

英語：Arial 、 Times New Roman

● 為了防止用戶電腦里面，沒有微軟雅黑這個字體。就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面，沒有安裝微軟雅黑字體，那么就是宋體：

1 font-family: "微軟雅黑","宋體";

?備選字體可以有無數個，用逗號隔開。

● 我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，就自動的變為后面的中文字體：

1 font-family: "Times New Roman","微軟雅黑","宋體";

● 所有的中文字體，都有英語別名，我們也要知道：?

微軟雅黑的英語別名：

1 font-family: "Microsoft YaHei"; 1 font-family: "SimSun";

?宋體的英語別名：

font屬性能夠將font-size、line-height、font-family合三為一：

1 font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

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

1 font:12px/200% “宋體” 1 font:12px/24px “宋體”;

?等價于

反過來，比如：

1 font:16px/48px “宋體”; 1 font:16px/300% “宋體”

等價于

二、超級鏈接的美化

超級鏈接就是a標簽。

2.1 偽類

也就是說，同一個標簽，根據用戶的某種狀態不同，有不同的樣式。這就叫做“偽類”。

類就是工程師加的，比如div屬于box類，很明確，就是屬于box類。但是a屬于什么類？不明確。因為要看用戶有沒有點擊、有沒有觸碰。所以，就叫做“偽類”。

偽類用冒號來表示。

a標簽有4種偽類，要求背誦：

1 a:link{ 2 color:red; 3 } 4 a:visited{ 5 color:orange; 6 } 7 a:hover{ 8 color:green; 9 } 10 a:active{ 11 color:black; 12 }

:visited 表示，用戶訪問過了這個鏈接的樣式。是英語“訪問過的”的意思。:link ? 表示，用戶沒有點擊過這個鏈接的樣式。是英語“鏈接”的意思。

:hover 表示，用戶鼠標懸停的時候鏈接的樣式。是英語“懸停”的意思。

:active 表示，用戶用鼠標點擊這個鏈接，但是不松手，此刻的樣式。是英語“激活”的意思。

a:link

a:visited

a:hover

a:active

記住，這四種狀態，在css中，必須按照固定的順序寫：

a:link 、a:visited 、a:hover 、a:active

如果不按照順序，那么將失效。“愛恨準則”love hate。必須先愛，后恨。

2.2 超級鏈接的美化

a標簽在使用的時候，非常的難。因為不僅僅要控制a這個盒子，也要控制它的偽類。

我們一定要將a標簽寫在前面，:link、:visited、:hover、:active這些偽類寫在后面。

a標簽中，描述盒子；偽類中描述文字的樣式、背景。

1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 40px; 5 } 6 .nav ul li a:link ,.nav ul li a:visited{ 7 text-decoration: none; 8 9 color:white; 10 } 11 .nav ul li a:hover{ 12 13 font-weight: bold; 14 color:yellow; 15 }

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

最標準的，就是把link、visited、hover都要寫。但是前端開發工程師在大量的實踐中，發現不寫link、visited瀏覽器也挺兼容。所以這些“老油條”們，就把a標簽簡化了：

a:link、a:visited都是可以省略的，簡寫在a標簽里面。也就是說，a標簽涵蓋了link、visited的狀態。

1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 50px; 5 text-decoration: none; 7 color:white; 8 } 9 .nav ul li a:hover{ 11 }

三、background系列屬性

3.1 background-color屬性

背景顏色屬性。

css2.1中，顏色的表示方法有哪些？一共有三種：單詞、rgb表示法、十六進制表示法

3.1.1 用英語單詞來表示

能夠用英語單詞來表述的顏色，都是簡單顏色。

紅色：

background-color: red;

3.1.2 用rgb方法來表示?

紅色：

background-color: rgb(255,0,0);

用逗號隔開，r、g、b的值，每個值的取值范圍0~255，一共256個值。rgb表示三原色“紅”red、“綠”green、“藍”blue。光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。

如果此項的值，是255，那么就說明是純色：

綠色：

background-color: rgb(0,255,0);

藍色：

background-color: rgb(0,0,255);

黑色：

background-color: rgb(0,0,0);

白色：光學顯示器，每個元件都不發光，黑色的。

background-color: rgb(255,255,255);

顏色可以疊加，比如黃色就是紅色和綠色的疊加：?

background-color: rgb(255,255,0);

再比如：?

background-color: rgb(111,222,123);

就是紅、綠、藍三種顏色的不同比例疊加。

3.1.3 十六進制表示法

紅色：

background-color: #ff0000;

#ff0000所有用#開頭的值，都是16進制的。

16進制表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。

ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。所以等價于rgb(255,0,0);

怎么換算的？我們介紹一下

我們現在看一下10進制中的基本數字（一共10個）:

0、1、2、3、4、5、6、7、8、9

16進制中的基本數字（一共16個）:

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16進制對應表：

十進制數十六進制數

0 　　 0

1 　　 1

2　　 2　　

3 3　　　　

……

10　　 a

11 　　 b

12 　　 c

13　　 d

14 　　 e

15　　 f

16　　 10

17　　 11

18 　　 12

19 　　 13

……

43 　　 2b

……

255　　 ff

十六進制中，13 這個數字表示什么？

表示1個16和3個1。那就是19。這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。

小練習：

16進制中28等于10進制多少？

答：2*16+8 = 40。

16進制中的2b等于10進制多少？

答：2*16+11 = 43。

16進制中的af等于10進制多少？

答：10 * 16 + 15 = 175

16進制中的ff等于10進制多少？

答：15*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

background-color: #123456;

?等價于：

background-color: rgb(18,52,86);

所以，任何一種十六進制表示法，都能夠換算成為rgb表示法。也就是說，兩個表示法的顏色數量，一樣。

十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc;

比如：

background-color:#ff0000;

等價于

background-color:#f00;

比如：

background-color:#112233;

等價于

background-color:#123;

只能上面的方法簡化，比如

background-color:#222333;

要記住：

1 #000 黑 2 #fff 白 3 #f00 紅 4 #333 灰 5 #222 深灰 6 #ccc 淺灰

3.2 background-image

用于給盒子加上背景圖片：

images/wuyifan.jpg 就是相對路徑。url()表示網址，uniform resouces locator 同意資源定位符

背景天生是會被平鋪滿的。

padding的區域有背景圖。

3.3 background-repeat屬性

設置背景圖是否重復的，重復方式的。

repeat表示“重復”。

1 background-repeat:no-repeat; 不重復2 background-repeat:repeat-x; 橫向重復3 background-repeat:repeat-y; 縱向重復

?也就是說，background-repeat屬性，有三種值：

3.4 background-position屬性

3.4.1 屬性的意思

背景定位屬性，是最難的屬性。一定要好好學。

position就是“位置”的意思。background-position就是背景定位屬性。

1 background-position:向右移動量向下移動量;

定位屬性可以是負數：?

3.4.2 css精靈

原理：

“css精靈”，英語css sprite，所以也叫做“css雪碧”技術。是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。

css精靈有什么優點，就是減少了http請求。比如4張小圖片，原本需要4個http請求。但是用了css精靈，小圖片變為了一張圖，http請求只有1個了。

淘寶網的精靈圖：

用fireworks精確控制精靈：

3.4.3 用單詞描述

1 background-position: 描述左右的詞兒描述上下的詞兒;

描述上下的詞兒： top 、center、bottom描述左右的詞兒： left、 center、right

所以：

1 background-position: right bottom;

?右下角：

左下角：

1 background-position: left bottom;

用圖：?

1）大背景圖居中

2）通欄banner

3.5 background-attachment

背景是否固定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">body{background-image: url(images/1.jpg);background-attachment: fixed;}.header{width: 980px;height: 100px;background-color: blue;margin: 100px auto;}</style> </head> <body><div class="header"></div>sdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdfsdfsdfsdfssdfasdfdfsdfsdasdfadsffsdfsdfsdfsdf </body> </html> View Code 1 background-attachment:fixed;

?背景就會被固定住，不會被滾動條滾走。

3.6 background綜合屬性

background屬性和border一樣，是一個綜合屬性：

?等價于：

可以任意省略部分：

1 background: red; 1 background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

精靈的使用：

1 background: url(images/taobao.png) no-repeat 0 -133px;

預告一下，CSS3課程中，將學習更多background屬性：?

background-origin、background-clip、background-size（在CSS2.1背景圖片是不能調整尺寸，IE9開始兼容）、

多背景。

轉載于:https://www.cnblogs.com/wanghui1234/p/8996047.html

總結

以上是生活随笔為你收集整理的前端技术之_CSS详解第五天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：梦到老婆怀孕流产了是什么意思
下一篇：前端基础进阶（十）：面向对象实战之封装拖