2017年2月1日
CSS相關(guān)
一.可以這樣寫規(guī)則（一個h1,h2{}相關(guān)樣式設(shè)置可以稱為一個規(guī)則）
p {
background-color: red;
}
或者
p { background-color: red; }
其中p是選擇器， background-color: red;是樣式 夫植，而整個又是一個規(guī)則
1.以下也是一個規(guī)則（多個元素用間隔）
h1, h2 {
color: gray;
}
其中h1, h2是選擇器讹剔，color: gray;是樣式，而整個又是一個規(guī)則
2.一般原則
2.1把公有的放在一個規(guī)則里面详民，私有放在單獨(dú)規(guī)則里面
2.2元素一般會繼承父元素的樣式（但也不是所有的延欠，如鏈接就不會;也不是所有的屬性都可以繼承，如邊框一般就不會繼承）
2.3繼承覆蓋
如果父元素已經(jīng)制定字體樣式沈跨，但是子元素又想用自己的字體樣式
body {
font-family: sans-serif;/*父元素公有的字體*/
}
em {
font-family: serif;/*子元素特有的字體*/
}
效果：
2.4給元素添加class類屬性
2.4.1只有p元素下的greentea類才起作用【其中p.greentea 叫類選擇器】
<!-- html5 -->
<p class="greentea">
</p>
<blockquote class="greentea">
Passing cars,
<br> When you can't see,
<br> May get you,
<br> A glimpse,
<br> Of eternity.
<br>
</blockquote>
/*css*/
p.greentea {
color: green;
}
2.4.2所有元素是greentea類的都起左右
/*css*/
.greentea {
color: green;
}
或者
/*css*/
p.greentea , blockquote.greentea{
color: green;
}
2.4.3如果多個選擇器設(shè)定一定元素由捎，更特定的規(guī)則（優(yōu)先級更高）起作用，如果優(yōu)先級一樣css文件最后面的那個規(guī)則起作用
<!-- html5 -->
<p class=“greentea blueberry purpleberry">
/*css*/
p { color: black; } 1級
.greentea { color : green; } 2級
p.greentea { color : green ; } 3級
p.purpleberry { color : purple; } 3級
p.blueberry { color : blue; } 3級
由于3級有3個饿凛，css最后一個是blueberry,所以p字體是blue.
3.補(bǔ)充
3.1一個屬性兩個值用法狞玛，一定要寫在一個規(guī)則里面，寫在多個規(guī)則里面會被覆蓋的
em {
text-decoration: underline overline;
/*文本下劃線 和 上劃線*/
}
3.2css檢查工具
二.樣式創(chuàng)建
1.內(nèi)聯(lián)模式（要放在head里面）
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<style type="text/css">
p {
background-color: red;
}
</style>
</head>
2.外聯(lián)模式（推薦）
第一步涧窒，將規(guī)則單獨(dú)創(chuàng)建到css文件里
第二步使用的頁面心肪，鏈接到這個文件既可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<!-- type="text/css" h5中其實(shí)不需要這個屬性；rel="stylesheet" 說明文件與鏈接文件css的關(guān)系是一個樣式表 -->
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
2017年2月2日
一.字體樣式
1.5個字體系列
sans-serif : 一般當(dāng)默認(rèn)用纠吴，沒有小而細(xì)的襯線【Verdana Geneva Arial】
serif:當(dāng)默認(rèn)用,新聞報(bào)紙字體硬鞍，有襯線 【Times】
monospace: 用于顯示代碼軟件用，所有字母水平所在寬度一樣，如i和m 【"Courier New"】
cursive: 類似于手寫 【”Comic Sans"】
fantasy: 類似某種裝飾線字體 【Impact】
2.字體的使用
2.1一般用用戶自帶的字體集固该，使用字體（大小寫要一直锅减，工作原理是先讀第一個，有就停止伐坏，沒有就一個一個往下試）
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
2.2也可以用web字體為用戶提供指定的字體（一般新的瀏覽器都支持了）
第一步下載web字體
woff: web開發(fā)字體格式怔匣，推薦用（web open font format）
ttf:TrueType字體
eot：Embedded OpenType字體 （僅IE支持）
svg:SVG字體
第二步：上傳到你的web服務(wù)器
eg 比如這個目錄下
http://www.yourHost.com/journal/
第三步：使用（css 文件添加 @font-face格式，一般放在頂部）
@font-face {
font-family: "Emblema One";
src: url("http://www.yourHost.com/journal/EmblemaOne-Regular.woff"),
url("http://www.yourHost.com/journal/journal/EmblemaOne-Regular.ttf");
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
補(bǔ)充：
內(nèi)置css規(guī)則:@font-face @import @media
3.字體大小調(diào)整
3.1px像素（一個字體高度為14像素）
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
}
3.2%倍數(shù) 父類元素的百分之多少倍
eg：h1字體是另一個字體150%
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 150%;/*1.5*14px=21px*/
}
3.4關(guān)鍵字 x-small small medium large x-large
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
3.5經(jīng)驗(yàn)：一般先用關(guān)鍵字指定body, 接下來用%指定body里面的元素大小著淆。
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1 {
font-size: 150%;/*1.5*14px=21px*/
}
4.字體粗細(xì) 和 傾斜
h2 {
font-weight: normal; /*正常*/
/*font-weight: bold;*/ /*粗體*/
}
blockquote {
font-style: italic;/*傾斜*/
}
5.下劃線（推薦用整行下劃線）
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888; /*整行下滑線*/
}
文本下滑線 （
underline下劃線 line-through刪除線 overline上劃線）
二.顏色樣式
1.用法
1.1顏色名 https://en.wikipedia.org/wiki/Web_colors
body {
background-color: silver;
}
1.2 rgb函數(shù)
body {
background-color: rgb(80%, 40%, 0%);
}
或
body {
background-color: rgb(255, 0, 100);
}
1.3 16進(jìn)制（推薦）
h2 {
color: #cc6600;
}
如果您發(fā)現(xiàn)本文對你有所幫助劫狠，如果您認(rèn)為其他人也可能受益，請把它分享出去永部。
