css標簽屬性及用法
css標簽及屬性
HTML引入CSS的方法
1.嵌入式 <style type = “text/css”>要寫的樣式</style>
2.外聯式 <link rel = “stylesheet” type = “text/css” href = “css/public.css” />
3.行內式(主要用於JS控制元素的樣式)：style="color:red;"
九大選擇器
1.通配符*{設置全局} 2.html標簽選擇器（多個標簽時用，隔開）；
3.id #選擇器; 4.class 選擇器；(id,class聲明是區分大小寫的)
5.後代選擇器(子子孫孫都選擇) {選擇器1 選擇器2}
6.子選擇器 選擇器1>選擇器2
7.相連兄弟 (同級相連的元素 一個) +
8.相連兄弟們(同級所有的元素) ~
9.偽類:link （未訪問的樣式） :visited 已訪問的樣式 :hover鼠標懸停的樣式 :active 點擊時的樣式。
優先級：id> class > 標簽
100 10 1（權重） 復合使用時，權重相加大的優先級高
font字體屬性
font-size 字體大小
font-family 字體系列（宋體等）
font-weight 字體粗細 normal bold 100~900 400=normal 700=bold
font-style 字體風格 normal italic(傾斜)
font-variant 字體的變形 small-caps (小型大寫字母)
font 簡寫(要求至少給出 字體大小/字體系列) 例如：font: 15px 微軟雅黑;
font: [<字體加粗> | <字體風格> | <字體變形>] <字體大小>[/行高] <字體系列> 必須按順序！！否則不會執行
background背景屬性
background-color 背景顏色（三種方式,1.單詞2.#fff000 3.rgb(255,255,255)4.rgba,a透明度（0-1）
background-image 背景圖片 :url(‘./imgs...‘); css引入文件，都是相對於css自己本身
background-repeat: 重復方式 no-repeat（不重復） | repeat-x | repeat-y | repeat
background-position 背景位置 （left center right 水平方向/// top center bottom 垂直方向）
例子： background-position:7px(X) -45px<Y> 瀏覽器為第四項限
background-attachment 背景固定 (fixed 固定 scroll默認滾動)
background-size 背景圖片的尺寸 (像素 / % / cover 擴大至覆蓋全部)
長度單位:px,em(倍數);% 顏色單位:單詞;進制;rgb;rgba(a是透明度,0是透明，1不透明)
background 簡寫 (無順序,隨便寫)
文本屬性
letter-spacing 字間距 px color:顏色
word-spacing 詞間距 px （只對有空格的起作用）
text-indent 首行縮進 px
text-align 文字對齊 left right center
line-height 行高 px em % （每行的間距）以字的中間為基線，是基線與間的距離
text-decoration 文字修飾(underline 下劃線 / overline 上劃線 / line-through 刪除線 / none 隱藏下劃線)
text-shadow 文字陰影(:5px 5px 5px #f00; 水平陰影位置 垂直陰影位置 模糊距離 陰影的顏色)
white-space:nowrap 強制不換行
word-wrap:break-word;word-break:normal 自動換行
（用邊框屬性繪制三角形，邊框本質是梯形）
邊框屬性
border-width 邊框四邊的寬度 px
border-style 邊框的樣式 solid (單線)double(雙線) dashed（虛線）
border-color 邊框顏色
單獨設置某條邊的邊框 需要加入-top 等關鍵字
border 簡寫形式 border:width style color; 例子：border: 1px solid #666
box-shadow 邊框陰影 水平位置x / 垂直位置y / 模糊距離10px/陰影大小10px / 陰影顏色
border-radius 邊框圓角 px / %
border-collapse: collapse; 合並表格內外邊距
列表屬性
list-style-type 設置列表的格式為none.也就是沒有格式.
list-style 列表樣式類型 none(無樣式) 去列表的點
disc(默認值 實心點) circle 圓圈 decimal 數字
lower-roman 小寫羅馬..等
list-style-position 列表樣式位置 inside(在內) outside(在外) 比如說圓點或者方點
list-style-image 列表樣式圖片 :url(‘./....‘);
盒子模型
1.盒子模型的組成： width 寬 / height高 / padding內邊距 / border邊框/ margin 外邊距 {(left top right bottom可以控制單獨的邊} 例;margin-top:10px;
margin:上下左右 margin:上 左右 下 margin:上 右 下 左
2.浮動布局: float 浮動(left right ) clear 清除浮動(left right both 清除兩側浮動) {清除浮動才會把盒子撐起來}
2.1第二種清除浮動： .父元素標簽::before, .父元素標簽::after{content: ‘‘;display: table;}
.父元素標簽::after{clear: both;}
3.position 定位:absolute 絕對定位 (以父元素為基點,脫離文檔流不保留位置)
relative 相對定位(不脫離文檔流，保留位置) / fixed 固定定位(網頁廣告) （這些都是非靜態定位）
z-index 決定元素層的顯示順序（值越大,越在頂層顯示.）
4.布局相關的屬性:
4.1 display （規定如何顯示，可以進行塊與行的轉化）
none(隱藏)、block(以塊元素顯示)、inline(以行內元素顯示)
inline-block 以行級塊元素的特點顯示
4.2 visibility (規定元素是否可見)
:visible 可見,默認值 / hidden 隱藏 占位 / inherit 繼承 子元素默認
4.3 overflow (溢出的內容該如何顯示)
visible(可見)、hidden(隱藏)、scroll(出現滾動條)、auto(超出自動顯示滾動條)
overflow:hidden(可用於清除浮動，在父元素中使用)
4.4 cursor：(網頁中光標的類型) pointer(手形)，text(文本)，help(幫助)，wait(等待)，
5.特殊元素(內聯塊狀元素/行內元素/內聯元素...) 1.和其他元素都在一行之上 2.高/寬/行高/上下邊距 都可以設置
布局技巧：
多盒浮動：1.父元素用相對定位，子元素用絕對定位
2.算好子元素的位置，讓超出父元素的部分隱藏
3.當鼠標放上去時，所有距離移動過來
鼠標方上：出現（小辣椒）
父：width:220px;height:460px;position:absolute;left:234px;top:0px;display:none;
:hover{display:block;}
圖片定位：
background:url(‘1.png‘) -381px -108px;}
.box1:hover{background-position:-247px -108px;}
以左上角為基準（0,0），向右向下為XY正
圖標字體：
@font-face{font-family:‘tbzt‘; src:url(‘./zt/iconfont.ttf‘);}
.font{font-family:‘tbzt‘;}
高級樣式
transition(平滑過渡) : property (改變某個屬性)
duration (轉換過程的持續時間) (單位:s/ms)
timing-function(變換的速率)(ease逐漸變慢/ linear勻速/ease-in 加速/ease-out 減速/ ease-in-out加速然後減速)
例：.box2:hover{background: orange; transition:background 3s ease-out;}
transition: all .2s linear（平滑過渡）
transform(變形) :(單位:deg 角度) none (不變)
- rotate (旋轉) rotateX rotateY
例:rotate(30deg) rotateX(30deg) rotateY(30deg)
.rotate{width:400px;margin:50px auto;transition:transform 0.5s linear; (把 transform當做屬性值用)}
.rotate:hover{transform: rotate(60deg);}
- skew (扭曲)
例:skew(30deg); skewX(30deg); skewY(30deg);
- scale(num) 中心縮放 -1,-2,1,2,... 放大(縮小)倍數 /scale(X,Y)
例:scale(1.5); scale(2,1.5);
4.translate(移動)translateX / translateY / translate(X,Y)
例:translate(100px,20px)
5.matrix 矩陣變形
opacity: 0-1(透明-不透明);
兩種漸變
1. background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
2. background-image:-webkit-gradient(
linear, /* 漸變類型：線性漸變 */
10% 10%, /* 分別對應X,Y 方向漸變起始位置 */
100% 100%, /* 分別對應X,Y 方向漸變終止位置 */
color-stop(0.14, rgb(255,0,0)), /* 漸變顏色位置，及顏色 */
color-stop(0.5, rgb(255,255,0)), /* 漸變顏色位置，及顏色 */
color-stop(1, rgb(0,0,255)) /* 漸變顏色位置，及顏色 */);
動畫屬性
需要@keyframes 配合 animation一起來使用
Animation：
Animation-name：動畫的名稱
Animation-duration：執行動畫的時間
Animation-timing-function：動畫的類型，類型與過渡的類型。
Animation-delay:延遲時間
animation-iteration-count：執行動畫的次數，infinite,無限次
animation-direction：執行方向，奇數次向右執行，偶數次向前執行
@keyframs 動畫的名稱{
0%{
屬性
}
100%{
屬性
}
}
.div1:hover{ 名字 時間 方式 延遲時間 次數 執行方向
animation: changcolor 3s ease 1s 2 alternate;
}
@keyframes changcolor{
0%{
background:green;
}
50%{
background:blue;
}
100%{
background:pink;
}
}
浮動
浮動了就不是塊級元素了，不占一行。只是改變了文檔流的顯示，沒有脫離文檔流（塊浮起來了，文字卻依然在外面）。
網頁的層次是：定位 >浮動 > 塊級元素，定位在最高層。
1.不要給父元素設height（寬一般設置，因為具體布局時需要考慮尺寸），只要設置了，子元素是無法改變父元素設置好的寬高的。
2.父、子元素都浮動或者都不浮動，在第一條的前提下，都可以撐開父元素。
3.父元素浮動，子元素不浮動，可以撐開（但是子依然是塊）。
4.父元素不浮動，子元素浮動，不可以撐開（雖然子元素還在父裏，但一種是塊，一種是浮動了，不屬於同類）。要想撐開，必須清除浮動。
定位：絕對定位，脫離文檔流，不保留位置，普通文檔流其不存在；
絕對定位需要一個參照物，不然就是根據body的位置定位了；
相對定位，不脫離文檔流，保留位置，它的參照物是自己，自己設置了position：relative這個屬性，top,left才會生效（left: 10px;現在這塊左邊10px是原來的位置）
定位：只有父元素也定位，子元素定位才會相對父元素定位置，否則是相對頁面定位，父 子元素可以一個相對一個絕對。
兼容性處理
l 全局CSS設置
l 常用兼容性技巧
l CSS HACK
1、清除所有的標記的內外邊距
body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除項目符號或編號前面的符號
ul,ol,li{ list-style:none; }
3、全局鏈接效果
a:link , a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、網頁中所有的文字大小顏色
body{ font-size:12px; font-family:宋體; color:#ccc; }
5、去除圖片的鏈接邊框線
img{border:0;}
6、全局的類樣式
@font-face{font-family:‘dqz‘;src: url(‘iconfont.ttf‘);}（這是圖形字體，需要加載）
.fone{font-family:‘dqz‘; }（在html裏加class=“fone”就可以使用）
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.mt_10{margin-left:50px}
.bgr{}
.ccc{background-color:#ccc;}
常用的兼容性調試技巧
1、實現所有瀏覽器主頁居中
Firefox下主頁居中代碼：.box{margin:0px auto}
IE5.5下主頁居中代碼：body{text-align:center;}
將以上兩種代碼，合在一齊書寫：
2、單行文本上下居中
h1{
height:30px;
line-height:30px;
}
3、在IE6下，左右margin會加倍，應該是IE6下的一個bug
提示：排版時，能使用padding解決的，堅決不用margin。如果實在想用的話，就使用其中一邊。
解決的方案：使用 display:inline;
CSS HACK
針對不同瀏覽器，書寫不同的CSS代碼的過程，稱為“CSS HACK”。
也就是說：寫一個CSS代碼，讓IE6識別，其它瀏覽器不識別。
下面，針對不同瀏覽器，有幾個符號：
這些符號是在CSS屬性的前面加的，用於分辨不同的瀏覽器版本。
l “*”IE6和IE7都識別。如：.box{ * }
l “_”只有IE6識別。如：.box{ _background-color:green;}
使用CSSHACK來處理IE6下，左右margin加倍的問題
註意：CSSHACK不是W3C的標準，因此，我們盡量少用。如果你調試兼容性，調試不好時，可以偶爾用一下。
其他註意：
1.html代碼前必須寫<!DOCTYPE HTML>//否則ie margin:0 auto不會居中
2.解決ie文本框不垂直居中line-height後面加\9
line-height:25px\9
3.CSS禁止Chrome谷歌瀏覽器激活輸入框後自動添加橘黃色邊框
.className:focus{outline:none } || {outline:Blue Solid 4px;}
4.要使得子盒子位於父盒子處於絕對居中方案一(推薦):
設置父盒子{position:realtive;}
設置子盒子{margin:auto;postion:absolute;left:0;right:0;top:0;bottom:0;}
附錄：
1.CSS Cascading Style Sheets 層疊樣式表。CSS是給HTML標記加的樣式；JS是給HTML標記加的行為。HTML標記是最先出現的
2.註意：id屬性一般是給JS使用的，不是讓你來加樣式的。class屬性只能給CSS用，不能給JS用的。
id選擇器的名稱，必須以“#”開頭，後跟HTML標記的id屬性的值。
3.浮動出現的意義其實只是用來讓文字環繞圖片而已，僅此而已.
4.list-style：none (去掉各種項目符號) 行高等於盒子高度（上下居中）
5.我們所說的width和height屬性，它們指內容的寬度和高度，不含內、外邊距、邊框線。
6.浮動就是將塊級元素霸占一行的特性取消，脫離原來的文本流。
7.CSS屬性繼承：外層元素的樣式，會被內層元素進行繼承。多個外層元素的樣式，最終都會“疊加”到內層元素上。
8.cursor：網頁中光標的類型，取值：text(文本)help(幫助)、wait(等待)、pointer(手形)等
10.上下兩個塊元素，如果每一個元素都指定了四個外邊距，那麽上下相鄰的那個外邊距會發生合並的現象，合並後取其中較大的外邊距。
11.浮動的元素，不再占空間了，並且，浮動元素的層級要高於普通元素
12.CSS屬性繼承：外層元素的樣式，會被內層元素進行繼承。多個外層元素的樣式，最終都會“疊加”到內層元素上。
13.單個選擇器的優先級：行內樣式 > id選擇器 > class選擇器 > 標簽選擇器
14.同一個class屬性，可以指定多個類名樣式，多個類樣式之間用空格隔開。
15.兼容性調試，主要調試IE8、IE7、IE6、Firefox。
補充
偽元素選擇器
s1:firsh-child 第一個子元素
s1:last-child 最後一個子元素
s1:nth-child(num) 匹配父元素的第n個子元素s1.
num從1開始 也可以是公式 例: 2n 2n-1 奇偶數 even(偶數) odd(奇數)
s1:nth-last-child(num) 匹配父元素的倒數第n個子元素s1.
s1:nth-of-type(num) 匹配同類型中的第n個同級兄弟元素s1
s1:nth-last-of-type(num) 匹配同類型中的倒數第n個同級兄弟元素s1
s1:only-child 當子元素只有一個時 起作用
s1:not() 除了()裏的元素,其他都選中
s1:empty 選中內容為空的標簽, 空格也算有內容
s1::before 內容之前 content內容屬性
s1::after 內容之後
css標簽屬性及用法