CSS
引言：學(xué)習(xí)前端基礎(chǔ)知識(shí)。第二課 CSS 基礎(chǔ)知識(shí)。
時(shí)間：2017年11月22日
作者：JustDo23
html_css_js
01. 基礎(chǔ)知識(shí)
-
CSS是用來為結(jié)構(gòu)化文檔添加樣式的一種計(jì)算機(jī)語言。-
Cascading Style Sheets即層疊樣式表 -
CSS最主要的目的是將文件的內(nèi)容和顯示分隔開來 -
CSS可以外部引用故復(fù)用性強(qiáng)提高工作效率 -
CSS可以靜態(tài)修飾網(wǎng)頁同時(shí)可以配合腳本動(dòng)態(tài)格式化網(wǎng)頁 -
層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式最終使用最后一次設(shè)置的屬性值。
-
02. 樣式語法
-
簡(jiǎn)單代碼
<!DOCTYPE html> <html> <head> <title>前端入門CSS</title> <meta charset="utf-8"> <!-- CSS樣式 --> <style type="text/css"> p { font-size: 16px;/*設(shè)置文字字號(hào)*/ color: black;/*設(shè)置文字顏色*/ font-weight: bold;/*設(shè)置字體加粗*/ } span { color: blue; } </style> </head> <body> <p>這是一個(gè)段落。<span>單獨(dú)強(qiáng)調(diào)。</span></p> </body> </html> -
CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。css_grammar- 選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素。
- 聲明：被大花括號(hào)包裹，屬性與值之間用冒號(hào)分隔，多條屬性用分號(hào)分隔。
03. 插入位置
-
內(nèi)聯(lián)式
<body> <!-- 內(nèi)聯(lián)式 --> <p style="color:green;font-size:12px">這里使用內(nèi)聯(lián)式。</p> </body>-
css直接寫在HTML標(biāo)簽中
-
-
嵌入式
<head> <!-- 嵌入式 --> <style type="text/css"> span { color: blue; } </style> </head>-
嵌入式必須寫在<style></style>之間 -
嵌入式一般寫在<head></head>之間
-
-
外部式
<head> <!-- 外部式 --> <link rel="stylesheet" type="text/css" href="/css/master.css"> </head>- 屬性
href指定外部樣式文件 - 外部樣式文件擴(kuò)展名
.css - 外部文件中直接指定樣式
span { font-size: 12px; } - 屬性
-
優(yōu)先級(jí)
- 就近原則即離被設(shè)置元素越近優(yōu)先級(jí)越高
- 一般情況下，權(quán)值相同
內(nèi)聯(lián)式 > 嵌入式 > 外部式
04. 選擇器
<head>
<style type="text/css">
/*標(biāo)簽選擇器*/
span { color: blue; }
/*類選擇器*/
.className { color: pink; }
/*ID選擇器*/
#idName { color: pink; }
/*子選擇器*/
.firstGeneration>span {
border: 1px solid red;/*邊框及顏色*/
}
/*后代選擇器*/
.allGeneration span { border: 1px solid red; }
/*通用選擇器*/
* { color: black; }
/*偽類選擇器*/
a:hover { color: blue; }
/*分組選擇器*/
.groupOne,.groupTwo { border: 1px solid red; }
</style>
</head>
<body>
<span>標(biāo)簽選擇器。</span>
<p class="className">類選擇器。</p>
<p id="idName">ID選擇器。</p>
<p class="firstGeneration">子選擇器。<span>第一代應(yīng)用。<span>其他代不應(yīng)用。</span></span>
</p>
<p class="allGeneration">后代選擇器。<span>第一代應(yīng)用。<span>其他代同樣應(yīng)用。</span></span>
</p>
<a href="#">偽類選擇器。鼠標(biāo)滑過觸發(fā)。</a>
<div class="groupOne">分組選擇器。<span class="groupTwo">同一組使用同一顏色</span></div>
</body>
- 屬性
ID是唯一的所以ID選擇器只能在文檔中使用一次。 - 屬性
class可以同時(shí)指定多個(gè)類名用空格分隔。 - 偽類選擇器可以為標(biāo)簽的某種狀態(tài)設(shè)置樣式。兼容性差。
css_selector
05. 特性
繼承性：有些屬性可以繼承；有些屬性不會(huì)被繼承。
-
特殊性：權(quán)值
-
標(biāo)簽的權(quán)值為1 -
類選擇符的權(quán)值為10 -
ID選擇符的權(quán)值最高為100
p{color:red;} /*權(quán)值為1*/ p span{color:green;} /*權(quán)值為1+1=2*/ .warning{color:white;} /*權(quán)值為10*/ p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/ #footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/ -
層疊性：相同權(quán)值情況下，后設(shè)置樣式覆蓋之前設(shè)置樣式，就近原則。
重要性： 使用
!important語句將權(quán)值提升至最高。
06. 文字排版
<head>
<style type="text/css">
p {
font-family: "Microsoft Yahei";/*字體*/
font-size: 16px;/*字號(hào)*/
color: #FF553E;/*顏色*/
font-weight: bold;/*加粗*/
font-style: italic;/*斜體*/
text-decoration: underline;/*下劃線*/
text-decoration: line-through;/*刪除線*/
text-indent: 2em;/*段首縮進(jìn)*/
line-height: 2em;/*行間距*/
letter-spacing: 20px;/*漢字或字母間距*/
word-spacing: 50px;/*單詞與單詞間距*/
text-align: center;/*塊元素中內(nèi)容居中*/
}
</style>
</head>
-
2em的意思就是文字的2倍大小。
07. 元素分類
-
分類
-
塊狀元素
- 每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。
- 元素的寬度和高度和行高以及頂和底邊距是可以設(shè)置。
- 默認(rèn)情況下元素寬度和父容器的寬度相同。
-
內(nèi)聯(lián)元素也稱為行內(nèi)元素
- 和其他元素在同一行。
- 元素的寬度和高度以及頂和底邊距是不可設(shè)置。
- 元素的寬度是包裹內(nèi)容的寬度，不可改變。
-
內(nèi)聯(lián)塊狀元素
- 同時(shí)具備塊級(jí)元素和內(nèi)聯(lián)元素的特點(diǎn)。
- 和其他元素在同一行。
- 元素的寬度和高度和行高以及頂和底邊距可以設(shè)置。
-
塊狀元素
-
改變：
- 屬性
display:block將元素設(shè)置為塊級(jí)元素 - 屬性
display:inline將元素設(shè)置為行內(nèi)元素 - 屬性
display:inline-block將元素設(shè)置為內(nèi)聯(lián)塊狀元素
- 屬性
08. 盒模型
[圖片上傳失敗...(image-1c1fa7-1520935055978)]
<head>
<style type="text/css">
/*邊框設(shè)置*/
div {
border-width: 2px;/*邊框?qū)挾?/
border-style: dashed;/*虛線*/
border-color: red;
}
/*邊框設(shè)置簡(jiǎn)寫*/
p {
border: 2px dashed blue;
}
li {
width: 200px;/*內(nèi)容寬度*/
height: 300px;/*內(nèi)容高度*/
border: 1px solid red;
padding: 20px;/*上右下左內(nèi)邊距*/
margin: 10px 10px 10px 10px;/*上右下左外邊距*/
}
</style>
</head>
- 元素內(nèi)容和邊框之間的內(nèi)間距，稱為填充。
- 元素與元素之間的外間距，稱為邊界。
- 元素整體占位寬度
marginLeft + paddingLeft + width + paddingLeft + marginRight
09. 小結(jié)
- 層疊樣式表
語法結(jié)構(gòu),插入位置,選擇器,元素分類 盒模型- 繼續(xù)學(xué) CSS 基礎(chǔ)進(jìn)階
