html初學(xué)（二） css樣式總結(jié)及示例
時(shí)間：2023-08-29 22:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-08-29 22:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
html初學(xué)（二） css樣式總結(jié)及示例：
HTML5的優(yōu)勢(shì)世界知名瀏覽器廠商對(duì)HTML5的支持:微軟 、Google、蘋(píng)果、Opera、Mozilla
市場(chǎng)的需求
跨平臺(tái)
網(wǎng)頁(yè)編輯工具：記事本、Dreamweaver、WebStorm
網(wǎng)頁(yè)基本信息：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>我的第一個(gè)網(wǎng)頁(yè)</title>
</head>
<body>
我的第一個(gè)網(wǎng)頁(yè)
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
1.塊元素與行內(nèi)元素的區(qū)別:塊元素:無(wú)論內(nèi)容多少，該元素獨(dú)占一行（p、h1-h6…）后續(xù)有個(gè)div
行內(nèi)元素:內(nèi)容撐開(kāi)寬度，左右都是行內(nèi)元素的可以排在一行(a、strong、em…) 后續(xù)有個(gè)span
2.無(wú)序列表<ul>
<li>范冰冰演藏族女孩</li>
<li>一線城市樓市退燒</li>
</ul>
沒(méi)有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行（塊元素）
默認(rèn)<li>標(biāo)簽項(xiàng)前面有個(gè)實(shí)心小圓點(diǎn)
3.有序列表<ol>
<li>范冰冰演藏族女孩</li>
<li>一線城市樓市退燒</li>
</ol>
有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行（塊元素）
默認(rèn)<li>標(biāo)簽項(xiàng)前面有順序標(biāo)記
4.定義列表<dl>
<dt>水果</dt>
<dd>蘋(píng)果</dd>
</dl>
沒(méi)有順序，每個(gè)<dt>標(biāo)簽、<dd>標(biāo)簽獨(dú)占一行（塊元素）
默認(rèn)沒(méi)有標(biāo)記
5.表格<table border=”1” > (border的取值為表格邊框的粗細(xì)) 整個(gè)表格可以設(shè)置寬度
<tr>
<td colspan="3">學(xué)生成績(jī)</td> <!—colspan為跨列合并 后面給的值為要合并的列數(shù)-->
</tr>
<tr>
<td rowspan="2">張三</td> <!—rowspan為跨行合并 后面給的值為要合并的行數(shù)-->
<td>語(yǔ)文</td>
<td>98</td>
</tr>
</table>
6.視頻元素<video src="視頻路徑" controls></video> [controls提供播放、暫停和音量的控件]
支持多個(gè)不同瀏覽器格式：（為了保證無(wú)論用戶用哪一種瀏覽器都能正常訪問(wèn)）
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
Autoplay 自動(dòng)播放屬性 loop循環(huán)播放
7.音頻元素<audio src="音頻路徑" controls></video> [controls提供播放、暫停和音量的控件]
支持多個(gè)不同瀏覽器格式
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的瀏覽器不支持audio元素
</audio>
同視頻元素
8.結(jié)構(gòu)元素：（主要是用于將網(wǎng)頁(yè)主體做一個(gè)簡(jiǎn)單地劃分）header：標(biāo)題頭部區(qū)域的內(nèi)容（用于頁(yè)面或頁(yè)面中的一塊區(qū)域）
footer：標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面的一塊區(qū)域）
section：Web頁(yè)面中的一塊獨(dú)立區(qū)域
<header><h2>網(wǎng)頁(yè)頭部</h2> </header>
<section><h2>網(wǎng)頁(yè)主體部分</h2></section>
<footer><h2>網(wǎng)頁(yè)底部</h2></footer>
9.內(nèi)聯(lián)框架：結(jié)合超鏈接使用，把整個(gè)內(nèi)聯(lián)框架作為一個(gè)新的窗口 設(shè)置超鏈接的target屬性與iframe的name值相同 即可將其劃分在一起<a href=”目標(biāo)位置” target=” 框架標(biāo)識(shí)名”>點(diǎn)我呀</a>
<iframe src="引用頁(yè)面地址" name="框架標(biāo)識(shí)名" ></iframe>
10．表單及表單元素1)<form method="post" action="result.html"> [method=” 常用值：get | post”]
</form>
2)<input type=" input元素類型" name=" input元素名稱" value=" input元素的值"/>
3)type：指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、4)image 和 button，默認(rèn)為 text
5)name：指定表單元素的名稱
6)value：元素的初始值。type 為 radio時(shí)必須指定一個(gè)值
7)size：指定表單元素的初始寬度。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位
8)maxlength：type為text 或 password 時(shí)，輸入的最大字符數(shù)
9)checked：type為radio或checkbox時(shí)，指定按鈕是否是被選中
10)列表框
<select name="列表名稱" size="行數(shù)">
<option value="選項(xiàng)的值" selected="selected">…</option >
<option value="選項(xiàng)的值">…</option >
</select>
11)按鈕 submit reset image button
12)多行文本域<textarea name="showText" cols="顯示的列數(shù)" rows="顯示的行數(shù)">文本內(nèi)容 </textarea >
13)文件域><input type="file" name="files" />
14)新增[具備自動(dòng)驗(yàn)證功能]：
郵箱:<input type="email" name="email"/>[會(huì)自動(dòng)驗(yàn)證Email地址格式是否正確]
網(wǎng)址:<input type="url" name="userUrl"/> [會(huì)自動(dòng)驗(yàn)證URL地址格式是否正確]
數(shù)字:<input type="number" name="num" min="0" max="100" step="10"/> [step合法的數(shù)字間隔]
數(shù)字滑塊:<input type="range" name="range1" min="0" max="10" step="2"/>
搜索框:<input type="search" name="sousuo"/>
15)readonly只讀文本框
16)disabled禁用
17)隱藏域<input type="hidden" value="666" name="userid">
11.表單的初級(jí)驗(yàn)證<input type="search" name="sousuo" placeholder="請(qǐng)輸入要搜索的關(guān)鍵字"/>
<input type="text" name="username" required/> [required規(guī)定文本框填寫(xiě)內(nèi)容不能為空]
<input type="text" name="tel" required pattern="^1[358]/d{9}" />[驗(yàn)證規(guī)則，正則表達(dá)式]
12. CSS基本語(yǔ)法結(jié)構(gòu)<head>
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
</head>
13.樣式行內(nèi)樣式：使用style屬性引入CSS樣式<h1 style="color:red;">style屬性的應(yīng)用</h1>
內(nèi)部樣式表：CSS代碼寫(xiě)在<head>的<style>標(biāo)簽中
<style>
h1{color: green; }
</style>
外部樣式表：CSS代碼保存在擴(kuò)展名為.css的樣式表中，HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：
鏈接式<link href="style.css" rel="stylesheet" type="text/css" />
導(dǎo)入式@import url("style.css");
鏈接式與導(dǎo)入式的區(qū)別<link/>標(biāo)簽屬于XHTML，@import是屬于CSS2.1
使用<link/>鏈接的CSS文件先加載到網(wǎng)頁(yè)當(dāng)中，再進(jìn)行編譯顯示
使用@import導(dǎo)入的CSS文件，客戶端顯示HTML結(jié)構(gòu)，再把CSS文件加載到網(wǎng)頁(yè)當(dāng)中
@import是屬于CSS2.1特有的，對(duì)不兼容CSS2.1的瀏覽器是無(wú)效的
樣式表的優(yōu)先級(jí)：行內(nèi)樣式>內(nèi)部樣式表>外部樣式表
最終是根據(jù)就近原則14.基本選擇器: 標(biāo)簽[p、h1、a]、
類選擇器[.類名]、
ID選擇器[#ID名]
ID選擇器>類選擇器>標(biāo)簽選擇器
15.高級(jí)選擇器層次選擇器：E F 后代選擇器 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)
E>F子選擇器
E+F相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素后面
E~F通用兄弟選擇器 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
結(jié)構(gòu)偽類選擇器：E:first-child作為父元素的第一個(gè)子元素的元素E
E:last-child作為父元素的最后一個(gè)子元素的元素E
E F:nth-child(n) 選擇父級(jí)元素E的第n個(gè)子元素F，（n可以是1、2、3），關(guān)鍵字為even、odd
E:first-of-type選擇父元素內(nèi)具有指定類型的第一個(gè)E元素
E:last-of-type選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素
E F:nth-of-type(n) 選擇父元素內(nèi)具有指定類型的第n個(gè)F元素
屬性選擇器：E[attr] 選擇匹配具有屬性attr的E元素
E[attr=val] 選擇匹配具有屬性attr的E元素,并且屬性值為val（其中val區(qū)分大小寫(xiě)）
E[attr^=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開(kāi)頭的任意字符串
E[attr$=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結(jié)尾的任意字符串
E[attr*=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”，換句話說(shuō)，字符串val與屬性值中的任意位置相匹配
16.字體樣式：font-family設(shè)置字體類型 p{font-family:Verdana,"楷體";}
font-size設(shè)置字體大小 px（像素）、em、rem、cm、mm、pt、pc
font-style設(shè)置字體風(fēng)格 normal、italic和oblique
font-weight設(shè)置字體的粗細(xì) normal、bold、bolder、lighter、400等同于normal，700等同于bold
font在一個(gè)聲明中設(shè)置所有字體屬性
字體屬性的順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類型p span{font:oblique bold 12px "楷體";}
17.文本樣式:Color設(shè)置文本顏色
text-align設(shè)置元素水平對(duì)齊方式 left、right、center、justify[兩端對(duì)齊]
text-indent設(shè)置首行文本的縮進(jìn)
line-height設(shè)置文本的行高
text-decoration設(shè)置文本的裝飾 none、underline下劃線、overline上劃線、line-through刪除線
18.文本陰影text-shadow : color[陰影顏色] x-offset[X軸位移，用來(lái)指定陰影水平位移量] y-offset[Y軸位移，用來(lái)指定陰影垂直位移量] blur-radius;[陰影模糊半徑，代表陰影向外模糊的模糊范圍]
19.超鏈接偽類 CSS設(shè)置超鏈接 標(biāo)簽名:偽類名{聲明;}
a:hover {
color:#B46210;
text-decoration:underline;
}
a:link未單擊訪問(wèn)時(shí)超鏈接樣式
a:visited單擊訪問(wèn)后超鏈接樣式
a:hover鼠標(biāo)懸浮其上的超鏈接樣式
a:active鼠標(biāo)單擊未釋放的超鏈接樣式
設(shè)置偽類的順序：a:link->a:visited->a:hover->a:active
20.背景：background-color:背景顏色
background-image:url(“111.jpg”);背景圖片
background-position:背景位置，從上下 左右 方向給值 可以百分比或者具體數(shù)值 或者直接屬性（如center）
background-repeat:背景是否平鋪 默認(rèn)平鋪 no-repeat(不平鋪) 還可以單獨(dú)沿X軸或者Y軸平鋪
尺寸 background-sizeAuto默認(rèn)值，使用背景圖片保持原樣
Percentage當(dāng)使用百分值時(shí)，不是相對(duì)于背景的尺寸大小來(lái)計(jì)算的，而是相對(duì)于元素寬度來(lái)計(jì)算的
Cover整個(gè)背景圖片放大填充了整個(gè)元素
Contain讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適應(yīng)所定義背景的區(qū)域
21. CSS3漸變線性漸變：linear-gradient ( position, color1, color2,…) position[漸變方向] 第一種顏色、第二種顏色、可以有多種顏色
漸變兼容:IE瀏覽器是Trident內(nèi)核，加前綴：-ms-
Chrome瀏覽器是Webkit內(nèi)核，加前綴：-webkit-
Safari瀏覽器是Webkit內(nèi)核，加前綴：-webkit-
Opera瀏覽器是Blink內(nèi)核，加前綴：-o-
Firefox瀏覽器是Mozilla內(nèi)核，加前綴：-moz-
22.邊框borderborder-width邊框粗細(xì)thin、medium、thick、像素值
border-style邊框樣式none、hidden、dotted、dashed、solid、double
同時(shí)設(shè)置邊框的顏色、粗細(xì)和樣式 border:1px solid #3a6587;
margin外邊距 網(wǎng)頁(yè)居中對(duì)齊: margin:0px auto;
padding內(nèi)邊距
盒子模型總尺寸=border+padding+margin+內(nèi)容寬度
box-sizing：content-box[默認(rèn)值，盒子的總尺度] | border-box[盒子的寬度或高度等于元素內(nèi)容的寬度或高度] | inherit[ 元素繼承父元素的盒子模型模式];
23. 圓角邊框border-radius: 20px 10px 50px 30px; 四個(gè)屬性值按順時(shí)針排列
利用border-radius屬性制作圓形的兩個(gè)要點(diǎn): 元素的寬度和高度必須相同, 圓角的半徑為元素寬度的一半，或者直接設(shè)置圓角半徑值為50%
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
24. 盒子陰影box-shadow:inset[陰影類型內(nèi)陰影] x-offset[X軸位移，指定陰影水平位移量] y-offset[Y軸位移，用來(lái)指定陰影垂直位移量] blur-radius[陰影模糊半徑陰影向外模糊的模糊范圍] color[陰影顏色，定義繪制陰影時(shí)所使用的顏色];
25. 標(biāo)準(zhǔn)文檔流組成塊級(jí)元素（block）<h1>…<h6>、<p>、<div>、列表
內(nèi)聯(lián)元素（inline）<span>、<a>、<img/>、<strong>...
26. display屬性Block塊級(jí)元素的默認(rèn)值，元素會(huì)被顯示為塊級(jí)元素，該元素前后會(huì)帶有換行符
Inline內(nèi)聯(lián)元素的默認(rèn)值。元素會(huì)被顯示為內(nèi)聯(lián)元素，該元素前后沒(méi)有換行符
inline-block行內(nèi)塊元素，元素既具有內(nèi)聯(lián)元素的特性，也具有塊元素的特性
none設(shè)置元素不會(huì)被顯示（用來(lái)隱藏內(nèi)容）
特性：
塊級(jí)元素與行級(jí)元素的轉(zhuǎn)變block、inline
控制塊元素排到一行inline-block
控制元素的顯示和隱藏none
27. 定位 position屬性static：默認(rèn)值，沒(méi)有定位
relative：相對(duì)定位（會(huì)保留原來(lái)的位置）
absolute：絕對(duì)定位（不會(huì)保留原來(lái)的位置）
fixed：固定定位
28. CSS3變形是一些效果的集合transform:[transform-function] *; transform-function設(shè)置變形函數(shù)，可以是一個(gè)，也可以是多個(gè)，中間以空格分開(kāi)
變形函數(shù):
translate()：平移函數(shù)，基于X、Y坐標(biāo)重新定位元素的位置 , translateX（tx）表示只設(shè)置X軸的位移 translateY（ty）表示只設(shè)置Y軸的位移
scale()：縮放函數(shù)，可以使任意元素對(duì)象尺寸發(fā)生變化 scale(sx,sy); 函數(shù)可以只接收一個(gè)值，也可以接收兩個(gè)值，只有一個(gè)值時(shí)，第二個(gè)值默認(rèn)和第一個(gè)值相等
rotate()：旋轉(zhuǎn)函數(shù)，取值是一個(gè)度數(shù)值 rotate(a) 參數(shù)a單位使用deg表示 , 參數(shù)a取正值時(shí)元素相對(duì)原來(lái)中心順時(shí)針旋轉(zhuǎn)
skew()：傾斜函數(shù)，取值是一個(gè)度數(shù)值 skew(ax, ay); 可以僅設(shè)置沿著X軸或Y軸方向傾斜
skewX（ax）、skewY（ay）
29.CSS3過(guò)渡transition:[transition-property transition-duration transition-timing-function transition-delay ]
transition-property過(guò)渡或動(dòng)態(tài)模擬的CSS屬性 IDENT：指定的CSS屬性（width、height、background-color屬性等）all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會(huì)使用all
transition-duration完成過(guò)渡所需要的時(shí)間定義轉(zhuǎn)換動(dòng)畫(huà)的時(shí)間長(zhǎng)度，即從設(shè)置舊屬性到換新屬性所花費(fèi)的時(shí)間，單位為秒（s）
transition-timing-function指定過(guò)渡函數(shù)
指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況，通過(guò)給過(guò)渡添加一個(gè)函數(shù)來(lái)指定動(dòng)畫(huà)的快慢方式
ease：速度由快到慢（默認(rèn)值）
linear：速度恒速（勻速運(yùn)動(dòng)）
ease-in：速度越來(lái)越快（漸顯效果）
ease-out：速度越來(lái)越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）
transition-delay過(guò)渡開(kāi)始出現(xiàn)的延遲時(shí)間
指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間去執(zhí)行過(guò)渡效果
正值：元素過(guò)渡效果不會(huì)立即觸發(fā)，當(dāng)過(guò)了設(shè)置的時(shí)間值后才會(huì)被觸發(fā)
負(fù)值：元素過(guò)渡效果會(huì)從該時(shí)間點(diǎn)開(kāi)始顯示，之前的動(dòng)作被截?cái)?br>
0：默認(rèn)值，元素過(guò)渡效果立即執(zhí)行
例如：transition:all 3s ease-in-out 1s;
過(guò)渡的觸發(fā)機(jī)制:
偽類觸發(fā)hover、active、focus、checked
媒體查詢：通過(guò)@media屬性判斷設(shè)備的尺寸，方向等
JavaScript觸發(fā)：用JavaScript腳本觸發(fā)
- CSS3動(dòng)畫(huà)的使用過(guò)程
一，設(shè)置關(guān)鍵幀@keyframes IDENT {
from {/*CSS樣式寫(xiě)在這里*/}
percentage {/*CSS樣式寫(xiě)在這里*/}
to {/*CSS樣式寫(xiě)在這里*/}
}
@keyframes spread {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
二，調(diào)用關(guān)鍵幀 a:hover{
animation:spread 0.3s linear 5 alternate;
background: url("images/header_05.png") 0 0 no-repeat;
}
Animation:后面的常用值分別代表 1.關(guān)鍵幀的名字 2.動(dòng)畫(huà)持續(xù)時(shí)間 3.運(yùn)行方式 4.執(zhí)行次數(shù) 5.是否反向執(zhí)行
@keyframes的瀏覽器兼容性, 寫(xiě)兼容的時(shí)候?yàn)g覽器前綴是放在@keyframes中間
語(yǔ)法：animation:animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
animation-name由@keyframes創(chuàng)建的動(dòng)畫(huà)名稱
animation–duration動(dòng)畫(huà)時(shí)間
animation-timing-function動(dòng)畫(huà)方式
animation-delay延遲時(shí)間
animation-iteration-count動(dòng)畫(huà)的播放次數(shù)
animation-direction動(dòng)畫(huà)的播放方向
animation-play-state動(dòng)畫(huà)的播放狀態(tài)
animation-fill-mode動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后發(fā)生的操作
在線咨詢