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