前端基礎---CSS
CSS
1.CSS語法
CSS 規則由兩個主要的部分構成選擇器以及一條或多條聲明
selector{
property:value;
property:value;
... property: value
}
例如
h1 {color:red; font-size:14px;}
2.CSS的四種引入方式
a.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS
<p style="background-color:rebeccapurple">hello yuan</p>
b.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
c.鏈接式
將一個.css文件引入到HTML文件中
<linkhref="mystyle.css" rel="stylesheet" type="text/css"/>
t.約pan style="font-family:‘微軟雅黑‘, ‘sans-serif‘;">導入式
將一個獨立的.css文件引入HTML文件中導入式使用CSS規則引入外部CSS文件<style>標記也是寫在<head>標記中
<style type="text/css">
@import"mystyle.css";此處要註意.css文件的路徑
</style>
註意
導入式會在整個網頁裝載完後再裝載CSS文件因此這就導致了一個問題如果網頁比較大則會兒出現先顯示無樣式的頁面閃爍一下之後再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件因此顯示出來的網頁從一開始就是帶樣式的效果的它不會象導入式那樣先顯示無樣式的網頁然後再顯示有樣式的網頁這是鏈接式的優點
3.CSS選擇器
a.基本選擇器
b.組合選擇器：
E,F 多元素選擇器，同時匹配所有E元素或F元素，逗號分隔
:div,p { color:#f00; }
E F 後代元素選擇器，匹配所有屬於E元素下的F元素，空格分隔
:li a { font-weight:bold;｝
E > F 子元素選擇器，匹配所有E元素的子元素F
:div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F
（只匹配下面緊挨著的同級元素F，且只匹配一個）
:div + p { color:#f00; }
E ~ F 普通兄弟選擇器，以破折號分隔
（只匹配下面的同級元素F，匹配多個）
:.div1 ~ p{font-size: 30px; }
關於標簽嵌套：
塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要註意的是，p標簽不能包含塊級標簽
c.屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值
（註意：E在此處可以省略比如“[cheacked]”，以下同）
p[title]{ color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素
div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素
div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素
div[class*="test"]{background:#ffff00;}
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--屬性選擇器-->
<style>
/*自定義屬性*/
[egon]{ /*具有egon屬性的標簽*/
color:red;
}
[egon="ooo"]{ /*egon屬性的值為ooo的標簽*/
color: #2459a2;
}
[egon][alex]{ /*同時具有egon和alex屬性的標簽*/
color: darkgreen;
}
[egon~="cow"]{ /*egon屬性的其中一個值為cow的標簽*/
color: rebeccapurple;
}
[egon^="na"]{ /*egon屬性的值開頭為na字符的標簽*/
color: black;
}
[egon$="o"]{ /*egon屬性的值結尾為o字符的標簽*/
color: darkgoldenrod;
}
[egon*="me"]{ /*egon屬性的值含有me字符的標簽*/
color: coral;
}
</style>
</head>
<body>
<p egon="xxx" alex="sb">P4</p>
<p egon="ooo">P5</p>
<p egon="name cow">P6</p>
</body>
</html>
d.偽類選擇器
anchor偽類 專用於控制鏈接的顯示效果
a:link （沒有接觸過的鏈接）,用於定義了鏈接的常規狀態
a:hover （鼠標放在鏈接上的狀態）,用於產生視覺效果
a:visited （訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接
a:active （在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態
偽類選擇器 :
偽類指的是標簽的不同狀態:
a ==>點過狀態沒有點過的狀態 鼠標懸浮狀態 激活狀態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ /* 未訪問的鏈接 */
color: goldenrod;
}
a:hover{ /* 已訪問的鏈接 */
color: green;
}
a:visited{ /* 鼠標移動到鏈接上 */
color: darkgrey;
}
a:active{ /* 選定的鏈接，格式: 標簽:偽類名稱{ css代碼; }*/
color: lightgreen;
}
</style>
</head>
<body>
<a href="">鏈接</a>
</body>
</html>before after偽類
a:before p:before 在每個<p>元素之前插入內容
a:after p:after 在每個<p>元素之後插入內容（追加）
例：p:before{content:"hello";color:red;display:block;}
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer:after{
content: "world";
color: red;
}
</style>
</head>
<body>
<div class="outer">
<p>hello</p>
</div>
</body>
</html>
e.選擇器的優先級
1.css的繼承
依賴於祖先-後代的關系的，繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代
例如一個BODY定義了的顏色值也會應用到段落的文本中
body{color:red;}
<p>helloyuan</p>
這段文字都繼承了由body{color:red;}樣式定義的顏色，然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0，任何顯示申明的規則都可以覆蓋其繼承樣式
有一些屬性不能被繼承，如：border,margin, padding, background等
2.css的優先級
指CSS樣式在瀏覽器中被解析的先後順序
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
統計選擇符中的ID屬性個數 #id－－－－－－－－－－－－－－100
統計選擇符中的CLASS屬性個數 .class－－－－－－－－－－－－－10
統計選擇符中的HTML標簽名個數 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較
1、文內的樣式優先級為1,0,0,0，所以始終高於外部定義
2、有!important聲明的規則高於一切
3、如果!important聲明沖突，則比較優先權
4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)
f.CSS屬性操作
1.文本屬性（CSS text屬性）
文本顏色：color
顏色的三種表示方式：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
文本的水平對齊方式：text-align
left 把文本排列到左邊。默認值：由瀏覽器決定
right 把文本排列到右邊
center 把文本排列到中間
justify 實現兩端對齊文本效果
文本的其他屬性：
font-size: 10px; 字體大小
line-height: 200px; 文本行高，通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效（底線、中線、基線）
text-decoration:none 設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線
font-family: ‘Lucida Bright‘ 字體（宋體等）
font-weight: lighter/bold/border/ 文本粗細
font-style: oblique 字體傾斜（意大利斜等）
text-indent: 150px; 首行縮進150px
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform:capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
2.背景屬性
屬性介紹
background-color 背景顏色
background-image 背景圖片
background-repeat 設置背景的重復方式（平鋪）
background-position 設置背景的位置（兩個坐標）
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.c1{
width: 100%;
height: 500px;
/*background-color: green;*/
/*background-image: url("2.png");*/
/*background-repeat: no-repeat;*/
/*background-position: center center;*/
/*以上三個屬性可以簡寫*/
background: url("2.png") no-repeat center center;
}
</style>
</head>
<body>
<div class="c1">yan</div>
</body>
</html>
3.邊框屬性
4.列表屬性
list-style-type 設置列表項標誌的類型
list-style-image 將圖象設置為列表項標誌
list-style-position 設置列表中列表項標誌的位置
list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
list-style-type屬性指定列表項標記的類型：ul { list-style-type: square;}
使用圖像來替換列表項的標記:
ul {
list-style-image:url(‘‘);
}
5.display屬性
none 隱藏某標簽(不占空間位置)
p{display:none;}
註意與visibility:hidden的區別：
visibility:hidden 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失
練習：
none的應用：鼠標放置實現懸浮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 1px solid red;
}
.ico,.egon{
display: inline-block;
}
/*設置圖片隱藏*/
.myhide{
display: none;
}
/*設置鼠標懸浮後顯示*/
.box:hover img{
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="text">absdfjkd</div>
<div class="text">
<div class="ico">????????????????????</div>
<div class="egon"><img class="myhide" src="2.png" width="30px" height="30px"></div>
</div>
</div>
</body>
</html>
block 內聯標簽設置為塊級標簽
span {display:block;}
註意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素
inline 塊級標簽設置為內聯標簽
div {display:inline;}
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color: green;
/*把塊級標簽設置為內聯標簽*/
display: inline;
}
span{
width: 200px;
height: 200px;
background-color: wheat;
/*把內聯標簽設置為塊級標簽*/
display: block;
}
</style>
</head>
<body>
<div class="c1">div</div>
<span>span</span>
</body>
</html>
inline-block 把一個標簽設置為可設置長寬的內聯標簽
CSS布局關鍵點：如何能夠在一行顯示多個可以調節長寬的元素
思路一：float
思路二：display:inline-block
練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
.c2{
width: 200px;
height: 200px;
background-color: beige;
display: inline-block;
}
.c3{
width: 200px;
height: 200px;
background-color: coral;
display: inline-block;
}
/*調整inline-block之間的間隙*/
div{
margin-left: -5px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
6.外邊距（margine）和內邊距（padding）
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像
margine(外邊距)
單邊外邊距屬性：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
簡寫屬性：
margin:10px 20px 20px 10px；
上邊距為10px
右邊距為20px
下邊距為20px
左邊距為10px
margin:10px 20px 10px;
上邊距為10px
左右邊距為20px
下邊距為10px
margin:10px 20px;
上下邊距為10px
左右邊距為20px
margin:25px;
所有的4個邊距都是25px
居中應用：
margin: 0 auto;
7.float屬性
基本浮動規則
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麽A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麽A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麽A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列
非完全脫離文檔流
左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象
解決方法：要麽都不使用浮動；要麽都使用float浮動；要麽對沒有使用float浮動的DIV設置margin樣式
父級坍塌現象
.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子裏的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
>>>>解決方法：
1、固定高度
給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
或者給.container加一個固定高度的子div：
<div>
<divid="box1">box1 向左浮動</div>
<divid="box2">box2 向右浮動</div>
<div id="empty"style="height: 100px"></div>
</div>
<div id="box3">box3</div>
但是這樣限定固定高度會使頁面操作不靈活，不推薦！
2、清除浮動(推薦)。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要註意的是：clear屬性只會對自身起作用，而不會影響其他元素
把握住兩點：1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題
3、overflow:hidden
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什麽位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動
8.position（定位）
本文出自 “lyndon” 博客，請務必保留此出處http://lyndon.blog.51cto.com/11474010/1974426
前端基礎---CSS