關於 HTML5 和 CSS3 這些知識點你都知道多少–靜態篇
文章目錄
前言： 當我學過了前端的很多框架之後，發現自己的基礎的css3有點弱，這些H5和C3的新特性用特不是很熟練，因此現在回過頭來再學習一遍這些新的特性，當學過一些前端框架過後你會發現CSS3真的很重要！
1. HTML5 新增標籤
- header頭部標籤
- footer 底部標籤
- section 塊 區域標籤 可以理解爲較大的div
- article 文章內容標籤
- nav 導航標籤
- aside側邊欄
- audio 音頻
- video 視頻
input中新增的值
| 屬性值 | 說明 |
|---|---|
| type=“email” | 限制用戶輸入必須爲Email類型 |
| type=“url” | 限制用戶輸入必須爲URL類型 |
| type=“date” | 限制用戶輸入必須爲日期類型 |
| type=“time” | 限制用戶輸入必須爲時間類型 |
| type=“month” | 限制用戶輸入必須爲月類型 |
| type=“week” | 限制用戶輸入必須爲周類型 |
| type="number’ | 限制用戶輸入必須爲數字類型 |
| type=“tel” | 手機號碼 |
| type=“search” | 搜索框 |
| type=“color” | 生成一個顏色選擇表單 |
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內容不能爲空，必填 |
| placeholder | 提示文本 | 表單的提示信息，存在默認值將不顯示 |
| autofocus | autofocus | 自動聚焦屬性，頁面加載完成自動聚焦到指定表單 |
| autocomplete | off/ on | 當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。默認已經打開，如autocomplete=“on”，關閉autocomplete ="off"需要放在表單內，同時加上name屬性，同時成功提交 |
| multiple | multiple | 可以多選文件提交 |
2. css3 選擇器
2.1 css3 屬性選擇器
例如我們有兩個input 但是隻對一個有value屬性的input設置樣式，這樣我們就可以使用屬性選擇器
<style>
input[value] {
color: pink;
}
</style>
<body>
<input type="text" value="12123321">
<input type="text">
</body>
但是它不僅僅如此還可以根據屬性的值進行判斷,如下
<style>
input[type=text] {
color: pink;
}
</style>
<body>
<input type="text" value="123">
<input type="password" value="123">
</body>
| 選擇符 | Value |
|---|---|
| E[att] | 選擇具有att屬性的E元素 |
| E[att=“value”] | 選擇具有att屬性且屬性值等於value的E元素 |
| E[att^=“value”] | 選擇以value開頭的元素 |
| E[att$=“value”] | 選擇以value結尾的元素 |
| E[att*=“value”] | 選擇包含value的元素 |
2.2 結構僞類選擇器
| 選擇符 | 簡介 |
|---|---|
| E:first-child | 匹配父元素中的第一個子元素E |
| E:last-child | 匹配父元素中最後一個E元素 |
| E:nth-child(n) | 匹配父元素中的第n個子元素E |
| E:first-of-type | 指定類型E的第-一個 |
| E:last-of-type | 指定類型E的最後-個 |
| E:nth-of-type(n) | 指定類型E的第n個 |
類似這種情況就會很方便
ul li:first-child {
color: pink;
}
ul li:last-child {
color: pink;
}
ul li:nth-child(3) {
color: pink;
}
<ul>
<li>我是第1個孩子</li>
<li>我是第2個孩子</li>
<li>我是第3個孩子</li>
<li>我是第4個孩子</li>
<li>我是第5個孩子</li>
</ul>
小知識：這個 ul>li{我是第$個孩子}*5 可以快捷生成上面的標籤哦~！
通過nth-child()我們還可以隔行變色，通過選中所有的基數或則偶數行設置樣式 ，如下：
/* 基數行 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 偶數行 */
ul li:nth-child(even) {
background-color: #ccc;
}
如果nth-child(n)在這個括號裏面寫n的話 則表示選中所有的子元素
| 公式 | 取值 |
|---|---|
| 2n | 偶數 |
| 2n+1 | 奇數 |
| 5n | 5 10 15… |
| n+5 | 從第5個開始(包含第五個)到最後 |
| -n+5 | 前5個(包含第5個) … |
2n 因爲n是從0開始的 所以2n就是所有的偶數，2n+1就是基數，同理其他的也是這樣算的。
至於E:first-of-type、 E:last-of-type和E:nth-of-type(n) 這三個和 上面講的三個很像，功能類似 ，但是它可以將指定的元素排序號。nth-child是給所有的孩子節點排序，然而nth-of-type是給指定類型的孩子節點排序
2.3 css3 僞元素選擇器
僞元素選擇器可以幫助我們利用CSS創建新標籤元素,而不需要HTML標籤,從而簡化HTML結構。
| 選擇 | 簡介 |
|---|---|
| ::before | 在元素內部的前面插入內容 |
| ::after | 在元素內部的後面插入內容 |
-
before和after創建一個元素 ,但是屬於行內元素想設置大小需要轉換爲塊元素等。
-
新創建的這個元素在文檔樹中是找不到的,所以我們稱爲僞元素
-
語法: element::before{}
-
before和after 必須有content屬性
-
before在父元素內容的前面創建元素, after在父元素內容的後面插入元素
-
僞元素選擇器和標籤選擇器一樣,權重爲1
那麼這個有哪些應用場景呢？
1.
這個需要用到字體圖標
.box5 {
position: relative;
width: 300px;
height: 30px;
border: 1px solid black;
}
.box5::after{
font-family: icomoon;
content: '';
position: absolute;
line-height: 30px;
right: 10px;
}
<div class="box5"></div>
2.
這種遮罩層也可以使用僞元素來做，
.box5 {
position: relative;
width: 300px;
height: 30px;
border: 1px solid black;
}
.box5::before{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
-
僞元素清除浮動
.clearfix::after { content: ""; display: block; height: 0; //隱藏僞元素 clear: both; visibility: hidden; //隱藏僞元素 }.clearfix:before, .clearfix:after { content: ""; display: table; //轉換塊元素表示這個兩個僞元素在一行 } .clearfix:after { clear: both; }上面這是使用僞元素兩種清除浮動的辦法。
3. css3的盒模型
css3中可以通過box-sizing來指定盒模型,有2個值:即可指定爲content-box、border-box ,這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況:
-
box-sizing: content- box盒子大小爲width + padding + border ( 以前默認的)
-
box-sizing: border-box盒子大小爲width，這樣的話我們的寬度是一定的不管外面又沒有padding和border大小都是width 的給定寬度。
通過使用這個特性我們就不需要再 考慮padding和border帶給我們的加加減減了。
4. css3 的其他新特性
4.1 css3 圖片的模糊處理
img {
filter: blur(15px);
}
blue是一個函數，小括號裏面的數值越大，圖片就會變得越模糊 注意 這個需要加px單位 ，如下圖效果
4.2 css3的calc 函數
這個函數呢可以讓我們再css中做一些計算操作例如
width:calc(100% - 80px);
這個函數要注意的是 運算符兩邊一定要有空格。
當然css3中還有更重要的過渡屬性，但是這個放到下一篇 動畫篇中來寫了。