資訊專欄INFORMATION COLUMN
摘要：前端技術(shù)之詳解第五天一行高和字號行高中，所有的行，都有行高。微軟雅黑我們一定要將標(biāo)簽寫在前面，這些偽類寫在后面。也就是說，標(biāo)簽涵蓋了的狀態(tài)。表示三原色紅綠藍(lán)。進(jìn)制表示法，也是兩位兩位看，看，但是沒有逗號隔開。
CSS中，所有的行，都有行高。盒模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上的。
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>Documenttitle>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 500px;
border: 1px solid black;
margin: 100px;
line-height: 40px;
}
style>
head>
<body>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字p>
body>
html>
View Code
line-height: 40px;
Document
國國國國國國國國國國國國國國國國國國國國國國國
View Code
文字，是在自己的行里面居中的。比如，現(xiàn)在文字字號14px，行高是24px。那么：
為了嚴(yán)格保證字在行里面居中，我們的工程師有一個(gè)約定： 行高、字號，一般都是偶數(shù)。這樣，它們的差，就是偶數(shù)，就能夠被2整除。
Document
文字文字文字文字文字文字文字文字文字
文本在行里面居中
公式：
1 行高:盒子高;
需要注意的是，這個(gè)小技巧，行高=盒子高。 只適用于單行文本垂直居中！！不適用于多行。
如果想讓多行文本垂直居中，需要設(shè)置盒子的padding：
● 使用font屬性，能夠?qū)?/strong>字號、行高、字體，能夠一起設(shè)置。
Document
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
View Code
1 font: 14px/24px “宋體”;
1 font-size:14px;
2 line-height:24px;
3 font-family:"宋體";
等價(jià)于三行語句：
font-family就是“字體”。family是“家庭”、“伐木累”的意思。
Document
哈abcdefghijklmn哈
我是span
View Code
● 網(wǎng)頁中不是所有字體都能用哦，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒裝，比如你設(shè)置：
1 font-family: "華文彩云";
如果用戶電腦里面沒有這個(gè)字體，那么就會變成宋體。
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。 如果頁面中，需要其他的字體，那么需要切圖。
英語：Arial 、 Times New Roman
● 為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面，沒有安裝微軟雅黑字體，那么就是宋體：
1 font-family: "微軟雅黑","宋體";
備選字體可以有無數(shù)個(gè)，用逗號隔開。
● 我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，就自動的變?yōu)楹竺娴闹形淖煮w：
1 font-family: "Times New Roman","微軟雅黑","宋體";
● 所有的中文字體，都有英語別名，我們也要知道：
微軟雅黑的英語別名：
1 font-family: "Microsoft YaHei";
1 font-family: "SimSun";
宋體的英語別名：
font屬性能夠?qū)ont-size、line-height、font-family合三為一：
1 font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
● 行高可以用百分比，表示字號的百分之多少。一般來說，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔枴?nbsp;
1 font:12px/200% “宋體”
1 font:12px/24px “宋體”;
等價(jià)于
反過來，比如：
1 font:16px/48px “宋體”;
1 font:16px/300% “宋體”
等價(jià)于
超級鏈接就是a標(biāo)簽。
Document
點(diǎn)擊我去363
點(diǎn)擊我去網(wǎng)易
也就是說，同一個(gè)標(biāo)簽，根據(jù)用戶的某種狀態(tài)不同，有不同的樣式。這就叫做“偽類”。
類就是工程師加的，比如div屬于box類，很明確，就是屬于box類。但是a屬于什么類？不明確。因?yàn)橐从脩粲袥]有點(diǎn)擊、有沒有觸碰。所以，就叫做“偽類”。
偽類用冒號來表示。
a標(biāo)簽有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 表示， 用戶訪問過了這個(gè)鏈接的樣式。 是英語“訪問過的”的意思。:link 表示， 用戶沒有點(diǎn)擊過這個(gè)鏈接的樣式。 是英語“鏈接”的意思。
:hover 表示， 用戶鼠標(biāo)懸停的時(shí)候鏈接的樣式。 是英語“懸停”的意思。
:active 表示， 用戶用鼠標(biāo)點(diǎn)擊這個(gè)鏈接，但是不松手，此刻的樣式。 是英語“激活”的意思。
|
a:link
|
a:visited
|
a:hover
|
a:active
|
記住，這四種狀態(tài)，在css中，必須按照固定的順序?qū)懀?/p>
a:link 、a:visited 、a:hover 、a:active
如果不按照順序，那么將失效。“愛恨準(zhǔn)則”love hate。必須先愛，后恨。
a標(biāo)簽在使用的時(shí)候，非常的難。因?yàn)椴粌H僅要控制a這個(gè)盒子，也要控制它的偽類。
我們一定要將a標(biāo)簽寫在前面，:link、:visited、:hover、:active這些偽類寫在后面。
Document
View Code
a標(biāo)簽中，描述盒子； 偽類中描述文字的樣式、背景。
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這些東西。因?yàn)閍自己有一個(gè)偽類的權(quán)重。
最標(biāo)準(zhǔn)的，就是把link、visited、hover都要寫。但是前端開發(fā)工程師在大量的實(shí)踐中，發(fā)現(xiàn)不寫link、visited瀏覽器也挺兼容。所以這些“老油條”們，就把a(bǔ)標(biāo)簽簡化了：
Document
View Code
a:link、a:visited都是可以省略的，簡寫在a標(biāo)簽里面。也就是說，a標(biāo)簽涵蓋了link、visited的狀態(tài)。
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 }
背景顏色屬性。
Document
css2.1中，顏色的表示方法有哪些？一共有三種：單詞、rgb表示法、十六進(jìn)制表示法
能夠用英語單詞來表述的顏色，都是簡單顏色。
紅色：
background-color: red;
3.1.2 用rgb方法來表示
紅色：
Document
background-color: rgb(255,0,0);
用逗號隔開，r、g、b的值，每個(gè)值的取值范圍0~255，一共256個(gè)值。rgb表示三原色“紅”red、“綠”green、“藍(lán)”blue。光學(xué)顯示器，每個(gè)像素都是由三原色的發(fā)光原件組成的，靠明亮度不同調(diào)成不同的顏色的。
如果此項(xiàng)的值，是255，那么就說明是純色：
綠色：
background-color: rgb(0,255,0);
藍(lán)色：
background-color: rgb(0,0,255);
黑色：
background-color: rgb(0,0,0);
白色：光學(xué)顯示器，每個(gè)元件都不發(fā)光，黑色的。
background-color: rgb(255,255,255);
顏色可以疊加，比如黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);
再比如：
background-color: rgb(111,222,123);
就是紅、綠、藍(lán)三種顏色的不同比例疊加。
Document
View Code
紅色：
background-color: #ff0000;
#ff0000所有用#開頭的值，都是16進(jìn)制的。
16進(jìn)制表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。
ff就是10進(jìn)制的255 ，00 就是10進(jìn)制的0，00就是10進(jìn)制的0。所以等價(jià)于rgb(255,0,0);
怎么換算的？我們介紹一下
我們現(xiàn)在看一下10進(jìn)制中的基本數(shù)字（一共10個(gè)）:
0、1、2、3、4、5、6、7、8、9
16進(jìn)制中的基本數(shù)字（一共16個(gè)）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16進(jìn)制對應(yīng)表：
十進(jìn)制數(shù) 十六進(jìn)制數(shù)
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
十六進(jìn)制中，13 這個(gè)數(shù)字表示什么？
表示1個(gè)16和3個(gè)1。 那就是19。 這就是位權(quán)的概念，開頭這位表示多少個(gè)16，末尾這位表示多少個(gè)1。
小練習(xí)：
16進(jìn)制中28等于10進(jìn)制多少？
答：2*16+8 = 40。
16進(jìn)制中的2b等于10進(jìn)制多少？
答：2*16+11 = 43。
16進(jìn)制中的af等于10進(jìn)制多少？
答：10 * 16 + 15 = 175
16進(jìn)制中的ff等于10進(jìn)制多少？
答：15*16 + 15 = 255
所以，#ff0000就等于rgb(255,0,0)
background-color: #123456;
等價(jià)于：
background-color: rgb(18,52,86);
所以，任何一種十六進(jìn)制表示法，都能夠換算成為rgb表示法。也就是說，兩個(gè)表示法的顏色數(shù)量，一樣。
十六進(jìn)制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc;
比如：
background-color:#ff0000;
等價(jià)于
background-color:#f00;
比如：
background-color:#112233;
等價(jià)于
background-color:#123;
只能上面的方法簡化，比如
background-color:#222333;
要記住：
1 #000 黑
2 #fff 白
3 #f00 紅
4 #333 灰
5 #222 深灰
6 #ccc 淺灰
用于給盒子加上背景圖片：
Document
文字文字文字文字文字文字文字文字文字文字
View Code
1 background-image:url(images/wuyifan.jpg);
images/wuyifan.jpg 就是相對路徑。url()表示網(wǎng)址，uniform resouces locator 同意資源定位符
背景天生是會被平鋪滿的。
padding的區(qū)域有背景圖。
設(shè)置背景圖是否重復(fù)的，重復(fù)方式的。
Document
文字文字文字文字文字文字文字文字文字文字
repeat表示“重復(fù)”。
1 background-repeat:no-repeat; 不重復(fù)
2 background-repeat:repeat-x; 橫向重復(fù)
3 background-repeat:repeat-y; 縱向重復(fù)
也就是說，background-repeat屬性，有三種值：
Document
View Code
Document
背景定位屬性，是最難的屬性。一定要好好學(xué)。
position就是“位置”的意思。background-position就是背景定位屬性。
1 background-position:向右移動量 向下移動量;
定位屬性可以是負(fù)數(shù)：
原理：
Document
View Code
“css精靈”，英語css sprite，所以也叫做“css雪碧”技術(shù)。是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
css精靈有什么優(yōu)點(diǎn)，就是減少了http請求。比如4張小圖片，原本需要4個(gè)http請求。但是用了css精靈，小圖片變?yōu)榱艘粡垐D，http請求只有1個(gè)了。
淘寶網(wǎng)的精靈圖：
Document
用fireworks精確控制精靈：
Document
View Code
1 background-po
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2289.html
前端技術(shù)之_CSS詳解第六天--完結(jié) 一、復(fù)習(xí)第五天的知識 a標(biāo)簽的偽類4個(gè)： a:link 沒有被點(diǎn)擊過的鏈接 a:visited 訪問過的鏈接 a:hover 懸停 a:active 按下鼠標(biāo)不松手 順序就是“love hate”準(zhǔn)則。 可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...
摘要：目前，中關(guān)村黑馬程序員訓(xùn)練營已成長為行業(yè)學(xué)員質(zhì)量好課程內(nèi)容深企業(yè)滿意的移動開發(fā)高端訓(xùn)練基地，并被評為中關(guān)村軟件園重點(diǎn)扶持人才企業(yè)。黑馬程序員的學(xué)員篩選制度，遠(yuǎn)比現(xiàn)在以上的企業(yè)招聘流程更為嚴(yán)格。系統(tǒng)的學(xué)習(xí)可以參考w3c的教程 web概念概述 * JavaWeb： * 使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項(xiàng)目 * 軟件架構(gòu)： 1. C/S: Client/Server 客戶端/服務(wù)...
摘要：若以多線程的方式操作這些，則可能出現(xiàn)操作的沖突。另外，因?yàn)槭菃尉€程的，在某一時(shí)刻內(nèi)只能執(zhí)行特定的一個(gè)任務(wù)，并且會阻塞其它任務(wù)執(zhí)行。瀏覽器事件觸發(fā)線程事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會把事件添加到任務(wù)隊(duì)列的隊(duì)尾，等待引擎的處理。 首先，說下為什么 JavaScript 是單線程？ 總所周知，JavaScript是以單線程的方式運(yùn)行的。說到線程就自然聯(lián)想到進(jìn)程。那它們有什么聯(lián)系呢？ ...
摘要：前端技術(shù)之詳解第二天華文中宋基礎(chǔ)選擇器負(fù)責(zé)結(jié)構(gòu)，負(fù)責(zé)樣式，負(fù)責(zé)行為。微軟雅黑瀏覽器的市場占有率瀏覽器打分兒子選擇器測試工具的兒子。表示選擇下一個(gè)兄弟微軟雅黑選擇上的是元素后面緊挨著的第一個(gè)兄弟。前端技術(shù)之_CSS詳解第二天 1、css基礎(chǔ)選擇器 html負(fù)責(zé)結(jié)構(gòu)，css負(fù)責(zé)樣式，js負(fù)責(zé)行為。 css寫在head標(biāo)簽里面，容器style標(biāo)簽。 先寫選擇器，然后寫大括號，大括號里面是樣式。 ...
摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進(jìn)行分類，具體內(nèi)容看這里前端每周清單年度總結(jié)與盤點(diǎn)。 感謝 王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進(jìn)行分類，具...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
