HTML-CSS笔记
HTML5-CSS3
HTML元素的lang屬性
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body> </html>html元素是HTML文檔的根元素，一個文檔中只能有一個，其他所有元素都是它的后代元素
w3C標準建議為html元素增加一個lang屬性，作用是
幫助語音合成工具確定要使用的發音
幫助翻譯工具確定要使用的翻譯規則
lang="en"告訴瀏覽器︰這個HTML文檔的語言是英文。
lang="zh"表示這個HTML文檔的語言是中文。
head元素嵌套的元素
1.head元素里面的內容是一些“元數據”（元數據︰描述數據的數據)
一般用于描述網頁的各種信息，比如字符編碼、網頁標題、網頁圖標
2.title元素
網頁的標題
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>京東(JD)</title><link rel="icon" href="https: / /www.jd.com/favicon.ico"><style>h1{color：red;font-size: 50px;}</style></head><body><h1>彭于晏哈哈哈哈哈</h1></body> </html>3.meta元素
可以用于設置網頁的字符編碼，讓瀏覽器更精準地顯示每一個文字，不設置或者設置錯誤會導致亂碼
—般都使用UTF-8編碼，涵蓋了世界上幾乎所有的文字
在HTML5之前，meta標簽的寫法也是比較復雜的
<meta http-equiv="Conten-Type" content="text/html"; charset="UTF-8">4.body元素
里面的內容將是你在瀏覽器窗口中看到的東西，也就是網頁的具體內容和結構
5.h元素
表示網頁的標題
h1~h6共規定了6個等級的標題
6.p元素
表示文章中的一個段落（ paragraph )
| p標簽 | 有行間距，默認前后換行 | 不保留空格和換行，字體不變 |
| pre標簽 | 有行間距，默認前后換行 | 保留空格和換行，變為等寬字體 |
7.strong元素
用于強調某些文本，粗體的顯示效果
8.code元素
用于顯示程序代碼
9.br元素
在不產生一個新段落的情況下進行換行，使用< br/>標簽。
8.hr元素
分割線
9.
<b> 加粗效果
<i> ?斜體效果?
<u> 下劃線效果
HTML文本格式化
| <b> | 定義粗體文本 |
| <big> | 定義大號字 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| < sub> | 定義下標字 |
| < sup> | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML樣式
style 屬性用于改變HTML元素的樣式。 *background-color屬性為元素定義了背景顏色； font-family定義了文本的字體系列； color 定義了字體顏色； font-size定義了字體尺寸; text-align規定了元素中文本的水平對齊方式。*
要想在網頁中正確地顯示這些預留子符，必須便用子符實體，書寫格式一般有2種
&entity_name;
&#entity_number;
比較常用的有
| 空格 |   ; |   ; | |
| < | 小于號 | < ； | O ; |
| > | 大于號 | > ; | > ; |
| & | 和號 | & ; | & ; |
| " | 雙引號 | " ; | " ; |
| ‘ | 單引號 | &apos ; | ' ; |
| 分(cent) | ¢ ; | ¢ ; | |
| 鎊[pound) | £ ; | £ ; | |
| ￥ | 元(yen) | ¥ ; | ¥ ; |
| 歐元(euro) | &euro ; | € ; | |
| 小節 | § ; | § ; | |
| 版權(copyright) | © ; | ©?； | |
| 注冊商標 | ® ; | ® ; | |
| 商標 | &trade ; | ™ ; | |
| × | 乘號 | × ; | × ; |
| ÷ | 除號 | ÷ ; | ÷ ; |
字符實體練習
<body><div title="我是一段‘特殊’的文本"> 我是彭于晏 </div> </body>常用快捷鍵:
| Ctrl+D | 復制上一行到下一行 |
| Ctrl+/ | 可以把選中的代碼全部注釋掉 |
| shift+F6 | 重命名 |
| shift+F | 搜索 |
| Alt+F2 | 打開瀏覽器 |
| ctrl+alt+L | 格式化代碼 |
| shift+tab | 退格 |
| Ctrl+X | 刪除行 |
| ctrl+k | 代碼快速格式化 美觀 |
span元素的使用
p標簽指一個段落，是塊級元素，span是行內元素，一般單獨修飾文字；
span 標簽可以放在p標簽里,p標簽不應該放在span標簽里；
<head><meta charset="UTF-8"><title>彭于晏</title><style>.text {color: blue;font-size: 30px;}.new-price{color: red;font-size: 30px;}.oid-price {color: aquamarine;text-decoration: line-through;}</style> </head> <body>我是一段文本<span class="text"> 我也是一段文本 </span> <!-- ? 價格的顯示--><P><span class="new-price">￥69</span> ?<span class="oid-price">￥99</span></P> </body>div元素的使用
<head><meta charset="UTF-8"><title>Title</title><style> ?.box1 {float: left;} ?.box2 {float: right;}</style> </head> <body><div class="box1"><h2>哈哈哈哈哈</h2><P>hahahahaha</P></div> ?<div class="box2"><h2>呵呵呵呵呵呵呵</h2><P>hehhehehehhehe</P></div> </html>結論1
| div | 定義文檔中的分區或節（division/section)。一般用于用于對大的內容塊設置樣式屬性 |
| span | 沒有特定的含義,一般用于用于為部分文本設置樣式屬性 |
ing元素相對路徑
img元素如果只設置了width (或height )，瀏覽器會自動根據圖片寬高比計算出height (或width )
在HTML5規范中，alt是img元素的必要屬性
width、height的默認單位是px，像素
<body><p>本地圖片地址(相對路徑）</p><img src="..\img\03.jpg"alt=""width="300"><!-- alt屬性：當圖片（加載失敗）時 顯示文本 ? --><img src="https://safa" alt="gif圖片"> </body>常用圖片格式
png: 靜態圖片，支持透明
jpg : 靜態圖片，不支持透明
gif : 動態圖片、靜態圖片，支持透明
<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="400" frameborder="no" border="0" width="20%"> </iframe> 原文鏈接：https://idealclover.top/archives/617/ 2021新冠實時疫情圖網站推薦
iconfont 網址查找你想要的小圖標
favicon制作圖標大小
https://html5.tool.webfrontend.dev/ 學習標簽信息
https://www.w3school.com.cn/html/html_css.asp學習HTML
flatuicolors 顏色選擇
<l -- body標簽的bgco1or團性指定背景顏色。--> <!-- <body bgcolor="blue"> --> <l -- body標簽的background屬性指定背景圖片。 --> <body background="images/01.png">無序列表
| ul | unordered lists 的縮寫 | 無序列表的外邊界 |
| li | list item的縮寫 | 列表項 |
屬性 屬性值
disc（實心圓）
type circle（空心圓）
square（方塊）
?
- 看書
- 玩游戲
- 游泳
?
有序列表
| ol | ordered lists的縮寫 | 有序列表的外邊界 |
| li | list item的縮寫 | 列表項 |
自定義列表
| dl | definition lists的縮寫 | 自定義列表的外邊界 |
| dt | definition term的縮寫 | 列表項中的標題 |
| dd | definition description的縮寫 | 列表項中的內容 |
表格
| table | 表格 | 表格的外邊界 |
| tr | table row的縮寫 | 定義行 |
| td | table data cell的縮寫 | 定義單元格 |
table的屬性
| border | 設置邊框 默認為0 沒有邊框 | 單位為px像素值 |
| cellspacing | 外邊距，設置單元格與單元格之間的距離 | 單位為px像素值 |
| cellpadding | 內邊距。設置文字與單元格之間的距離 | 默認1px |
| width | 設置表格的寬度 | 單位px，或者百分比 |
| height | 設置表格高度 | 單位px，或者百分比 |
| align | 設置表格在網頁中的對齊方式 | left左 right右 center居中 |
| bgcolor | 設置背景顏色 | white red green |
表格的合并
| colspan | 單元格貫穿多少列(橫向合并單元格) | 數值 |
| rowspan | 單元格貫穿多少行（縱向合并單元格) | 數值 |
表格的標題及加粗
| th | 表頭，表格第一行默認加粗 |
| caption | 表格的標題 |
form標簽
| form | 定義表單，收集內部控件的信息發送給指定頁面 |
| input | 定義了文本框及提交按鈕 |
| action | 定義表單發送的目標地址 |
| method | 定義表單發送方式 |
| get | 表單信息以“明文”方式發送網址長度不能超過2048個字符 | 發送非安全數據 |
| post | 表單信息包含在HTTP請求正文中,不在網址上顯示。沒有大小限制,可發送大量數據 | 發送敏感信息、個人信息:文件上傳等 |
get方式提交時，多個數據形成的網址格式為：
目標網址﹖鍵1=值1&鍵2=值2
https : / /www. baidu.com/s?username=abc&password=123#
| type | 控制input控件的交互形式 |
| neme | 控件向服務器提交信息時的“鍵”名 |
| value | 控件默認填充的數值 |
| placeholder | 占位文字，光標聚焦輸入文字時消失 |
| type="radio" | 單選按鈕，每個選項name相同才有互斥功能 |
| type="checkbox” | 復選框，每個選項name相同表達多選概念 |
| checked="checked" | 選項默認選中的狀態 |
input屬性值
| text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為20個字符. |
| password | 定義密碼字段。該字段中的字符被掩碼。 |
| checkbox | 定義復選框。 |
| radio | 定義單選按鈕。 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有數捆。 |
| submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器 |
| button | 定義可點擊按鈕（多數情況下，用于通過JavaScript啟動腳本> |
| image | 定義圖像形式的提交按鈕。 |
| file | 定義輸入字段和“瀏覽"按鈕，供文件上傳。 |
| hidden | 定義隱藏的輸入字段。 |
| date | 定義日期輸入框,以及日期選擇控件。 |
select標簽
| select | 下拉列表框 |
| option | 選項 |
| multiple="multiple" | 可以選中多個選項 |
| size="n" | 窗口可以同時顯示n個選項 |
| selected="selected" | option標簽中，被選中的狀態 |
textarea標簽
| textarea | 文本區 |
| cols=30 | 列，橫向顯示的字符數 |
| rows=10 | 行，縱向顯示的行數 |
| fieldset | 為表單分組 |
| legend | 為fieldset標簽定義標題 |
塊級、行內級元素概念
塊級元素(blook level element):
獨占父元素一行·
標簽默認帶換行效果的元素，例如:div、p、 pre、h1~h6、ul、ol、li、 dl、 dt、dd、 table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、 hr等
行級元素(inline oloment，內聯元素）:
多個行內級元素可以在父元素的同一行中顯示
標簽默認不帶換行效果的元素，例如:a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video,audio等
替換、非替換元素
替換元素(replaced elements )
元素本身沒有實際內容，瀏覽器根據元素的類型和屬性，來決定元素的具體顯示內容比如img、input、 iframe.video、embed、 canvas、audio、object等
非替換元素( non-replaced elements )
和替換元素相反，元素本身是有實際內容的，瀏覽器會直接將其內容顯示出來，而不需要根據元素類型和屬性來判斷到底顯示什么內容
CSS屬性-display-修改元素的顯示類型
CSS中有個display屬性，能修改元素的顯示類型，有4個常用值
block :讓元素顯示為塊級元素
inline :讓元素顯示為行內級元素
none:隱藏元素
inline-block :讓元素同時具備行內級、塊級元素的特征
display:1.block-(瀏覽器默認給div/p/h1..元素設置了display :block)2.inline·(將block元素轉回到行內元素)3.none -(隱藏元素，不占據空間)4.inline-block...可以和其他元素在同一行顯示display:1.block-(瀏覽器默認給div/p/h1..元素設置了display :block)2.inline·(將block元素轉回到行內元素)3.none -(隱藏元素，不占據空間)4.inline-block... 可以和其他元素在同一行顯示可以設置寬度和高度 div,p,h1{background-color: red;width: 200px;height: 50px;display: inline-block; }display的以下取值，等同于某些HTML元素
table : <table> ，—個block-level表格
inline-table : <table> ，一個inline-level表格table-row : <tr>
table-row-group : <tbody>
table-header-group : <thead>
table-footer-group : <tfoot>
table-cell : <td>、 <th> ，一個單元格
table-caption : <caption> ，表格的標題
list-item : <li>
CSS屬性-visibility-控制元素的可見性
visibility，能控制元素的可見性，有2個常用值
visible :顯示元素
hidden:隱藏元素
visibility: hidden;和display: none;的區別
visibility: hidden;
雖然元素看不見了，但元素的框依l舊還留著，還會占著原來的位置
display: none;
不僅元素看不見了，而且元素的框也會被移除，不會占著任何位置
CSS屬性-overflow-控制內容溢出時的行為
overflow用于控制內容溢出時的行為
visible :溢出的內容照樣可見
hidden :溢出的內容直接裁剪
scroll:溢出的內容被裁剪，但可以通過滾動機制查看
會—直顯示滾動條區域，滾動條區域占用的空間屬于width、height
auto :自動根據內容是否溢出來決定是否提供滾動機制
還有overflow-x、overflow-y兩個屬性，可以分別設置水平垂直方向
(建議還是直接使用overflow，因為目前overflow-x、overflow-y還沒有成為標準，瀏覽器可能不支持)
CSS屬性-盒子模型
HTML中的每一個元素都可以看做是一個盒子，如右下圖所示，可以具備這4個屬性
內容( content )
盒子里面裝的東西
內邊距( padding )
盒子邊緣和里面裝的東西之間的間距
邊框( border )
就是盒子的邊框，邊緣部分
外邊距( margin )
盒子和其他盒子之間的間距
內容相關屬性
width :寬度 min-width:最小寬度，無論內容多少，寬度都大于或等于min-width
max-width:最大寬度，無論內容多少，寬度都小于或等于max-width height:高度 min-height :最小高度，無論內容多少，高度都大于或等于min-height
max-height :最大高度，無論內容多少，高度都小于或等于max-height
內邊距相關屬性
padding-top: 20px;padding-right: 30px;padding-bottom: 40px;padding-left: 50px;/* 上右下左 這個規律 沒有的值按相反的方向的值默認代替*/pading: 10px 20px 30px 40px ? ?外邊距相關屬性
margin-left :左外邊距
margin-right:右外邊距
margin-top :上外邊距
margin-bottom :下外邊距
margin : 是margin-top、margin-right、margin-bottom、margin-left的簡寫屬性
上下margin傳遞
margin-top傳遞
如果塊級元素的頂部線和父元素的頂部線重疊，那么這個塊級元素的margin-top值會傳遞給父元素
margin-bottom傳遞
如果塊級元素的底部線和父元素的底部線重疊，并且父元素的高度是auto，那么這個塊級元素的margin-bottom值會傳遞給父元素
如何防止出現傳遞問題?
給父元素設置padding-top\padding-bottom
給父元素設置border
觸發BFC:設置overflow為auto/hidden
BEC: block format context 結界
如何觸發BFC：
浮動可以觸發
設置一個元素的overflow為非visible
hidden、auto、scroll
建議：
margin：一般是用來設置兄弟元素之間的間距
padding：一般是用來設置父子元素之間的間距
上下margin折疊
垂直方向上相鄰的2個margin ( margin-top、margin-bottom )有可能會合并為1個margin，這種現象叫做collapse（折疊）
水平方向上的margin ( margin-left、margin-right )永遠不會折疊 只能上下
折疊后最終值的計算規則
兩個值進行比較，取較大的值
如何防止margin collapse ?
只設置其中一個元素的margin
border邊框相關的屬性
邊框寬度
border-top-width、border-right-width、border-bottom-width、border-left-widthborder-width是上面4個屬性的簡寫屬性
邊框顏色
border-top-color、border-right-color、border-bottom-color、border-left-colorborder-color是上面4個屬性的簡寫屬性
邊框樣式
border-top-style、border-right-style、border-bottom-style、border-left-styleborder-style是上面4個屬性的簡寫屬性
border邊框樣式的取值
none :沒有邊框，邊框顏色、邊框寬度會被忽略
dotted :邊框是一系列的點
dashed :邊框是一條虛線
solid :邊框是一條實線（常用）
double :邊框有兩條實線。兩條線寬和其中的空白的寬度之和等于border-width的值
groove :邊框看上去好象是雕刻在畫布之內
ridge : 和grove相反，邊框看上去好像是從畫布中凸出來
inset: 該邊框使整個框看上去好像是嵌在畫布中
outset : 和inset相反，該邊框使整個框看上去好象是從畫布中凸出來
border實現形狀
border-left-color：transpacent；//透明
transform：rotate(-45deg); // 三角形旋轉
行內非替換元素的注意點
以下屬性對行內非替換元素不起作用
width、height、margin-top、margin-bottom
以下屬性對行內非替換元素的效果比較特殊
padding-top.padding-bottom、上下方向的border
boorder圓角形狀
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><style>/* body{margin: 0;} *//* 圓角 */.box{width: 200px;height: 200px;background-color: #5eff42;border-top-left-radius: 50px 50px;border-top-right-radius: 50px 50px;border-bottom-left-radius: 50px 50px;border-bottom-right-radius: 50px 50px;}/* 圓形 */.box1{margin-top: 20px;width: 200px;height: 200px;background-color: #7751A5;border-radius: 100px;}</style><body><div class="box"></div><div class="box1"></div></body> </html> ?CSS屬性-outline-元素的外輪廓
outline表示元素的外輪廓不占用空間 默認顯示在border的外面 outline相關屬性有 outline-width outline-style:取值跟border的樣式一樣，比如solid、dotted等
outline-color outline : outline-width、outline-style、outline-color的簡寫屬性，跟border用法類似 應用實例 去除a元素、input元素的focus輪廓效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>a, input, textarea{outline: none;}</style></head><body><a href="#">百度一下</a><input type="text" /></body> </html>CSS屬性-box-shadow-陰影
<shadow> = insei? && <length>{2,4}&& <color>?
第1個<length> :水平方向的偏移，正數往右偏移
第2個<length> :垂直方向的偏移，正數往下偏移
第3個<length>:模糊半徑( blur radius )
第4個<length> :延伸距離
<color> :陰影的顏色，如果沒有設置，就跟隨color屬性的顏色
inset:外框陰影變成內框陰影
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.box{width: 200px;height: 200px;background-color: #ffffff;border: 2px solid orange;margin: 30px auto;box-shadow: 0px 10px 10px 10px rgba(0,0,0,.2);}</style></head><body><div class="box"></div></body> </html> ?CSS屬性-text-shadow-文字添加陰影
text-shadow用法類似于box-shadow，用于給文字添加陰影效果
text-shadow同樣適用于::first-line(第一行文字）、:first-letter（第一個字）
盒子尺寸-box-sizing
box-sizing用來設置盒子模型中寬高的行為
content-box：
padding、 border都布置在width、height外邊
border-box：
padding、border都布置在width、height里邊
內容盒子
content-box:·含義是設置寬度和高度時只是指定內容的寬高
border-box:含義是設置寬度和高度時是內容+內邊距+邊框的寬度
box-sizing：border-box 盒子的內減
元素的水平居中顯示
在一些需求中，需要元素在父元素中水平居中顯示(父元素一般都是塊級元素、inline-block )
行內級元素、inline-block元素
水平居中:在父元素中設置text-align: center
塊級元素
水平居中 :margin: 0 auto
CSS屬性-背景
background-image用于設置元素的背景圖片
會蓋在(不是覆蓋)background-color的上面
如果設置了多張圖片
background-image: ur1( "bg001.png")，ur1("bg002.png" )，ur1("bg003.png");
設置的第一張圖片將顯示在最上面，其他圖片按順序層疊在下面
注意:如果設置了背景圖片后，元素沒有具體的寬高，背景圖片是不會顯示出來的
CSS屬性-平鋪
background-repeat用于設置背景圖片是否要平鋪
常見的設值有
repeat:平鋪 no-repeat :不平鋪
repeat-x:只在水平方向平鋪
repeat-y:只在垂直平方向平鋪
平鋪效果
background-repeat：repaat-x
background-repeat：repaat-y
CSS屬性-背景圖片大小
background-size用于設置背景圖片的大小
auto:以背景圖本身大小顯示
cover :縮放背景圖，以完全覆蓋鋪滿元素
contain:縮放背景圖，寬度或者高度鋪滿元素，但是圖片保持寬高比
<percentage> :百分比，相對于背景區
length :具體的大小，比如100px
CSS屬性-背景圖片方向
background-position
水平方向還可以設值:left、 center、right 垂直方向還可以設值: top、center、bottom 如果只設置了1個方向，另一個方向默認是center 比如background-position: 80px;等價于background-position: 80px center;
CSS-sprite-圖片合并
什么是CSS Sprite
是一種CSS圖像合成技術，將各種小圖片合并到一張圖片上，然后利用CSS的背景定位來顯示對應的圖片部分有人翻譯為:CSS雪碧、CSS精靈
使用CSS Sprite的好處
減少網頁的http請求數量，加快網頁響應速度，減輕服務器壓力減小圖片總大小
解決了圖片命名的困擾，只需要針對一張集合的圖片命名
background-positiom： 0 -192px
背景圖居中
background-positiom： center -30px
CSS屬性-背景滾動模式
background-attachment可以設置以下3個值
scroll:背景圖片跟隨元素一起滾動(默認值) 隨著.box的滾動(瀏覽器),·背景一起滾動
local:背景圖片跟隨元素以及元素內容一起滾動 會隨著.box內容時滾動,背景一起滾動
fixed:背景圖片相對于瀏覽器窗口固定 背景是固定的,不會隨著.box的滾動而滾動
CSS屬性-背景相關屬性的簡寫屬性
background是一系列背景相關屬性的簡寫屬性，常用格式是
image position/size repeat attachment color
background-size可以省略，如果不省略，/background-size必須緊跟在background-position的后面其他屬性也都可以省略，而且順序任意
background-image和img的選擇
總結：
img，作為網頁內容的重要組成部分，比如廣告圖片、LOGO圖片、文章配圖、產品圖片
background-image，可有可無。有，能讓網頁更加美觀。無，也不影響用戶獲取完整的網頁內容信息
CSS屬性-cursor-光標
cursor可以設置鼠標指針(光標)在元素上面時的顯`示樣式
cursor常見的設值有 auto:瀏覽器根據上下文決定指針的顯示樣式，比如根據文本和非文本切換指針樣式 default :由操作系統決定，一般就是一個小箭頭 pointer :一只小手，鼠標指針挪動到鏈接上面默認就是這個樣式 text :—條豎線，鼠標指針挪動到文本輸入框上面默認就是這個樣式 none :沒有任何指針顯示在元素上面
標準流（Normal Flow)
默認情況下，元素都是按照normal flow(標準流、常規流、正常流、文檔流【document flow】)進行排布
從左到右、從上到下按順序擺放好
默認情況下，互相之間不存在層疊現象
CSS屬性-position-元素定位
利用position可以對元素進行定位，常用取值有4個
static:靜態定位
1.position屬性的默認值 2.元素按照normal flow布局 3.left 、 right、top、bottom沒有任何作用
relative :相對定位
1.元素按照normal flow布局 2.可以通過left、 right、top. bottom進行定位定位 3.參照對象是元素自己原來的位置
absolute :絕對定位
1.元素脫離normal flow（脫離標準流、脫標) 2.可以通過left、 right、top、 bottom進行定位 3.定位參照對象是最鄰近的定位祖先元素
定位元素( positioned element )position值不為static的元素
fixed :固定定位
脫標元素的特點
可以隨意設置寬高
寬高默認由內容決定
不再受標準流的約束
不再給父元素匯報寬高數據
子絕父相
在絕大數情況下，子元素的絕對定位都是相對于父元素進行定位
如果希望子元素相對于父元素進行定位，又不希望父元素脫標，常用解決方案是:
父元素設置position: relative (讓交元素成為定位元素，而且父元素不脫離標準流)
子元素設置position: absolute
絕對定位技巧
絕對定位元素( absolutely positioned element )
position值為absolute或者fixed的元素
對于絕對定位元素來說
定位參照對象的寬度= left + right + margin-left + margin-right ＋ 絕對定位元素的實際占用寬度
定位參照對象的高度= top + bottom + margin-top + margin-bottom +絕對定位元素的實際占用高度
如果希望絕對定位元素的寬高和定位參照對象一樣，可以給絕對定位元素設置以下屬性left: 0、right: 0、top: 0、 bottom: 0、margin:0
如果希望絕對定位元素在定位參照對象中居中顯示，可以給絕對定位元素設置以下屬性left: 0、 right: 0、top: 0、 bottom: 0、margin: auto
另外，還得設置息體的寬高值（寬高小于定位參照對象的寬高）
/* 1.讓完全占據父元素 */ */ */left: 0;right: 0;top: 0;bottom: 0; background-color: yellow; ? /* 2.讓內容居中 */width: 200px;height: 200px; left: 0;right: 0;top: 0;bottom: 0;margin: auto auto;background-color: yellow;| static-靜態定位 | × | × | × | × |
| relative-相對定位 | × | √ | × | 元素自己原來的位置 |
| absolute-絕對定位 | √ | √ | √ | 最鄰近的定位祖先元素(如果找不到這樣的祖先元素，參照對象是視口) |
| fixed-固定定位 | √ | √ | √ | 視口 |
元素的層疊
CSS屬性-z-index-定位元素的層疊順序
z-index屬性用來設置定位元素的層疊順序（僅對定位元素有效)
取值可以是正整數、負整數、o
比較原則
如果是兄弟關系
z-index越大，層疊在越上面
z-index相等，寫在后面的那個元素層疊在上面
如果不是兄弟關系
各自從元素自己以及祖先元素中，找出最鄰近的2個定位元素進行比較
而且這2個定位元素必須有設置z-index的具體數值
層疊關系
標準元素:標準流中的元素是不存在層疊
定位元素:定位元素會層疊到標準流元素的上面
定位元素之間可以z-lIndex 前提:必須是定位元素–非static
浮動元素: float: left / right
標準元素>浮動元素>定位元素
定位方案
在CSS中，有3種常用的方法對元素進行定位、布局
normal flow:標準流、常規流、文檔流
absolute positioning :絕對定位
float:浮動
絕對定位、浮動都會讓元素脫離標準流，以達到靈活布局的效果
CSS屬性-float-浮動
可以通過float屬性讓元素產生浮動效果，float的常用取值
none :不浮動，默認值
left:向左浮動
right:向右浮動
1.浮動的規則一
元素一旦浮動后脫離標準流
朝著向左或向右方向移動，直到自己的邊界緊貼著包含塊(一般是父元素）或者其他浮動元素的邊界為止
定位元素會層疊在浮動元素上面
2.浮動的規則二
浮動元素不能與行內級內容層疊，行內級內容將會被浮動元素推出
比如行內級元素、 inline-block元素、塊級元素的文字內容
利用此特性，可以輕松實現文字環繞功能
3.浮動的規則三
行內級元素、inline-block元素浮動后，其頂部將與所在行的頂部對齊
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><style>.box{height: 300px;background-color: #f00;}.inner1{float: left;width: 100px;height: 100px;background-color: orange;}.inner2{float: left;/* display: inline-block; */width: 150px;height: 150px;background-color: purple;}</style><body><!-- 三者之間的關系：position :absolute/fixed和float:left/right和display之間的關系現象解釋：1.inner2進行左浮動/右浮動的時候，只會在當前自己行中浮動2.inner1進行左浮動時，inner2在沒有浮動時，inner1會如何排布3.inner1進行左浮動時，inner2在沒有浮動時,但是里面有文本，文本會如何排布4 .inner1進行左浮動時， inner2也進行左浮動，那么innner1和inner2以此在第一行排布5.inner1和inner2都進行浮動,但是父元素沒有設置高度,那么父元素的高度會消失(高度的坍塌)--><div class="box"><div class="inner1"></div><div class="inner2">我是inner2的文本</div></div></body> </html>4.浮動的規則四
如果元素是向左(右）浮動，浮動元素的左(右）邊界不能超出包含塊的左(右)邊界
5.浮動的規則五
浮動元素之間不能層疊
如果一個元素浮動，另一個浮動元素已經在那個位置了，后浮動的元素將緊貼著前一個浮動元素（左浮找左浮，右浮找右浮)
如果水平方向剩余的空間不夠顯示浮動元素，浮動元素將向下移動，直到有充足的空間為止
6.浮動的規則六
浮動元素的頂端不能超過包含塊的頂端，也不能超過之前所有浮動元素的頂端
布局問題
問題:在進行布局時,同一行多個元素擺放后,設置margin-rlight讓他們之間產生間距,那么最有一個元素設置的margin-right總是多余:
解決辦法一:每一行的最后一個元素,總是加一個class,通過類選擇器去除這個margin-right
解決辦法二:通過偽類選擇器 兼容性問題
解決辦法三:container固定的寬度>.wrap+負margin>很多的item
URl的格式
協議://主機[∶端口]/路徑
例如:
https : // www. bilibili .cot/v/knowledge/
ftp://127.0.0.1:8080/course/lesson1.mp4
超鏈接標簽
| a | 定義超鏈接 |
| href | 定義超鏈接目標 |
外部鏈接:鏈接到其他網站的頁面的超鏈接
內部鏈接:鏈接自己網站的其他頁面的超鏈接
target元素-是否在當前標簽頁打開頁面
| target_self | 在當前標簽頁打開頁面 |
| target_blank | 在新標簽頁中打開頁面 |
| target_parent | 在父窗口打開URL |
| target_top | 在頂層窗口打開URL |
| 某個frame的name值 | 在某個frame中打開URL |
錨與錨點概念:
錨:就是在文檔中設置位置標記，并給該位置一個名稱，以便引用。
錨點:可以使鏈接指向當前文檔或不同文檔中的指定位置。
實現方式:
通過id定義位置的名稱，通過href=“#id名稱”定位到指定位置。
常見HTTP狀態碼及含義
| 400 | Bad Request | 錯誤請求 |
| 401 | Unauthor ized | 訪問被拒絕 |
| 403 | Forbidden | 禁止訪問 |
| 404 | Not Found | 沒有找到文件或目錄 |
| 500 | lnternal Server Error | 服務器內部錯誤 |
| 502 | Bad Gateway | 錯誤網關 |
| 503 | Service Unavailable | 服務不可用 |
| 504 | Gateway Timeout | 網關超時 |
meta標簽-針對搜索引擎的關鍵字
| meta | 可提供有關頁面的元信息（meta-information)，比如針對搜索引擎的關鍵字、描述信息等 |
| hame | keywords | content屬性中定義關鍵字 |
| name | description | content屬性中定義描述信息 |
注意:
meta標簽位于head標簽內。
元數據通常以名稱/值對出現。
如果沒有提供name屬性,那么名稱/值對中的名稱會采用http-equiv屬性的值。
<head><meta charset="utf-8"><title>元標簽</title><!-- 提供有關頁面的元信息 --><!-- 設定當前網頁的關鍵字 --><meta name="keywords" content="meta標簽，元標簽，浪海之帆" /><!-- 設定當前網頁的描述信息 --><meta name="description" content="meta元素可提供有關頁面的元信息，浪海之帆是來自福建的團隊 "/> </head>| charset | 字符集名稱 | 聲明網頁使用的字符集 |
audio標簽-播放音頻
| audio | 播放音頻 |
| source | 播放音頻源文件位置 |
| autoplay | 自動播放 |
| controls | 顯示控制欄 |
| loop | 循環播放 |
video標簽-播放視頻
| video | 播放視頻 |
| source | 指定視頻源文件位置和類型 |
| autoplay | 自動播放 |
| controls | 顯示控制欄 |
| loop | 循環播放 |
iframe標簽-創建包含另外一個文檔的內聯框架
| iframe | 創建包含另外一個文檔的內聯框架（即行內框架） |
| src | 文檔的路徑 | 規定在iframe中顯示文檔的URL |
| frameborder | 1 0 | 規定是否顯示框架周圍的的邊框 |
| width | 像素值 百分比 | 定義iframe的寬度 |
| height | 像素值 百分比 | 定義iframe的高度 |
| scrolling | yes no auto | 規定是否顯示iframe中顯示滾動條 |
| marginheight | 像素值 | 定義iframe的頂部和底部的邊距 |
| marginwidth | 像素值 | 定義iframe的左側和右側的邊距 |
語義標簽
語義標簽:就是根據網頁內容的語義,定義不同的標簽，讓內容的結構更清晰，
有助于開發人員和搜索引擎理解內容間的關系。
| header | 規定文檔或節的頁眉 |
| nav | 定義導航鏈接 |
| hgroup | 定義標簽組 |
| article | 定義文章 |
| section | 定義文檔中的節 |
| aside | 定義頁面內容以外的內容 |
| footer | 定義文檔或節的頁腳 |
CSS
什么是CSS ?
CSS的作用是∶可以給網頁中的每一個元素設置樣式(“化妝”、排版布局），讓網頁更加精美
完全沒有使用CSS的網頁:基本就是一堆從上到下、從左到右挨在一起的文字和圖片
CSS的全稱是Cascading Style Sheets，層疊樣式表
常用CSS屬性
文本: color、direction、letter-spacing.word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字體: font、font-family、font-style、font-size、font-variant、font-weight
背景: background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型: width、height、border、margin、padding
列表:list-style
表格: border-collapse
顯示: display、 visibility、overflow、opacity、filter
定位: vertical-align、position、left、top、right、bottom、float、clear
CSS引入內聯(行內)樣式
<body><!---1.內聯(行內)樣式:-inline---><!---<h1 ·style=屬性名:屬性值;屬性名:屬性值;">網頁的標題</h1>1--><h1 style="font-size:50px; color: red;">網頁的標題</h1> <p>網頁的段落</p><a href="#">百度一下</a><div style="font-size: 30px; background-color: aqua;">哈哈哈哈哈</div></body>CSS引入內部樣式表
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>/* 選擇器{屬性名：屬性值} *//* 單個選中h1元素 */h1{font-size: 50px;color: red;}div{font-size: 30px;}/* 并集選擇器 */h1,p,a {color: red;}/* 類選擇器 */.red {color: red;}</style></head><body><!--·文檔樣式表:document style sheet·--><!--·開發網頁特性:結構和樣式分離·--><h1>網頁的標題</h1><p>網頁的段落</p><a href="#">百度一下</a><div class="red">哈哈哈哈哈哈</div></body> </html>CSS引入外部樣式表
CSS代碼保存在擴展名為.css的樣式表中 HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導入式。 語法： 1、鏈接式 <link type="text/css" rel="styleSheet" href="CSS文件路徑" /> 2、導入式
<style type="text/css"> @import url("css文件路徑"); </style>
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- link引入樣式：rel="stylesheet" --><link rel="stylesheet" ?href="./css/style.css"/><!-- import引入 --><style>@import url("./css/style.css");</style></head><body><!-- 外部樣式表 --><h1>網頁的標題</h1><p>網頁的段落</p><a herf="#">百度一下</a><div>哈哈哈哈哈哈</div></body> </html>鏈接式和導入式的區別
<link> 1、屬于XHTML 2、優先加載CSS文件到頁面 @import 1、屬于CSS2.1 2、先加載HTML結構在加載CSS文件。
四、CSS中的優先級
1、樣式優先級
行內樣式>內部樣式>外部樣式(后兩者是就近原則)
樣式應用方式對比
| 行內樣式表 | 書寫方便 | 沒有實現樣式和結構分離 | 控制一個元素（少） | 較少 |
| 內部樣式表 | 部分結構和樣式相分離 | 需要引入 | 控制一個頁面（中） | 較多 |
| 外部樣式表 | 完全實現結構和樣式相分離 | 沒有徹底分離 | 控制整個站點 | 最多 |
CSS選擇器（selector）
什么是CSS選擇器？ 按照一定的規則選出符合條件的元素，為之添加CSS樣式 選擇器的種類繁多，大概可以這么歸類： 通用選擇器( universal selector )
元素選擇器（ type selectors )
類選擇器( class selectors )
id選擇器( id selectors ) 屬性選擇器( attribute selectors )
組合( combinators ) 偽類( pseudo-classes )
偽元素( pseudo-elements )
統配選擇器
一般用來給所有元素作一些通用性的設置
比如內邊距、外邊距
參考:http://www.jd.com
效率比較低，盡量不要使用
<head><meta charset="utf-8"><title></title><!-- <style>統配選擇器*{color: red;}</style> --> </head>常用選擇器種類
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>/* 選擇器{屬性名：屬性值} *//* 單個選中h1元素 */h1{font-size: 50px;color: red;}div{font-size: 30px;}/* 并集選擇器 */h1,p,a {color: red;}/* 類選擇器 */.red {color: red;}</style></head><body><!--·文檔樣式表:document style sheet·--><!--·開發網頁特性:結構和樣式分離·--><h1>網頁的標題</h1><p>網頁的段落</p><a href="#">百度一下</a><div class="red">哈哈哈哈哈哈</div></body> </html>類別選擇器
類別選擇器:使用“.類名”，選中指定類別的元素。
注意:同一個元素可以屬于多個類別,可以用空格隔開，樣式同時生效。
效果:相同類別的元素樣式相同，同一個元素可以屬于多個類別，應用多個樣式效果。
/* 類選擇器 */.red {color: red;}.abc{font-size: 30px;background-color: orange;width: 60%}<div class="red abc">哈哈哈哈哈哈</div>RGB顏色
十六進制表示形式
#rrggbb，每一種顏色取值范圍00~FF，大小寫都可以
#ff0000:紅色，#OOff00∶綠色，#0000ff :藍色，#000000:黑色，#fffff:白色，#fff00∶黃色
例如：#CC6600
CC------->12+12*16=12+192=204
RGB顏色規律
RGB顏色值越大，越靠近白色，越淺色
RGB顏色值越小，越靠近黑色，越深色
RGB顏色值一樣的，一般是灰色
RGBA顏色
RGBA顏色在RGB顏色的基礎上加了個alpha，實現帶有透明度的顏色
rgba(red, green, blue, alpha)
alpha取值范圍是0.0~1.0
0代表完全透明，1代表完全不透明
<body><style > div{width:200px;height: 200px;/* background-color:rgb(255,200,100); *//* background-color: rgba(130,150,54,1); */background-color: #FF0000;}</style><div></div> </body>文本屬性
1.text-decoration-設置文字的裝飾線
用于設置文字的裝飾線
none :無任何裝飾線
√可以去除a元素默認的下劃線
underline :下劃線
overline : 上劃線
line-through :中劃線（刪除線)
<head><meta charset="utf-8"><title></title><style>a{text-decoration: none;}</style></head><body><a href="#">百度一下</a> </body>2.letter-word-spacing-間隔
letter-spacing：每個字母間隔
word-spacing: 單詞間隔
3.text-transform-設置文字的大小寫轉換
用于設置文字的大小寫轉換
可以設置以下值
capitalize :將每個單詞的首字符變為大寫
uppercase :將每個單詞的所有字符變為大寫
lowercase :將每個單詞的所有字符變為小寫
none:沒有任何影響
4.text-indent-內容的縮進
text-indent用于設置第一行內容的縮進
text-indent: 2em;剛好是縮進2個文字
em---> 1em*20px=20px
text-indent:1em;
font-size: 20px;
5.text-align-在元素中的水平對齊
text-align可用于設置元素內容在元素中的水平對齊方式常用的值
left : 左對齊
right :右對齊
center : 正中間顯示
justify :兩端對齊
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.box1{background-color: #aaffff;text-align: center;}.box2{background-color: #f0f;text-align: center;}.a03{background-color: aqua;text-align: center; }.a04{background-color:purple;width: 200px;display: inline-block;}</style></head><body><div class="box1">哈哈哈哈哈</div><div class="box2"> <img src="./images/按鈕.png" alt="我的世界"></div><div class="a03"><div class="a04">我是div元素</div></div> </body> </html>文字屬性
1.font-size-決定文字的大小
font-size決定文字的大小
常用的設置
具體數值+單位
比如100px
也可以使用em單位:lem代表100%，2em代表200%，0.5em代表50%
百分比
基于父元素的font-size計算，比如50%表示等于父元素font-size的一半
2.font-family-設置文字的字體名稱
font-family用于設置文字的字體名稱
可以設置1個或者多個字體名稱(從左到右按順序選擇字體，直到找到可用的字體為止)
font-family: consolas;
font-family:“微軟雅黑""，consolas,Symbol，“Microsoft Sans Serif" ;
一般情況下，英文字體只適用于英文，中文字體同時適用于英文和中文
所以，如果希望中英文分別使用不同的字體，應該先將英文字體寫在前面，中文字體寫在后面
3.font-weight-設置文字的粗細(重量)
font-weight用于設置文字的粗細(重量)
100 | 200 [ 300 | 400 | 500 | 600 | 700 | 800 | 900:每一個數字表示一個重量
normal :等于400
bold:等于700
4.font-stlye-設置文字的常規、斜體顯示
font-style用于設置文字的常規、斜體顯示
normal:常規顯示
italic :用字體的斜體顯示 （前提是font-family這種字體本身是支持斜體）
oblique :文本傾斜顯示（讓文字傾斜）
em、i、 cite、address、var、dfn等元素的font-style默認就是italic
5.font-variant-影響小寫字母的顯示形式
font-variant可以影響小寫字母的顯示形式
可以設置的值如下
normal:常規顯示
small-caps :將小寫字母替換為縮小過的大寫字母
6.line-height-設置文本的最小行高
line-height用于設置文本的最小行高
行高可以先簡單理解為一行文字所占據的高度
行高的嚴格定義是︰兩行文字基線( baseline )之間的間距
基線( baseline ) :與小寫字母x最底部對齊的線
頂線( top ) 中線( middle ) 底線( bottom）
注意區分height和line-height的區別
height :元素的整體高度
line-height :元素中每一行文字所占據的高度 （文字的高度＋行距）
height=line-height 文字就居中了
font
font是一個縮寫屬性
font-style font-variant font-weight font-size/line-height font-family
font-style、 font-variant、font-weight可以隨意調換順序，也可以省略
font-size、font-family不可以調換順序，不可以省略
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>div{/* font-size: 30px;font-family: "宋體";font-weight: 700;font-style: italic;line-height: 50px;font-variant: small-caps; */font: 700 italic small-caps 30px/50px "宋體";}</style></head><body><div >這是div元素</div></body> </html>更多選擇器
屬性選擇器
| [title^="one"] | 選擇 title 屬性值以 "one" 開頭的所有元素 |
| [title$="one"] | 選擇 title 屬性值以 "one" 結尾的所有元素 |
| [title*="one"] | 選擇 title 屬性值中包含子串 "one" 的所有元素 |
后代選擇器(最 重要)
div p span{color: red; } 要div元素下有span元素就符合子選擇器(重要)
div元素里面的直接span子元素（不包括間接子元素）
div > span {color: red; }相鄰兄弟選擇器
div元素后面緊挨著的p元素(且div、p元素必須是兄弟關系)
div+p {color: red; }<P>文字內容1</P> <div><P>文字內容2</P </div> <P>文字內容3</P> //只有文字內容3符合 <P>文字內容4</P>全體兄弟選擇器
div元素后面的p元素(且div、p元素必須是兄弟關系)
div~p {color: red; } ? <P>文字內容1</P> <div><P>文字內容2</P </div> <P>文字內容3</P> //文字內容3符合 <P>文字內容4</P> //文字內容4符合交集選擇器(重要)
div.one {color: red; } ? <div class="one">文字內容1</div>//只有文字內容1符合 <div class="twp">文字內容2</div> <p class="one">文字內容3</p>所有同時符合3個條件的元素:div元素、class值有one、title屬性值等于test
div.one[title="test"] {color: red; } <div class="one">文字內容1</div> <div class="one" title="test">文字內容2</div>//只有文字內容2符合 <div class="one" title="other">文字內容3</div>并集選擇器(重要)
所有的div元素＋所有class值有one的元素＋所有title屬性值等于test的元素
div,.one,[title="test"]{color: red; } <div>文字內容1</div>//文字內容1符合 <span title="test">文字內容2</span>//文字內容2符合 <p class="one">文字內容3</P>//文字內容3符合 ? ? ? ? h1{ color: red;} h2{ color: red;} h3{ color: red;}----------------->h1,h2,h3,h4,h5{ h4{ color: red;} ? ? ? ? ? ? ? ? ? color: red; h5{ color: red;} ? ? ? ? ? ? ? ? }偽類和偽元素
1.目標和元素狀態偽類
2.動態偽類
1.:link
a:link未訪問的鏈接
a:visited已訪問的鏈接
a:hover鼠標挪動到鏈接上
a:active 激活的鏈接（鼠標在鏈接上長按住未松開)
使用注意：
:hover必須放在:link和:visited后面才能完全生效
:active必須放在:hover后面才能完全生效
所以建議的編寫順序是:link、:visited、:hover、:active
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style> /* 未訪問狀態 */a:link{color: red;}/* 已經訪問過 */a:visited {color: green;}/* 手指（鼠標）放上去 */a:hover {color: blue;}/* 手指點下去，未松手 */a:active{color: orange;}</style></head><body><a href="#">百度一下</a></body> </html>2.:focus-輸入焦點的元素（能接收鍵盤輸入)
:focus指當前擁有輸入焦點的元素（能接收鍵盤輸入)
文本輸入框一聚焦后，背景就會變紅色
imput:focus{backgroind: red; }因為鏈接a元素可以被鍵盤的Tab鍵選中聚焦，所以:focus也適用于a元素
input:focus{color: red; } ? a:focus{color: yellow; }動態偽類編寫順序建議是:link、:visited、:focus、:hover、:active
a:focus{outline: none;//可以讓a元素不被選中 把a元素的焦點去掉 } ? ? <!--tabindex可以調整tab選中元紊的順序·--> <a tabindex="-1" href="#">百度一下</a>3.結構偽類
1.nth-child(數字)
數字n為全部；偶數：even; 奇數：odd
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>·/*·交集選揮器:1必須是子元素中第三個元素·*/:nth-child(3){color: red;}</style></head><body><div><p>文字內容1</p><p>文字內容2</p><p>文字內容3</p><p>文字內容4</p><p>文字內容5</p></div></body> </html> ===================================================== <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style> /* 交集選擇器：是一個p元素同時作為子元素的第一個元素 */p:nth-child(1){color: red;}/* 后代選擇器：選擇p元素，但是后面是一個空格，選p的后代選擇后代的第一個元素 */p :nth-child(1){color: blue;}</style></head><body><div><p>文字內容1</p><p>文字內容2</p><p>文字內容3</p><p>文字內容4</p><p>文字內容5</p></div><p><strong>文字內容1</strong></p></body> </html> ?2.:nth-last-child(數字)
:nth-last-child()的語法跟:nth-child()類似，
不同點是:nth-last-child()從最后一個子元素開始往前計數
: nth-last-child(1)，代表倒數第一個子元素
:nth-last-child( -n + 2)，代表最后2個子元素
3.:nth-of-type(數字)
:nth-of-type()用法跟:nth-child()類似，
不同點是:nth-of-type()計數時只計算同種類型的元素
4.相關性
:first-child，等同于:nth-child(1)
: last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type( 1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯─的這種類型的子元素
:root，根元素，就是HTML元素
5.:empty
: empty代表里面完全空白的元素
:empty {width: 100px;height: 20px;background: red; }4.否定偽類
: not()的格式是:not(×)是一個簡單選擇器
元素選擇器、通用選擇器、屬性選擇器、類選擇器、id選擇器、偽類（除否定偽類)
:not(×)表示除x以為的元素
:not()支持簡單選擇器，不支持組合。比如下面的寫法是不支持的
:not(div.one){color: red; }5.偽元素
常用的偽元素有
:first-line、: :first-line
:first-letter、: :first-letter
: before、 : :before
:after. : : after
為了區分偽元素和偽類，建議偽元素使用2個冒號，比如::first-line
1.: : first-line-首行文本設置屬性
: : first-line可以針對首行文本設置屬性
只有下列屬性可以應用在::first-line偽元素
字體屬性、顏色屬性、背景屬性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
2.: :first-letter-針對首字母設置屬性
: :first-letter可以針對首字母設置屬性
只有下列屬性可以應用在::first-letter偽元素
字體屬性、margin屬性、 padding屬性、 border屬性、顏色屬性、背景屬性
text-decoration、text-transform、letter-spacing、word-spacing (適當的時候)、line-height、float、vertical-align(只有當float是none時)
3.: : before和: :after-內容之前或之后插入其他內容
: : before和: :after用來在一個元素的內容之前或之后插入其他內容(可以是文字、圖片)
在CSS屬性值中，使用ur1(圖片的URL)來引用圖片ur1(dot.png); ur1( ' dot.png ' );
<head><style> div {color: red;}/* 在元素前面插入內容 */div::before{content: "before";font-size: 40px;}/* 在元素后面插入圖片 */div::after{content: url(./images/按鈕.png);}</style> </head> <body><div>原來的一段文字</div> </body>總結
以上是生活随笔為你收集整理的HTML-CSS笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C盘里的文件夹都是干啥的
- 下一篇： Planner – 项目管理软件 - 小