目錄
第一章 HTML和CSS核心基礎(chǔ)
- 1.2 在HTML中引入CSS的方法
第二章 選擇器（暫時(shí)不學(xué)了）
第三章 深入理解盒子模型
- 3.2 邊框（border）
- 3.5 盒子之間的關(guān)系
- 3.6 盒子在標(biāo)準(zhǔn)流中的定位原則
第四章 盒子的浮動(dòng)和定位
- 4.1 盒子的浮動(dòng)
- 4.2 盒子的定位
第五章 文字與圖像
- 設(shè)置字體
- 文字大小
- 行高
- font
- 文字顏色與背景顏色
- 段落的垂直對(duì)齊方式
第一章 HTML和CSS核心基礎(chǔ)
- 1.2 在HTML中引入CSS的方法
- 鏈接式導(dǎo)入會(huì)在裝載頁面主體之前裝載CSS文件辆毡。
/* 外部導(dǎo)入鏈接式 */
<link href="./main_test.css" rel="stylesheet" type="text/css"/>
第三章 深入理解盒子模型
- 3.2 邊框（border）
- border的3個(gè)屬性分別是color刁愿、width和style。
- 在設(shè)置邊框的時(shí)候可以分別使用border-color宠默、border-width用狱、border-style分別設(shè)置他們运怖；
- 邊框的縮寫形式如下：
div {border:1px solid black;}
- 邊框與背景
- 在給元素設(shè)置背景色時(shí)，背景色的作用域?yàn)閏ontent + padding + border
- 3.5 盒子之間的關(guān)系
- 標(biāo)準(zhǔn)文檔流
- 塊級(jí)元素（block level）
- 占據(jù)著一個(gè)矩形區(qū)域夏伊，他們總是以一個(gè)塊的形式表現(xiàn)出來并且跟同級(jí)的兄弟塊依次豎直排列摇展，左右撐滿；
- 行內(nèi)元素（inline level）
- 例如<strong></strong>標(biāo)記溺忧，就是典一個(gè)型的行內(nèi)元素咏连，此類標(biāo)記本身不占據(jù)獨(dú)立的區(qū)域，僅僅是在其它元素中指定了一定的范圍鲁森，又例如<a></a>也是一個(gè)行內(nèi)元素祟滴；
- 塊級(jí)元素（block level）
- 標(biāo)準(zhǔn)文檔流
- 3.6 盒子在標(biāo)準(zhǔn)流中的定位原則
- 在「行內(nèi)元素」相鄰的margin，如左邊span的右margin是30px歌溉，右邊span左margin是40px垄懂，那么相鄰的span會(huì)間隔70px骑晶；
- 在上下相鄰的「塊級(jí)元素」則不是行內(nèi)元素這種規(guī)格，如上div的下margin是40px草慧，下div的上margin為30px桶蛔，那么就會(huì)取較大值，這種現(xiàn)象稱之為塌陷漫谷。
- 4.1盒子的浮動(dòng)
loat 屬性定義元素在哪個(gè)方向浮動(dòng)仔雷。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍舔示，不過在 CSS 中碟婆，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框斩郎，而不論它本身是何種元素脑融。
如果浮動(dòng)非替換元素喻频，則要指定一個(gè)明確的寬度缩宜；否則，它們會(huì)盡可能地窄甥温。
假如在一行之上只有極少的空間可供浮動(dòng)元素锻煌，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過程會(huì)持續(xù)到某一行擁有足夠的空間為止姻蚓。
- 4.2 盒子的定位
這個(gè)屬性定義建立元素布局所用的定位機(jī)制宋梧。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框狰挡，而不論該元素本身是什么類型捂龄。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。
加叁，就是典一個(gè)型的倦沧。-
relative
- 會(huì)相對(duì)「其原本的位置進(jìn)行定位」，通過偏移指定距離它匕，到達(dá)新的位置展融，相對(duì)定位（ralative）的盒子仍在標(biāo)準(zhǔn)流中，他對(duì)父塊和兄弟塊都沒有影響豫柬。
#block1{
position:absolute;
left:30px;
top:30px;
}
- absolute
- 絕對(duì)定位的盒子以它“最近”的一個(gè)“已經(jīng)定位”的祖先元素為基準(zhǔn)進(jìn)行偏移告希，如果沒有已經(jīng)定位的祖先元素 ，那么就會(huì)以瀏覽器為基準(zhǔn)進(jìn)行定位烧给。
- 決定定位的盒子會(huì)從標(biāo)準(zhǔn)流中脫離燕偶，對(duì)其后的兄弟盒子沒有影響。
- 所謂已經(jīng)定位是指元素的position屬性被設(shè)置且不是static的任何一種值础嫡。
- 如果盒子設(shè)置了絕對(duì)定位指么，但是沒有設(shè)置偏移值，那么盒子還會(huì)在他原來的位置，但是會(huì)脫離標(biāo)準(zhǔn)流涧尿；
- absolute
-
fixed
- 生成絕對(duì)定位的元素系奉，相對(duì)于瀏覽器窗口進(jìn)行定位。
z-index
-屬性設(shè)置元素的堆疊順序姑廉。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面缺亮。-
display
圖片.png
第五章 文字與圖像
- 設(shè)置字體
- font-family 可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個(gè)字體桥言，則會(huì)嘗試下一個(gè)萌踱。也就是說，font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表号阿。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值并鸵。
font-family:"Times New Roman",Georgia,Serif;
- 文字大小
- 設(shè)置文字大小扔涧；
font-size:12px;
- em單位： font-size:2em /* 比原來字體大一倍 */
- 百分號(hào)單位：font-size:200% /* 比原來字體大一倍 */
- 行高（line-height）
- 該屬性會(huì)影響行框的布局园担。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離枯夜。
line-height:18px;
- 設(shè)置行高也可以不加單位弯汰，如果原來行高是12px；那么設(shè)置之后因是18px;
line-height:1.5;
- font屬性湖雹；
這個(gè)簡(jiǎn)寫屬性用于一次設(shè)置元素字體的兩個(gè)或更多方面咏闪。使用 icon 等關(guān)鍵字可以適當(dāng)?shù)卦O(shè)置元素的字體，使之與用戶計(jì)算機(jī)環(huán)境中的某個(gè)方面一致摔吏。注意鸽嫂，如果沒有使用這些關(guān)鍵詞，至少要指定字體大小和字體系列征讲。
-
可以按順序設(shè)置如下屬性：
- font-style （字體樣式）
- font-variant （設(shè)置為小型大寫字母字體）
- font-weight （設(shè)置字體粗細(xì)）
- font-size/line-height （字體大小和行高）
- font-family （設(shè)置字體）
font:italic bold 12px/20px arial,sans-serif;
font:16px/1.5 Arial; /* 至少設(shè)置兩個(gè)屬性 *
- text-transform 屬性
h1 {text-transform:uppercase} /* 全部大寫 */
h2 {text-transform:capitalize} /* 首字母大寫 */
p {text-transform:lowercase} /* 全部小寫 */
- text-decoration
- 文字裝飾效果
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink} /* 沒有效果 */
- text-indeng （文字縮進(jìn)）
- 將段落的第一行縮進(jìn) 2個(gè)字的大芯菽场：
text-indent:2em;
- 段落的垂直對(duì)齊方式
