前端三剑客——CSS
CSS
- CSS
- CSS 的引入方式
- 代碼風格
- 樣式風格
- 樣式大小寫
- 選擇器
- 基礎選擇器
- 復合選擇器
- 并集選擇器
- 偽類選擇器
- 字體屬性
- 設置字體
- 設置字體大小
- 字體粗細
- 字體樣式
- 文本屬性
- 文本顏色
- 文本對齊
- 文本裝飾
- 文本縮進
- 文本行高
- 背景屬性
- 背景顏色
- transparent
- 背景圖片
- 平鋪效果
- 圖片位置
- 圖片大小
- 圓角矩形
- 單獨設置圓角
- 通過調試工具來查看 CSS 屬性
- 查看屬性
- 元素的顯示模式
- 行內元素
- 塊級元素
- 隱藏元素
- 盒子模型
- 邊框
- 邊框樣式
- 內邊距
- 外邊距
- 彈性布局
- 使用 flex
- 水平方向的排列方式
- 垂直方向的排列方式
- flex 布局中常見的三種操作
CSS
HTML 是頁面的骨，CSS 就是頁面的樣式，就是皮，就是描述了任意一個網頁的元素：大小、字體、顏色、背景、邊框。每一個 CSS 包含兩個部分：選擇器+應用的屬性：
<style>p {color: red;} </style>這里就是鍵值對結構，p 就是選擇器，大括號里面就是鍵值對結構，每個鍵值對就對應一個 CSS 的屬性。CSS 代碼可以放到 HTML 當中（通常是放在 style 當中），然后 style 標簽可以放到 HTML 中的任意位置。
CSS 的引入方式
內部樣式表，通過 style 標簽來寫 CSS，這種做法不太常見，簡單的 CSS 這樣寫也沒問題。
<body><style>p {color: red;}</style><p>hello 涼涼</p> </body>這樣就把字體顏色變成了紅色：
內聯樣式：通過 HTML 標簽當中的 style 屬性，來應用一些樣式。只針對當前元素生效。
<body><p style="color: rosybrown">hello world</p> </body>運行結果如下，文字就變成了棕色：
外部樣式：實際開發當中，用的最多。把 CSS 單獨提取出來，放到 .css 文件當中，然后 HTML 代碼里通過 link 標簽，加入到 head 里面，這個標簽可以存在多份，來引入該 CSS。這個方式，可以讓多個 HTML 復用一份樣式。
運行結果如下：
同時在開發者工具當中也可以看到是由那個文件引入的：
代碼風格
樣式風格
緊湊風格：就是寫在一起 p {color: red;}
展開風格：就是分開寫，但是會導致文件變大，瀏覽器解析的時候也就需要更多的網絡帶寬，從而影響效率。
p {color: red; }樣式大小寫
CSS 和 HTML 一樣不區分大小寫，所以在使用的時候，統一使用小寫就可以了，所以也就不存在 “駝峰命名法” 了。而是使用 脊柱命名法，就是使用 - 來分割 p {font-size: 20px;}
選擇器
選擇器的功能就是能夠選中頁面的元素（標簽），可以一次選一個，也可以一次選一批。
基礎選擇器
標簽選擇器（style）：
<style>p {color: red;} </style>這里就是對所有的 p 都會生效。
類選擇器：可以隨心所欲的選擇任意想要的元素。首先，需要在 CSS 代碼當中創建一個類名，在對應的 HTML 元素中，通過 class 來引用這個類名，此時具有該類名的元素，就都會應用上相關的 CSS 屬性。
這樣就把 red 類引入了前兩個 p 標簽，運行結果如下：
id 選擇器：先給被選中的元素，設定一個 id 屬性。id 在一個頁面中，不能重復，因此 id 選擇器只能選中一個元素，不能選中多個。
<body><style>#java {color: red;}</style><p>hello world</p><p id="java">hello java</p><p>hello mysql</p><p>hello javaEE</p> </body>通過 id 選擇器就把 id=java 的標簽變成紅色，運行結果如下：
通配符選擇器：就是 * 直接選中了頁面上的所有元素，最大的用途就是取消瀏覽器的默認樣式。不同的瀏覽器，默認樣式不一樣，所以前端開發的時候，就要取消默認樣式。
<body><style>* {margin: 0;padding: 0;box-sizing: border-box;}</style> </body>這樣就取消了頁面的默認樣式。
復合選擇器
后代選擇器：通過多個選擇器的組合，能夠選中某個元素里面的子/孫子元素（后代元素）
<body><style>/*意思就是先選中 ul，然后看 ul 里面有沒有叫 li 的后代*/ul li {color: red;}</style><ul><li>AAA</li><li>BBB</li><li>CCC</li></ul><ol><li>AAA</li><li>BBB</li><li>CCC</li></ol> </body>這里就是選中 ul 里面的 li，中間必須有空格，然后設置顏色為 紅色。運行結果如下：
子選擇器：通過多個選擇器的組合，能夠選中 某個元素 里面的 子元素。
<body><style>ul>.name {color: red;}</style><ul><li class="name">AAA</li><li>BBB</li><li>CCC</li></ul><ol><li class="name">AAA</li><li>BBB</li><li>CCC</li></ol> </body>要注意的是，子選擇器使用的時候，一定要用 > 指定。
運行結果如下：
并集選擇器
并集選擇器就是并列的寫多個選擇器，中間使用逗號來分隔。里面可以寫簡單的選擇器，也可以寫符合的選擇器。
```html <body><style>ul>li, ol>li {color: cyan;}</style><ul><li class="name">AAA</li><li><a href="#">BBB</a></li><li>CCC</li></ul><ol><li class="name">AAA</li><li><a href="#">BBB</a></li><li>CCC</li></ol> </body> ``` 通過選擇，就是把 ul 下的 li 標簽 和 ol 下的 li 標簽都設置為 cyan 顏色： 因為兩個 BBB 是被 a 標簽包裹的，所以是 a 標簽。所以就不會受到影響。
偽類選擇器
用法：
a:link 選擇未被訪問過的鏈接
a:visited 選擇已經被訪問過的鏈接
a:hover 選擇鼠標指針懸停上的鏈接
a:active 選擇活動鏈接(鼠標按下了但是未彈起)
常用的是 hover 和 active。
<body><style>div {color: black;}/*鼠標懸停的時候，應用這個樣式*/div:hover {color: red;}/*鼠標按下的時候，應用這個樣式*/div:active {color: cyan;}</style><div>這是一個div</div> </body>運行結果如下：
鼠標懸停的時候：
鼠標點擊的時候：
字體屬性
設置字體
在設置字體的時候，要保證對方的系統上面存在這種字體，不過也可以通過 HTML 中的 link 屬性來加載網絡上的文字。
<body><style>.one {/*設置字體*/font-family: '微軟雅黑';}.two {font-family: '宋體';}</style><div class="one">這是一行字</div><div class="two">這是另一行字</div> </body>運行結果如下：
設置字體大小
通過 font-size 來設置，不過一定要有 px 作為單位：
<body><style>.one {/*設置字體*/font-family: '微軟雅黑';font-size: 50px;}.two {font-family: '宋體';font-size: 20px;}</style><div class="one">這是一行字</div><div class="two">這是另一行字</div> </body>運行結果如下：
字體粗細
通過 font-weight 來設置粗細，最大是 900，最小是 100 ：
<body><style>.one {/*設置字體*/font-family: '微軟雅黑';font-weight: 900;}.two {font-family: '宋體';font-weight: 100;}</style><div class="one">這是一行字</div><div class="two">這是另一行字</div> </body>運行結果如下：
也可以通過單詞來表示：bold 粗體，bolder 特粗體，lighter 細，normal 標準大小。
字體樣式
通過 font-style 來完成
<body><style>.one {/*設置字體*/font-family: '微軟雅黑';font-style: italic;}.two {font-family: '宋體';}</style><div class="one">這是一行字</div><div class="two">這是另一行字</div> </body>運行結果如下：
文本屬性
文本顏色
通過 color 來決定文本顏色：
直接使用單詞來表示顏色，不過表示的種類有限。
<body><style>div {color: red;}</style><div>這是一段話</div> </body>運行結果如下：
使用 rgb 來表示：r 就是 red 表示紅色，g 就是 green 表示綠色，b 就是 blue 表示藍色。通過 rgb 就可以表示各種各樣的顏色。這三個分量的表示范圍就是：0-255。
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="blog.css"> </head> <body><style>div {color: rgb(255, 0, 0);}</style><div>這是一段話</div> </body>這里只給紅色附了值，所以就是紅色：
通過 十六進制 來表示 rgb：十六進制就是 00-FF ：
<body><style>div {color: #0000ff;}</style><div>這是一段話</div> </body>rgba 就是多了一個透明度，可以弄成那種模糊類型的樣子。
文本對齊
文本對齊有：靠左、靠右、靠中。通過 text-align 來實現。
<body><style>.one {text-align: left;}.two {text-align: center;}.three {text-align: right;}</style><div class="one">這是一段話</div><div class="two">這是另一段話</div><div class="three">這是另外一段話</div> </body>運行結果如下：
文本裝飾
通過 text-decoration 來實現文本裝飾
下劃線：
<body><style>div {text-decoration: underline;}</style><div>這是一段話</div> </body>刪除線：
<body><style>div {text-decoration: line-through;}</style><div>這是一段話</div> </body>上劃線：
<body><style>div {text-decoration: overline;}</style><div>這是一段話</div> </body>文本縮進
通過 text-indent 來實現文本縮進，單位可以是像素，也可以是 em（就是縮進多少字），一個 em 就是 16 像素：
<body><style>div {text-indent: 2em;}</style><div>這是一段話 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ex magnam natus omnis vel voluptas. Consequatur culpa, dicta distinctio inventore iusto molestiae officiis optio placeat quibusdam suscipit, temporibus unde vero.</div> </body>運行結果如下：
文本行高
行高就是字體大小 + 行間距，其實就是 頂線-頂線 之間的距離（或者 底線-底線 的距離等等），通過 line-height 來表示，就像這樣：
不設置行高：
<body><div class="one">這是一行字</div><div class="two">這是另一行字</div><div class="three">這是另外一行字</div> </body>設置行高：
<body><style>.two {line-height: 50px;}</style><div class="one">這是一行字</div><div class="two">這是另一行字</div><div class="three">這是另外一行字</div> </body>設置行高的時候，會同時對上下兩個方向都產生影響，上下兩個邊距都是均等的，所以行高可以實現垂直方向的文本居中對齊： 行高和標簽(元素)一樣高就可以實現垂直居中了：
<body><style>div {width: 200px;height: 150px;font-size: 20px;background-color: red;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下：
背景屬性
背景顏色
通過 background-color 來實現，用法和 color 非常相似：英文單詞，rgb，十六進制數字 都可以。以 rgb 為例：
<body><style>div {width: 200px;height: 150px;font-size: 20px;background-color: rgb(0,0,255);text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下：
不過要注意的是，背景顏色要和文本顏色區別開來。
transparent
就是 背景透明（應用了父元素的背景）如果不使用 transparent 的話：
<body><style>body {background-color: rgb(0,255,0);}div {width: 200px;height: 150px;font-size: 20px;background-color: rgb(0,0,255);color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下，就還是設置的標簽的顏色：
使用 transparent 之后：
這樣就和父類的元素顏色一樣了：
如果不寫 background-color 的話，也會默認應用父元素的背景。
背景圖片
通過 background-image 來設置背景圖片：
<body><style>div {width: 200px;height: 150px;font-size: 20px;background-image: url("1.jpg");color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下：
如果把 div 的大小調大之后，圖片也就跟著變大了：
運行結果如下：
不過要注意的是，設置背景圖之后，默認是一個平鋪效果。
平鋪效果
通過 background-repeat 就可以設置是否要平鋪了：
<body><style>div {width: 2000px;height: 1500px;font-size: 20px;background-image: url("1.jpg");background-repeat: no-repeat;color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>這樣設置之后，就沒有平鋪效果了：
這里的 no-repeat 就是不平鋪，repeat 就是平鋪的意思。通過 repeat-x 就是水平方向平鋪，repeat-y 就是垂直方向平鋪。
背景圖片和頒獎儀式是可以共存的，背景圖會出現在背景顏色的上方：
<body><style>div {width: 5000px;height: 1500px;font-size: 20px;background-image: url("1.jpg");background-repeat: no-repeat;background-color: red;color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下：
圖片位置
通過 background-position 就可以實現圖片的位置了，有兩個參數，一個是橫坐標，一個是縱坐標：
<body><style>div {width: 5000px;height: 1500px;font-size: 20px;background-image: url(./1.jpg);background-repeat: no-repeat;background-position: 100px 100px;color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>這里就是設置橫縱坐標都是 100 像素：
如果把參數都設置為 center center，就是水平垂直居中。或者只寫一個 center 也是居中，通過 top、left、right、bottom 就可以設置上下左右。
圖片大小
通過 background-size 來調整背景圖片大小：
<body><style>div {width: 5000px;height: 1500px;font-size: 20px;background-image: url(./1.jpg);background-repeat: no-repeat;background-size: 200px 200px;color: aliceblue;text-align: center;line-height: 150px;}</style><div>這是一段話</div> </body>運行結果如下：
也可以只設置一個參數來保證圖片不發生形變。也可以使用 contain cover 讓背景圖自適應這里的元素大小。不過 contain 可能會露出一部分背景色，把圖片拉伸為元素大小就可以了，保證背景圖是指在元素之內。而 cover 就不會讓元素露出背景色。
圓角矩形
HTML 里面默認都是長方形，尖銳的樣子，通過變成圓角的樣子就會變得美觀了。通過 border-radius 來變成圓角：
<body><style>div{width: 200px;height: 200px;background-color: red;color: black;border-radius: 20px;}</style><div>這是一段話</div> </body>運行結果如下：
border-radius 設置的越大，弧度也就越大。這里設置的就是內切圓的半徑。當弧度等于內切圓半徑一半的時候，就是圓形了。
單獨設置圓角
border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-right-radius:30px; border-bottom-left-radius:40px;因為 border-radius 時一個總和，同時設置四個角，所以就可以把它分開設置，通過上面這四種方式就是分別設置四個角了。
通過調試工具來查看 CSS 屬性
我這里通過 edge 瀏覽器來演示，打開調試模式：
查看屬性
調試模式里面選中元素，就可以查看對應的屬性了：
通過這里的屬性切換，就可以知道每個屬性決定什么東西了。
元素的顯示模式
元素的顯示模式有很多：塊級元素，行內元素，行內塊元素。
上面都是標簽的默認的顯示模式，也就是說可以通過 CSS 的 display 屬性 來修改元素的顯示模式 。常見的用法就是把行內元素改成塊級元素。
行內元素
行內元素不能設置寬和高：
<body><style>a{width: 200px;height: 200px;}</style><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a> </body>運行結果如下：
塊級元素
通過 display 的 block 就可以把行內元素轉化為塊級元素：
<body><style>a{width: 200px;height: 200px;display: block;}</style><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a> </body>運行結果如下：
隱藏元素
通過 display 的 none 屬性來實現對元素的隱藏：
<body><style>a{width: 200px;height: 200px;display: none;}</style><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a> </body>運行結果如下：
這樣就完成了元素的隱藏，不過開發者根據當中還是可以看到這里的元素的。
盒子模型
HTML 的元素，其實是一個矩形，由 外邊距，邊框，內邊距，內容 組成：
這個模型其實就是 開發者工具 當中下面的小盒子：
就像蓋房子，房子的墻，就是邊框，房子和房子之間的距離，就是外邊距，家具和墻的距離就是內邊距，家具就是內容：
因此就可以通過 CSS 屬性來設置這幾個方面的尺寸：
邊框
邊框通過 border 來實現，有三個參數：寬度，顏色，邊框效果。
<body><style>div {width: 200px;height: 200px;border: 2px black dashed;}</style><div>這是一個元素</div> </body>solid 就是實心邊框的意思，運行結果如下：
不過設置邊框，會撐大原有的元素，元素的大小會在原有是大小上加上邊框的大小：
不過這種撐大其實不好用，很容易導致色號質量邊框就把元素的尺寸改變了，進一步的就影響了頁面布局。例如頁面寬度是 500px，一個圖片 100 px寬。之前可以顯示 5 個圖片，現在就顯示不了了。在使用的時候，更常用的是設置 box-sizing 屬性為 border-box，這個時候設置的邊框就會擠壓內容，而不是撐大邊框：
運行結果如下：
邊框樣式
也就是 border 里面的第三個參數，可以取如下值：
內邊距
通過 padding 來設置，設置的事 邊框和內容 之間的距離。直接設置的話，是設置四個方向：
<body><style>div {width: 200px;height: 200px;border: 2px black solid;box-sizing: border-box;padding: 50px;}</style><div>這是一個元素</div> </body>運行結果如下：
當然也可以像圓角矩形那樣單獨設置四個方向。padding 默認情況下，也會撐大元素，通過 box-sizing 的 border-box 也可以防止撐大盒子。
外邊距
通過 margin 來設置：
<body><style>div {width: 200px;height: 200px;border: 2px black solid;box-sizing: border-box;padding: 50px;}.one {margin-bottom: 10px;}</style><div class="one">這是一個元素</div><div class="two">這是一個元素</div> </body>這里是設置下邊距為 10px ：
不過兩個元素的外邊距重合的時候，就是元素1設置了下邊距，元素2設置了上邊距，兩者的距離并不會加起來，而是取兩種的較大值：
運行結果如下：
這種叫做外邊距塌陷，只在垂直方向會有這種情況，水平情況不會有。
通過 margin 也可以實現一個元素的水平居中，當然元素是塊級元素 ：通過把水平方向的外邊距設置為 auto（瀏覽器自適應），此時就會達到水平居中的效果：
<body><style>.one {width: 500px;height: 200px;background-color: red;}.two {width: 200px;height: 100px;background-color: blue;margin: 0 auto;}</style><div class="one"><div class="two">這是一個元素</div></div> </body>運行結果如下：
彈性布局
彈性布局主要是安排頁面上的元素的位置，也就是排列方式。默認的網頁布局，是從上往下的，實際的網頁，不僅僅需要從上到下，也需要從左到右。而 flex 布局就是根據這樣來的。默認情況下的排列：
<body><style>.parent {width: 100%;height: 200px;background-color: grey;}.one, .two, .three {width: 100px;height: 100px;background-color: red;}</style><div class="parent"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div> </body>運行結果如下，默認是從上到下排列的：
使用 flex
使用彈性布局之后，就可以在橫行當中排列了：
<body><style>.parent {width: 100%;height: 200px;background-color: grey;display: flex;}.one, .two, .three {width: 100px;height: 100px;background-color: red;}</style><div class="parent"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div> </body>這樣就可以橫向排列了：
水平方向的排列方式
通過 flex 布局，默認情況下是擠在左上角的。通過 justify-content 就可以設置水平方向怎么排列。
垂直方向的排列方式
通過 align-items 來完成垂直方向怎么排列：
常用的是 center 方式。
flex 布局中常見的三種操作
總結
以上是生活随笔為你收集整理的前端三剑客——CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java GC G1 详解
- 下一篇： 2017年html5行业报告,云适配发布