CSS介紹
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素，
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對檔案進行格式化（渲染），
CSS語法
CSS實體
每個CSS樣式由兩個組成部分：選擇器和宣告，宣告又包括屬性和屬性值，每個宣告之后用分號結束，
CSS注釋
/*這是注釋*/
注釋是代碼之母，--摘自哪吒語錄
CSS的幾種引入方式
行內樣式
行內式是在標記的style屬性中設定CSS樣式，不推薦大規模使用，
<p style="color: red">Hello world.</p>
內部樣式
嵌入式是將CSS樣式集中寫在網頁的
標簽對的<style></style>標簽對中，格式如下：<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
外部樣式
外部樣式就是將css寫在一個單獨的檔案中，然后在頁面進行引入即可，推薦使用此方式，
<link href=https://www.cnblogs.com/guapitomjoy/p/"mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
基本選擇器
元素選擇器
p {color: "red";}
ID選擇器
#i1 {
background-color: red;
}
類選擇器
.c1 {
font-size: 14px;
}
p.c1 { color: red;}
注意：
樣式類名不要用數字開頭（有的瀏覽器不認），
標簽中的class屬性如果有多個，要用空格分隔，
通用選擇器
通用即代表所有
* {
color: white;
}
組合選擇器
后代選擇器
決議：第一個div 后面的div包括嵌套的標簽都會被渲染
div div
/*li內部的a標簽設定字體顏色*/
li a {
color: green;
}
兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗鄰選擇器
/*選擇所有緊接著<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟選擇器
/*i1后面所有的兄弟p標簽*/
#i1~p {
border: 2px solid royalblue;
}
屬性選擇器
/*用于選取帶有指定屬性的元素，*/
p[title] {
color: red;
}
/*用于選取帶有指定屬性和值的元素，*/
p[title="213"] {
color: green;
}
不怎么常用的屬性選擇器
/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title屬性以hello結尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title屬性中包含（字串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
color: green;
}
分組和嵌套
分組
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設定樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式，
例如：
div, p {
color: red;
}
上面的代碼為div標簽和p標簽統一設定字體為紅色，
通常，我們會分兩行來寫，更清晰:
div,p {
color: red;
}
嵌套
多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設定字體顏色為紅色，
.c1 p {
color: red;
}
--關于標簽嵌套：通常塊級元素可以包含行內元素或某些塊級元素，但行內元素不能包含塊級元素，它只能包含其它行內元素，
偽類選擇器
/* 未訪問的鏈接 */
a:link {
color: #FF0000
}
/* 已訪問的鏈接 */
a:visited {
color: #00FF00
}
/* 滑鼠移動到鏈接上 */
a:hover {
color: #FF00FF
}
/* 選定的鏈接 */
a:active {
color: #0000FF
}
/*input輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;}
偽元素選擇器
first-letter
常用的給首字母設定特殊樣式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每個<p>元素之前插入內容*/
p:before {
content:"*";
color:red;
}
after
/*在每個<p>元素之后插入內容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮動，
選擇器的優先級
CSS繼承
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的，繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代，例如一個body定義了的字體顏色值也會應用到段落的文本中，
body {
color: red;
}
此時頁面上所有標簽都會繼承body的字體顏色，然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0，
我們只要給對應的標簽設定字體顏色就可覆寫掉它繼承的樣式，
p {
color: green;
}
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的，有一些屬性不能被繼承，如：border, margin, padding, background等，
選擇器的優先級
我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設定樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？
其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：
除此之外還可以通過添加 !important方式來強制讓樣式生效，但并不推薦使用，因為如果過多的使用!important會使樣式檔案混亂不易維護，
萬不得已可以使用!important
CSS屬性相關
寬和高
width屬性可以為元素設定寬度，
height屬性可以為元素設定高度，
塊級標簽才能設定寬度，行內標簽的寬度由內容來決定，
字體屬性
文字字體
font-family可以把多個字體名稱作為一個“回退”系統來保存，如果瀏覽器不支持第一個字體，則會嘗試下一個，瀏覽器會使用它可識別的第一個值，
簡單實體：
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
字體大小
p {
font-size: 14px;
}
如果設定成inherit表示繼承父元素的字體大小值，
字重（粗細）
font-weight用來設定字體的字重（粗細），
| 值 | 描述 |
|---|---|
| normal | 默認值，標準粗細 |
| bold | 粗體 |
| bolder | 更粗 |
| lighter | 更細 |
| 100~900 | 設定具體粗細，400等同于normal，而700等同于bold |
| inherit | 繼承父元素字體的粗細值 |
文本顏色
顏色屬性被用來設定文字的顏色，
顏色是通過CSS最經常的指定：
- 十六進制值 - 如: **＃**FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間，
字體屬性綜合實體：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*非重點*/
body{
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
/*字體的大小*/
div{
font-size: 20px;
}
/*字體的粗細*/
div{
font-weight: normal;
}
/*字體的顏色*/
div{
/*color: yellow;*/
/*color: #ff5289;*/
/*color: rgb(255,0,255);*/
color: rgba(255,0,255,0.3);
}
</style>
</head>
<body>
<div>
一行白鷺上青天
</div>
</body>
</html>
文字屬性
文字對齊
text-align 屬性規定元素中的文本的水平對齊方式，
| 值 | 描述 |
|---|---|
| left | 左邊對齊 默認值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
文字裝飾
text-decoration 屬性用來給文字添加特殊效果，
| 值 | 描述 |
|---|---|
| none | 默認，定義標準的文本， |
| underline | 定義文本下的一條線， |
| overline | 定義文本上的一條線， |
| line-through | 定義穿過文本下的一條線， |
| inherit | 繼承父元素的text-decoration屬性的值， |
常用的為去掉a標簽默認的自劃線：
a {
text-decoration: none;
}
首行縮進
將段落的第一行縮進 32像素：
p {
text-indent: 32px;
}
文字屬性綜合實體：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*文字對齊方式*/
/*div{*/
/* width: 100px;*/
/* background: darkorchid;*/
/* text-align: center;*/
/*}*/
/*文字裝飾*/
/*div{*/
/* width: 100px;*/
/* background: yellow;*/
/* text-decoration: underline;*/
/* text-decoration: overline;*/
/* text-decoration: line-through;*/
/*}*/
/*去掉a標簽的下劃線*/
/*a{ text-decoration: none}*/
/*去掉li無序串列的圓點*/
/*li{list-style: none}*/
/*縮進與字間距*/
/*p,div{*/
/* !*縮進*!*/
/* text-indent: 32px;*/
/* !*字間距*!*/
/* letter-spacing: 10px;*/
/*}*/
/*行高(文字的高度)*/
div{
width: 400px;
height: 200px;
background: deeppink;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>雅俗共賞</div>
<a href=https://www.cnblogs.com/guapitomjoy/p/"">首頁
- 123
- 456
- 789
床前明月光
舉頭望明月