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