CSS種類
南部ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
CSS為什么稱為串聯(lián)式排版樣式呢 ? 是因為可以混合使用以下Style Sheets種類，其優(yōu)先執(zhí)行順序依編號排列。
Inline (同列) : 使用HTML標記的STYLE屬性，只和定義的區(qū)段有效。
如 :
P STYLE=COLOR:RED
Embedding (內(nèi)嵌) : 使用 STYLE.../STYLE標記 ( 置于BODY本文區(qū)之前 )，定義HTML標記供整個網(wǎng)頁使用?？墒褂枚鄠€STYLE.../STYLE標記
如 :
HTML 文件開始
STYLE TYPE=text/css 排版樣式區(qū)開始
！-- 排版樣式區(qū)內(nèi)容 --
/STYLE 排版樣式區(qū)結(jié)束
BODY 本文區(qū)開始 本文區(qū)內(nèi)容
/BODY 本文區(qū)結(jié)束
/HTML 文件結(jié)束
Linking (連結(jié)) : 使用 LINK標記 ( 用于HEAD區(qū) )，即將排版格式分開處理 ( 以 . CSS 為副檔名儲存成一個獨立的文字檔 ) ，再連結(jié)使用。可使用多個LINK標記。
如 :
HTML 文件開始
HEAD 標頭區(qū)開始
LINK TYPE=text/css REL=STYLESHEET
HREF=s1.css 連結(jié)CSS檔
/HEAD 標頭區(qū)結(jié)束
BODY 本文區(qū)開始
本文區(qū)內(nèi)容
/BODY 本文區(qū)結(jié)束
/HTML 文件結(jié)束
粗細font-weight
設置文字是否加粗顯示 。 有兩種類型 ：單詞類型、數(shù)字類型
單詞類型 | 屬性值 | 說明
| normal | 默認值，定義批準的字體
| bold | 定義粗體字符 ，b strong標簽 的默認值
| bolder | 定義更粗的字體
| ligher | 定義更細的字體
數(shù)字類型 100-900之間的整百數(shù)字。數(shù)字越大文字顯示越粗。 400==normal 700==bold
字體風格font-style
設置字體是否斜體顯示。
| 屬性值 | 說明
|normal | 設置正規(guī)的字體 ， 大多是標簽的默認值
| italic | 設置斜體的文字 ，主要針對英文，要求英文以字體中的斜體樣式顯示
| oblique | 設置斜體的文字 ， 只是將文字傾斜顯示 ， 與字體無關(guān)
**行高 line-height **
設置的是一行文字實際占有的高度，文字字號在行高中是垂直居中的。
| px 像素值 | 設置的行高的具體像素值
| 百分比數(shù)值 | 設置的本身字號像素值的百分比
字體綜合font
1.字號 、 字體
2.字號 /行高 、字體 重點是字號和行高之間使用 /
3.加粗和斜 體兩個值之間可以互 換位置 、 字號、行高、字體不能更改位置。
水平對齊text-align
設置文本水平方向的對齊
| 屬性名 | 作用 |
| left | 居中對齊，大部分標簽的默認值
| center | 居中對齊
| right | 居右對齊
文本修飾 text-decoration
設置文本整體是否有線條的修飾效果
| 屬性名 | 作用 |
| none | 沒有修飾， 大部分標簽的默認值
| overline | 上劃線
| line-through | 中劃線，刪除線del 標簽的默認值
| underline | 下劃線，a標簽的默認值
**縮進 text-indent **
設置段落首行是否進行縮進
| px 單位 | 表示首行縮進多少像素
| em單位 | 首行縮進幾個中文字符的位置
| 百分比 | 表示縮進文字所在標簽的父級標簽width 屬性值的百分比
書寫元素內(nèi)容區(qū)域 width+height
盒子可以實體化的區(qū)域 width + height + padding + border
盒子實際占位的位置 width + height + padding + border + margin
寬度width 高度height
設置可以添加元素內(nèi)容的區(qū)域的寬度
| auto | 默認值，瀏覽器可計算出實際的寬度
| px | 像素值定義的寬度
| % | 定義參考父元素寬度width 的百分比寬度
內(nèi)邊距padding 、 外邊距margin
內(nèi)邊距padding：設置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離。
外邊距margin： 設置的是盒子與盒子之間的距離。
四值法 上右下左 padding : 10px 20px 30px 40px;
三值法 上 左右 下
二值法 上下 左右
單值法 四個值相同
邊框border
設置的是內(nèi)邊距外面的邊界區(qū)域 作為盒子的實體化的最外層
border ：“寬度 線 顏色 “
border-style | 屬性值 | 說明
| none | 定義無邊框
| solid | 定義實線
| dashed | 定義虛線 在大多數(shù)瀏覽器中呈現(xiàn)為實線
| dotted | 定義點狀邊框，在大多數(shù)瀏覽器中呈現(xiàn)為實線
| double | 定義為雙線，雙線的邊框的寬度等于 border-width的值
| groove | 定義3D凹槽邊框，其效果取決于border-color 的值
| ridge | 定義3D壟裝邊框，其效果區(qū)域于border-color 的值
| inset | 定義3D內(nèi)容凹陷效果，其效果取決于border-color 的值
| outset | 定義3D內(nèi)容凸出效果，其效果取決于border-coloe 的值
清除默認樣式
1.大部分容器標簽都有默認邊距，要么用標簽選擇器的并集方式，要么通配符清除。
2.ul和li兩種列表有默認的列表前綴，清除list-style屬性
3.a標簽的默認樣式，順帶設置頁面中常用的a的公共樣式：color和text-decorstion
4.清除默認加粗效果:設置font-weight
父子盒模型
父元素的width = 所有子元素width + padding + border + margin
margin塌陷現(xiàn)象
margin塌陷現(xiàn)象：在垂直方向如果有兩個元素的外邊距有相遇的，瀏覽器中加載的 真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的，邊距值小的塌陷到 了邊距值大的值內(nèi)部
同級元素塌陷： 大的margin吃掉小的
標準文檔流：指得是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排版方式。前面內(nèi)容發(fā)生了變化，后面的內(nèi)容位置也會隨著發(fā)生變化
微觀現(xiàn)象
1.空白折疊現(xiàn)象。
2.文字類的元素如果排在一行會出現(xiàn)一種高低不齊、底邊對齊效果。
3.自動換行，元素內(nèi)一行內(nèi)容寫滿元素的width時會自動進行換行。[圖片上傳失敗...(image-5327c1-1604048626452)]
元素等級
塊級元素：大部分容器級標簽包括p標簽都是塊級元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行內(nèi)元素：大部分的文本及標簽比如 a,span，i（斜體）,em（強調(diào)）,sub(下標)，sup（上標） 等。
行內(nèi)塊元素： (img，button,input，textarea,select), img等
顯示模式display
display 屬性更改的顯示模式并沒有改變標準流本質(zhì)性質(zhì)
| 屬性值 | 作用
| block | 表示元素要以塊級元素模式加載，具備塊級特點
| inline | 表示元素要以行內(nèi)元素模式加載，具備行內(nèi)特點
|inline-block| 表示標簽及行內(nèi)塊模式加載，具備行內(nèi)塊特點
| none | 表示標簽及內(nèi)容直接隱藏，讓出原有標準流的位置
脫離標準流
標簽元素脫離標準流的方法包括：浮動、絕對定位、固定定位
浮動定義
1.浮動 (float)：讓元素脫離標準流，同一級的浮動的元素可以并排在一排顯示
float : right / left
浮動的問題二：父元素沒有高度，會影響后面元素的標準流位置，如果福哦的那個的子元素足夠高，有可能影響到后面浮動的貼邊。
[圖片上傳失敗...(image-7923f-1604048626452)]
清除浮動方法
清除浮動一：給標準流的父元素強制給一個合適的高度height
解決：浮動元素影響后面元素標準流位置和貼邊。
問題：父元素不能高度自適應，后面父元素之間如果有margin效果不正確。
清除浮動五：溢出隱藏
overflow：hidden
總結(jié) 如果父元素高度是固定的，建議使用height屬性解決
如果父元素告訴需要自適應，建議使用overflow屬性解決浮動問題
要想讓每個偽類的狀態(tài)正常加載，書寫順序必須是：訪問前l(fā)ink、訪問后visited、 鼠標移上hover、鼠標點擊active。
-背景顏色 background-color
-背景圖片 background-image 屬性 url(圖片路徑)
-背景重復 background-repeat
| repeat | 重復，默認屬性值，表示會使用背景重復加載填滿整個盒子背景區(qū)域
| no-repeat| 不重復，不論背景圖是否大于盒子范圍，都只加載依次圖片
| repeat-x | 水平重復，使用背景圖片水平重復加載鋪滿第一行，垂直方向不重復
| repeat-y | 垂直重復，使用背景圖片垂直重復加載鋪滿第一列，水平方向不重復
-背景定位 background-position 主要用于設置 不重復 的圖片在背景區(qū)域的加載開始位置
單詞表示法 水平方向可選單詞：left、center、right
垂直方向可選單詞：top、center、bottom
像素表示法 水平 垂直 border以內(nèi)的
百分比表示法 100%代表的數(shù)值
水平方向，等價于盒子的border以內(nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度。
垂直方向，等價于盒子的border以內(nèi)的背景區(qū)域高度減去圖片的高度。
-背景附著 background-attachment
| scroll | 滾動的，表示背景圖片與盒子保持相對位置不變，隨著頁面的滾動而滾走
| fixed | 固定的，背景圖的定位的參考點從盒子border，以內(nèi)的左上頂點變?yōu)榱藶g覽器窗口的左 上頂點，頁面滾動時，瀏覽器窗口的左上頂點是不變的，導致背景圖固定在瀏覽器窗口 的某個位置，不會隨著頁面滾動而滾走
background 屬性可以將五個單一屬性的值進行合寫。 屬性值：可以有 1-5 個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作 一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置。
-背景縮放background-size 設置img的尺寸
| px值 | 1-2個像素值，只設置1個值，垂直方向等比例拉伸；設置2個值，按照設置值 加載
| 百分比 | 同像素值設置方法相同，設置百分比時，數(shù)值參照盒子的寬、高屬性
| cover | 自動調(diào)整縮放比例，把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū) 域。如有溢出部分則會被隱藏。
| contain | 自動調(diào)整縮放比例，把圖像圖像擴展至最大尺寸，保證圖片始終完整顯示在背 景區(qū)域
-相對定位 relative
相對定位的元素不能脫離標簽的原始狀態(tài)(標準流、浮動),不會讓出原來占有的位置
-絕對定位 absolute 脫離標準文檔流
子絕父相 、 子絕父絕 、 子絕父固
-固定定位 fixed 脫離標準文檔流
-壓蓋順序 z-index
HTML5
[圖片上傳失敗...(image-974217-1604048626452)]
audio音頻標簽 ogg mpeg wav
| 屬性 | 值 | 描述
| autoplay| autoplay| 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放
| controls | controls | 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕
| loop | loop | 如果出現(xiàn)該屬性，則每當音頻結(jié)束時重新開始播放。
| preload | preload | 如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
| src | url | 要播放的音頻的 URL。
video 視頻標簽 ogg mp4 webm
[圖片上傳失敗...(image-361a85-1604048626452)]
| 屬性 | 值 | 描述
|autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題）
| controls | controls | 向用戶顯示播放控件
| loop | loop |放完是否繼續(xù)播放該視頻，循環(huán)播放
| preload | auto |（預先加載視頻）
none（不應加載視頻） 規(guī)定是否預加載視頻(如果有了autoplay 就忽略該屬性）
| src | url | 視頻url地址
| width | pixels(像素) |設置播放器寬度
| height | pixels(像素) |設置播放器高度
| poster | Imgurl | 加載等待的畫面圖片
| muted | muted | 靜音播放
屬性值 描述
type="email" 限制用戶輸入必須為Email類型
type="url" 限制用戶輸入必須為URL類型
type="date" 限制用戶輸入必須為日期類型
type="time" 限制用戶輸入必須為時間類型
type="month" 限制用戶輸入必須為月類型
type="week" 限制用戶輸入必須為周類型
type="number" 限制用戶輸入必須為數(shù)字類型
type="range" 滑動條
type="tel" 手機號碼
type="search" 搜索框
type="color" 生成一個顏色選擇表單
datalist 標簽
? datalist 標簽規(guī)定了 input 元素可能的選項列表。
? datalist元素包含了一組option元素，這些元素表示預定義可選值，在input元素輸入
過程中，會自動響應option元素的值。
? 綁定的input標簽必須設置 list 屬性，屬性值等于datalist標簽的 id 屬性值。
新增表單屬性
屬性 值 描述
required required 表單擁有該屬性表示其內(nèi)容不能為空，必填
placeholder 提示文本 表單的提示信息，存在默認值將不顯示
autofocus autofocus 自動聚焦屬性，頁面加載完成自動聚焦到指定表單，一般頁面中放1個
autocomplete off / on 當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填 寫的選項。
默認已經(jīng)打開，如 autocomplete=”on “
關(guān)閉 autocomplete =”off”
-需要放在表單內(nèi)同時加上name屬性
-同時成功提交
multiple multiple 可以多選文件提交
CSS3
子級選擇器
子級選擇器用于選取帶有特定父元素的元素 書寫語法element1element2
[圖片上傳失敗...(image-bb266d-1604048626452)]
兄弟選擇器
--相鄰兄弟選擇器 用于選擇 緊接 在另一個元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2 | 匹同一個父元素中緊跟在element1后面的一個element2元素
--其他兄弟選擇器 匹配同一個父元素中在element1后面的 所有 element2元素
| elemenet~element2 | 匹配同一個父元素中elemenet1后面的所有element2元素
E:first-of-type 指定類型E的第一個
E:last-of-type 指定類型E的最后一個
E:nth-of-type(n) 指定類型E的第n個 這個是元素的第幾個在元素下選取
屬性選擇器
E[att] 選擇具有att屬性的E元素
E[att="val"] 選擇具有att屬性且屬性值等于val的E元素
E[att^="val"] 匹配具有att屬性、且值以val開頭的E元素
E[att$="val"] 匹配具有att屬性、且值以val結(jié)尾的E元素
E[att*="val"] 匹配具有att屬性、且值中含有val的E元素
box-sizing屬性
content-box 標準模式 盒子總體大小為 width(height) + padding + border
border-box 怪異模式 盒子總體大小為 width 和 height
[圖片上傳失敗...(image-cdef05-1604048626452)]
文字陰影text-shadow
| 屬性值 | 簡介
| h-shadow | 必需。水平陰影的位置。允許負值。
| v-shadow | 必需。垂直陰影的位置。允許負值。
| blur | 可選。模糊的距離。
| color | 可選。陰影的顏色。
--transition-property過渡的屬性
? none 表示沒有屬性過渡
? all 表示所有變化的屬性都過渡
? 屬性名 使用具體的屬性名，多個屬性名中間逗號分隔
--時間
以秒為單位 0s必須加單位
--transition-timing-function 時間曲線
對元素進行移動、縮放、旋轉(zhuǎn)、拉長或拉伸。配合過渡和即將學習的動畫知識，可 以取代大量之前只能靠Flash才可以實現(xiàn)的效果。
位移translate()
translate(x,y) x,y分別為水平和垂直方向位移的距離，可以為px值或百分比， 區(qū)分正負
translate(x) 只有一個數(shù)值，表示水平方向的位移
translate(y) 只有一個數(shù)值，表示垂直方向的位移
縮放 scale()
值 說明
scale(x, y) x,y分別為改變元素的寬度和高度的倍數(shù)
scale(n) 只有一個值，表示寬度和高度同時縮放n倍
scaleX(n) 改變元素的寬度
scaleY(n) 改變元素的高度
旋轉(zhuǎn) rotate(deg)
deg為度數(shù)單位，正數(shù)表示順時針旋轉(zhuǎn)，負數(shù)表示逆時針旋轉(zhuǎn)
傾斜 skew()
transform: skew(數(shù)字deg,數(shù)字deg)
兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個 數(shù)值不寫默認為0
transform--origin 屬性
設置調(diào)整元素的水平和垂直方向原點的位置
x 定義 X 軸的原點在何處。可能的值：left 、center、right、像素值、百分比
y 定義 Y 軸的原點在何處?？赡艿闹担簍op、center、bottom、像素值、百分比
[圖片上傳失敗...(image-ac107d-1604048626452)]
透視屬性 perspective
作用：設置在 z 軸的視線焦點的觀察位置，從而實現(xiàn) 3D 查看效果。
屬性值：像素值，數(shù)值越大，觀察點距離 z 軸原點越遠，圖形效果越完整且接近原始尺寸。 注意：透視屬性需要設置給 3D 變化元素的父級
3D 旋轉(zhuǎn)
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
[圖片上傳失敗...(image-e781c5-1604048626452)]
3D 位移
translateX(x) 設置 X 軸的位移值。
translateY(y) 設置 Y 軸的位移值。
translateZ(z) 定義3D位移，設置Z軸的位移值。
屬性值為像素值或百分比，正負表示位移的方向。正值向?qū)S的正方向移動，負值向?qū)?軸的負方向移動。
transform-style屬性
用于設置被嵌套的子元素在父元素的 3D 空間中顯示，子元素會保留自己的 3D 轉(zhuǎn)換坐標軸。
屬性值：
flat：所有子元素在 2D 平面呈現(xiàn)
preserve-3d：保留 3D 空間
瀏覽器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
Internet Explorer 9 需要前綴 -ms-。
h5是html的最新版本，是14年由w3c完成標準制定。增強了，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應用，提高用戶體驗滿意度，讓開發(fā)更加方便。
- h5新增的標簽
新增元素
說明
video ? ?表示一段視頻并提供播放的用戶界面 ?
audio ? ?表示音頻 ?
canvas ? ?表示位圖區(qū)域 ?
source ? ?為video和audio提供數(shù)據(jù)源 ?
track ? ?為video和audio指定字母 ?
svg ? ?定義矢量圖 ?
code ? ?代碼段 ?
figure ? ?和文檔有關(guān)的圖例 ?
figcaption ? ?圖例的說明 ?
main ?
time ? ?日期和時間值 ?
mark ? ?高亮的引用文字 ?
datalist ? ?提供給其他控件的預定義選項 ?
keygen ? ?秘鑰對生成器控件 ?
output ? ?計算值 ?
progress ? ?進度條 ?
menu ? ?菜單 ?
embed ? ?嵌入的外部資源 ?
menuitem ? ?用戶可點擊的菜單項 ?
menu ? ?菜單 ?
template ?
section ?
nav ?
aside ?
article ?
footer ?
header ?
- css3
css3被劃分為模塊，最重要的幾個模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動畫、多列布局、用戶界面
選擇器
框模型
背景和邊框
border-radius、box-shadow、border-image、
background-size：規(guī)定背景圖片的尺寸
background-origin：規(guī)定背景圖片的定位區(qū)域
background-clip：規(guī)定背景的繪制區(qū)域
文本效果（常用）
text-shadow：設置文字陰影
word-wrap：強制換行
word-break
css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D轉(zhuǎn)換
transform：向元素應用2/3D轉(zhuǎn)換
transition：過渡
動畫
@keyframes規(guī)則：
animation、animation-name、animation-duration等
用戶界面（常用）
box-sizing、resize
css3新增偽類
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target ?這個偽類允許我們選擇基于URL的元素，如果這個元素有一個識別器（比如跟著一個#），那么:target會對使用這個ID識別器的元素增加樣式。
：enabled ?
：disabled
：checked
：not
重慶分公司
重慶分公司
