H5 Mosh教程筆記
先列出教程中會用到的網(wǎng)站
網(wǎng)站H5規(guī)范驗證網(wǎng)站
CSS格式規(guī)范驗證網(wǎng)站
轉(zhuǎn)義字符查詢
免費圖片下載網(wǎng)站
免費圖片視頻下載網(wǎng)站
瀏覽器HTML標簽前翎，CSS屬性支持情況查詢網(wǎng)站
CSS一致化工具安裝
漸變色代碼生成網(wǎng)站
CSS形狀代碼生成網(wǎng)站
字體網(wǎng)站fontsquirrel
字體網(wǎng)站fonts
字體網(wǎng)站myfonts
教程開始
· CSS
CSS是描述網(wǎng)站樣式的文件，HTML專注頁面元素畅涂，CSS專注元素以什么樣式展示港华，分工明確。
CSS樣式可以嵌入HTML文件午衰，嵌入元素中立宜，或者單獨成為一個文件，供HTML頁面引用臊岸，這里當然推薦使用CSS單獨成為文件供HTML引用的方式橙数，各自專注自己的事。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS樣式文件引入方式 -->
<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="../css/style.css">
<!-- HTML內(nèi)嵌CSS -->
<style>
.yellowgreen {
color: yellowgreen;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, optio!</p>
<p class="yellowgreen">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, placeat.
</p>
<!-- 元素內(nèi)嵌CSS -->
<p style="color: gray;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, temporibus!
</p>
</body>
</html>
· 基礎選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 類型選擇器帅戒，通過元素類型名字選取元素灯帮，這里的類型就是p標簽*/
/* 類型選擇器會選中所有同樣類型的元素，這里所有的p標簽文字內(nèi)容都會是orange(沒有優(yōu)先級更高的選擇器前提下) */
p {
color: orange;
}
/* 類選擇器蜘澜，每個元素可以有一個或多個類施流，也就是元素里的class */
/* 一個類也可以供多個元素使用，這樣可以統(tǒng)一多個不同元素的樣式 */
.describe {
color: yellowgreen;
}
/* ID選擇器鄙信，每個元素可以且僅可以指定1個ID瞪醋，1個ID能且僅能與1個元素綁定 */
/* 精確選中選擇器，不常用装诡，或者說我用的少银受，更多的時候需要控制多個元素的樣式 */
#graytext {
color: gray;
}
/* 屬性選擇器，更不常用的一種方式鸦采，通過標簽及其屬性的值來精確選擇元素 */
/* 以下是選擇href=https://google.com的a標簽宾巍，屬性必須精確匹配 */
/* 也可以有模式匹配，如以什么開頭的(href^='xxxx')渔伯，或什么結(jié)尾的(href$='xxxxx')顶霞， */
/* 或匹配單詞的(href*='xxx') */
a[] {
color: darkorchid;
}
/* 從運行結(jié)果看，可能你也發(fā)現(xiàn)了锣吼，選擇器也是有優(yōu)先級的 */
/* 類選擇器和ID選擇器就覆蓋了類型選擇器的樣式 */
/* 簡單來說选浑，作用范圍越小的選擇器，優(yōu)先級越高 */
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, molestiae!
</p>
<p class="describe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, unde!
</p>
<p id="graytext">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, saepe.
</p>
<a target="_blank">Google</a>
</body>
</html>
· 關(guān)系選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 關(guān)系選擇器是依據(jù)元素的位置或?qū)蛹墎磉x擇元素的 -->
<style>
/* 選擇ID為products的元素里玄叠，所有后代中(也可以理解成嵌套在section里)的p元素 */
/* 這就是依據(jù)元素的層級來選擇古徒，section標簽里的2個p標簽會被選中 */
#products p {
color: yellowgreen;
}
/* 選擇ID為products的元素里，第一層嵌套的p標簽 */
/* 也就是section標簽里的直接后代元素中選擇p標簽 */
/* 并設置文本顏色為orange */
#products > p {
color: orange;
}
/* 選擇ID為products的標簽(section標簽)后面緊跟著的第一個p標簽 */
/* 并設置文本顏色為darkorchid */
#products + p {
color: darkorchid;
}
/* 選擇與ID為products標簽同級的所有p標簽 */
/* 并設置文本顏色為darkgray */
#products ~ p {
color: darkgrey;
}
/* 關(guān)系選擇器可以節(jié)省一些代碼读恃，不用聲明很多類和ID */
/* 但這種代碼很脆弱隧膘，元素之間的關(guān)系一變代态，樣式就失效了 */
</style>
</head>
<body>
<section id="products">
<p>
1 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, soluta.
</p>
<p>
2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, soluta.
</p>
<article>
<p>
3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, aut?
</p>
</article>
</section>
<p>
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, minima!
</p>
<p>
5 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, quam.
</p>
</body>
</html>
· 偽類選擇器
偽類選擇器是瀏覽器內(nèi)置的選擇器，并不是CSS的標準疹吃，偽類選擇器的使用可以減少一下代碼量蹦疑，很方便，但跟瀏覽器的實現(xiàn)關(guān)聯(lián)較大了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 在article的子元素中互墓，找到p標簽第一次出現(xiàn)的位置必尼，并將文字顏色變成orange */
article p:first-of-type {
color: orange;
}
/* 在article的子元素中蒋搜，找到p標簽最后一次出現(xiàn)的位置篡撵，并將文字顏色變成darkorchid */
article p:last-of-type {
color:darkorchid
}
/* 在ul里的li，找到奇數(shù)(odd)位置的li豆挽，并設置文本顏色為yellowgreen */
/* nth-child的參數(shù)可以是odd育谬，event， 3n(這里不一定是3n帮哈，也可以是5n膛檀，6n等，意思是間隔多少元素算一次有效選中)*/
ul li:nth-child(odd){
color: yellowgreen;
}
/* a標簽在點擊過以后的顏色 */
a:visited {
color: dodgerblue;
}
/* a標簽在未點擊過時的顏色 */
a:link {
color: darkorchid;
}
/* a標簽鼠標懸停顏色 */
a:hover {
color: orange;
}
/* 使用tab鍵讓a標簽獲取焦點時的顏色 */
a:focus {
color: orange;
}
</style>
</head>
<body>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, asperiores.</p>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<a >Google</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
· 偽元素選擇器
偽元素選擇器可簡化對元素的樣式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 使用p標簽的偽元素選擇器娘侍，選擇p標簽內(nèi)容的首字母咖刃，設置文字樣式，以簡化代碼憾筏，替代span標簽 */
p::first-letter {
font-size: 140%;
font-weight: bold;
}
/* 改變p標簽內(nèi)容的第一行的字體樣式 */
p::first-line {
font-weight: bold;
}
/* 改變p標簽內(nèi)容被選中后的背景色 */
p::selection {
background-color: dodgerblue;
}
/* 在p標簽的內(nèi)容前增加content的內(nèi)容嚎杨，并可以改變元素類型為塊級元素 */
p::before {
content: '...';
display: block;
}
/* 在p標簽內(nèi)容后增加content的內(nèi)容，并可以改變元素類型為塊級元素 */
p::after {
content: '...';
display: block;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit delectus vitae saepe perspiciatis nemo sint dolores possimus esse tempora facilis.</p>
</body>
</html>
· 選擇器優(yōu)先級
選擇器的優(yōu)先級是 ID選擇器 > 類氧腰、屬性選擇器 > 元素選擇器
在vscode中枫浙，會顯示選擇器的權(quán)重，從左到右分別是ID選擇器古拴，類箩帚、屬性選擇器，元素選擇器黄痪，分別代表百位紧帕，十位，個位桅打，數(shù)值越大是嗜，權(quán)重越高，高權(quán)重的會覆蓋低權(quán)重的
image.png
如果需要強制使被覆蓋的選擇器生效油额，有兩種方式
- 使用!important關(guān)鍵字(盡量少使用或不使用叠纷，難維護)
如下代碼中第一個p標簽的樣式會生效：
p {
color: red !important;
}
p {
color: green;
}
- 使用選擇器組合的方式，提高權(quán)重潦嘶，給需要提高權(quán)重的選擇器增加一個ID選擇器(盡量少組合涩嚣，一個標簽的選擇器組合太多崇众，也不好維護)
p #paragraph{
color: red;
}
p {
color: green;
}
· CSS繼承
選擇器的內(nèi)容是可以繼承的，某個元素的子元素是會繼承父元素的部分(比如文字等航厚，有些是不會繼承的顷歌，不用記，用多了就只知道了)樣式幔睬，也可以主動選擇不繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: orange;
border: 1px solid black;
}
strong {
/* strong默認會繼承p的color眯漩，也可以指定不繼承 */
/* 使用color的初始值，而不是繼承來的值 */
color: initial;
/* border默認不繼承麻顶，但也可以強制使用繼承的值 */
border: inherit;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong> adipisicing elit. Laudantium, vitae!</p>
</body>
</html>
· 顏色
顏色的表示在CSS中有HEX赦抖，RGB，RGBA辅肾，HSL队萤，HSLA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
/* HEX 十六進制表示法 */
background-color: #4287f5;
/* rgb(紅，綠矫钓，藍)表示法 */
background-color: rgb(66, 135, 245);
/* 帶透明度的rgb表示法要尔，rgba */
background-color: rgba(66, 135, 245, 0.8);
/* hsl(標準色盤偏移度，飽和度新娜，亮度)表示法 */
background-color: hsl(217, 90, 61);
/* 帶透明度的hsl表示法 */
background-color: hsla(217, 90, 61, 0.5);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
· 漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
/* 線性漸變的配置linear-gradient(漸變方向赵辕，顏色1，顏色2概龄。还惠。。顏色n) */
background-image: linear-gradient(to right, rgb(78, 78, 188), yellow);
background-image: linear-gradient(45deg, rgb(78, 78, 188), yellow, rgb(252, 43, 43));
/* 徑向漸變配置(漸變方向旁钧，顏色1吸重，顏色2，顏色3) */
background: radial-gradient(circle, orange, yellow, green);
background: radial-gradient(circle at top left, orange, yellow, green);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
· 邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
/* border線的大小歪今，border線的樣式嚎幸，border線的顏色 */
border: 1px solid black;
border: 1px dotted royalblue;
border: 1px dashed greenyellow;
border-top: 1px solid darkorchid;
/* 上，右寄猩，下嫉晶，左 */
border-width: 1, 1, 1, 1;
/* 圓角屬性，設置為寬度的一半是正圓田篇，設置100%也是正圓替废，推薦使用100%，不易出錯 */
border-radius: 100%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
· 陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: dodgerblue;
/* 參數(shù)為正數(shù)泊柬，則陰影向右偏移椎镣，參數(shù)為負數(shù)，則陰影向左*/
box-shadow: 10px;
/* 參數(shù)為正數(shù)兽赁，則陰影向右偏移状答，參數(shù)為負數(shù)冷守，則陰影向左*/
/* 在x方向和y方向上同時移動陰影 */
box-shadow: 10px 10px;
/* 參數(shù)為正數(shù)，則陰影向右偏移惊科，參數(shù)為負數(shù)拍摇，則陰影向左*/
/* 陰影顏色為灰色 */
box-shadow: 10px 10px gray;
/* 參數(shù)為正數(shù)，則陰影向右偏移馆截，參數(shù)為負數(shù)充活，則陰影向左*/
/* x軸方向偏移，y軸方向偏移蜡娶，陰影模糊程度混卵，陰影顏色，用rgba作為陰影顏色更好翎蹈，有透明度淮菠，更容易透出底色男公，顯得更和諧一些 */
box-shadow: 10px 10px 10px gray;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
