首頁 > 文章 > web前端 > 如何才能學好CSS？

如何才能學好CSS？

零下一度原創: 2017-06-26 13:29:011621瀏覽

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以讓網頁的表現與資料內容分開。

一、 css的三種引入方式
二、 css的選擇器（Selector）
、蟎流與浮動
1 文件流
2 加入浮動(float)

3 清除浮動、 css的三種引入方式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有反映出CSS的優勢，不建議使用。
2.嵌入式
標籤對中。格式如下：
```
<head>
<style type="text/css">
     ...此处写CSS样式
</style>

</head>
```
3.連結式
將一個.css文件引入到HTML文件中
```
<link href="mystyle.css?1.1.11" rel="stylesheet" type="text/css"/>
```
注意：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的缺陷。使用連結式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

二、 css的選擇器（Selector）

「選擇器」指明了{}中的「樣式」的作用對象，也就是「樣式」作用於網頁中的哪些元素

1 基礎選擇器：

＊：通用元素選擇器，與任何元素 padding:0; }

E ：中標記上使用「 .info:
class選擇器，匹配所有class屬性中包含info的元素
```
.info { background:#ff0; }    p.info { background:blue; }
```
#info和E#infoid選擇器，匹配所有id屬性等於footer的元素
```
 #info { background:#ff0; }   p#info { background:#ff0; }
```
2 組合選擇器
E, F
多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
div,p { color:#f00; }

E F

後代元素選擇器
，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔#nav li { display:inline; } li a { font-weight:bold; }
E > F
子元素選擇器，匹配所有E元素的子元素F div > 中之後之後與選擇 +f00; }/p { color:#f00; }

注意巢狀規則：
區塊級元素可以包含內聯元素或某些區塊級元素，但內聯元素不能包含區塊級元素，它只能包含其它內聯元素。
塊級元素不能放在p裡面。
有幾個特殊的區塊級元素只能包含內聯元素，不能包含區塊級元素。如h1,h2,h3,h4,h5,h6,p,dt,li內可包含div
塊級元素與區塊級元素並列、內聯元素與內聯元素並列。
```
/*错误的*/
<div><h2></h2><span></span></div>）
```
3 屬性選擇器
```
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[att|=val]    匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，

                  比如“en”、“en-us”、“en-gb”等等                                                    p[lang|=en] { 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;}
```
4 偽類選擇器：

偽類選擇器：專用於控制連結的顯示效果
```
a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

/*伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态*/

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

p:before         在每个 <p> 元素的内容之前插入内容                     p:before{content:"hello";color:red}

p:after           在每个 <p> 元素的内容之前插入内容                      p:after{ content:"hello"；color:red}
```
三、字體的常用屬性
屬性：
```
<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div> 

<div style="color:rgba(255,0,0,0.5)">ppppp</div>
```
3 背景屬性：
```
font-family:'Helvetica,Arial,"Courier New"'

font-size: 20px/em/larger
default size = 16px
em = pixels/16

font-style:ilatlic/normal/oblique

font-weight: lighter/bold/border/100-900

<h1 style="font-style: oblique">oblique</h1>
```
注意：如果講背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片，另外，如果此時要設定一個width＝100px，你也看不出效果，除非你設定出html。
4 文字屬性：
```
background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：
<body style="background: 20px 20px no-repeat #ff4 url(&#39;1.jpg&#39;)">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(&#39;1.jpg&#39;)">
```
5 邊框屬性：
```
font-size: 10px;

text-align: center;横向排列

line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

p { width: 200px;

height: 200px;

text-align: center;

background-color: aquamarine;

line-height: 200px; }


vertical-align:top,middle,bottom/baseline,sub,super,-10px

text-decoration:none/inherit/underline/overline/line-though

text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比

text-shadow:阴影

letter-spacing: 10px;

word-spacing: 20px;

direction: rtl;

text-transform: capitalize;
```
6 列表屬性
```
border-style: solid;

border-color: chartreuse;

border-width: 20px;

简写
border: 30px rebeccapurple solid;
```
7 dispaly屬性
```
ul,ol{ list-style: decimal-leading-zero;

    list-style: none; list-style: circle;

    list-style: upper-alpha;

    list-style: disc; }
```
四、型號會定位在瀏覽器視窗的左上角，但是並沒有緊貼瀏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html）。
在預設情況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器視窗的邊框了。
>>>解決方法：
```
none
block
inline
```
注意2：margin collapse（邊界塌陷或邊界重疊）
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。
當我們上下排列一系列規則的塊級元素（如段落P）時，那麼塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。

兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值

父子div ：如果父級div中沒有border，padding， inline content，子級div的margin會一直往上找，直到找到某個標籤包含border，padding，inline content 中的其中一個，然後按此div 進行margin>>>解決方法：
```
border:1px solid transparent
padding:1px
over-flow:hidden;
```
五、文档流与浮动

1 文档流

文档流确切的说应该是文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）在页面中独占一行、自上而下排列，内联元素（inline）不独占一行。

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。注意，以上这些理论，是指标准流中的div。

文档流也可以理解为文档的输出顺序，标准流是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的。float和position两个属性可以将元素从文档流脱离出来显示。

2 添加浮动(float)

无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

1 浮动一个div元素

例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。

如果我们把div2采用右浮动，会是如下效果：

此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

2 浮动多个div元素

把div2和div3都加上左浮动，效果如图：

同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。

咳咳，到重点了，当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。

3 再举几个例子

假如我们把div2、div3、div4都设置成左浮动，效果如下：

根据上边的结论：先从div4开始分析，它发现上边的元素div3是浮动的，所以div4会跟随在div3之后；div3发现上边的元素div2也是浮动的，所以div3会跟随在div2之后；而div2发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和div1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此div2在最左边。

假如把div2、div3、div4都设置成右浮动，效果如下：

道理和左浮动基本一样，只不过需要注意一下前后对应关系。由于是右浮动，因此右边靠近页面边缘，所以右边是前，因此div2在最右边。

假如我们把div2、div4左浮动，效果图如下：

依然是根據結論，div2、div4浮動，脫離了標準流，因此div3將會自動上移，與div1組成標準流。 div2發現上一個元素div1是標準流中的元素，因此div2相對垂直位置不變，與div1底部對齊。 div4發現上一個元素div3是標準流中的元素，因此div4的頂部和div3的底部對齊，並且總是成立的，因為從圖中可以看出，div3上移後，div4也跟著上移，div4總是保證自己的頂部和上一個元素div3(標準流中的元素)的底部對齊。

至此，已經掌握了添加浮動，但還有清除浮動，有上邊的基礎清除浮動非常容易理解。

3 清除浮動(clear)

元素浮動之前，也就是在標準流中，是垂直排列的，而浮動之後可以理解為橫向排列。

清除浮動可以理解為打破橫向排列。

清除浮動的關鍵字是clear,定義如下：

none : 預設值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象

根據上邊的基礎，假如頁中只有兩個元素不允許有浮動對象
根據上邊的基礎，假如頁中只有兩個元素div1、div2 ，它們都是左浮動，場景如下：

此時div1、div2都浮動，根據規則，div2會跟隨在div1後邊，但我們仍然希望div2能排列在div1下邊，就像div1沒有浮動， div2左浮動那樣。
這時候就要用到清除浮動（clear），如果單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中加入clear:right;，理解為不允許div1的右邊有浮動元素，由於div2是浮動元素，因此會自動下移一行來滿足規則。
這種理解是不正確的，這樣做沒有任何效果。
對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。

我們是想讓div2移動，但我們卻是在div1元素的CSS樣式中使用了清除浮動，試圖透過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，因為這個清除浮動是在div1中呼叫的，它只能影響div1，不能影響div2。

根據結論，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本範例中div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。
那麼假如頁中只有兩個元素div1、div2，它們都是右浮動呢？讀者此時應該已經能自己推測場景，如下：

此時如果要讓div2下移到div1下邊，我們希望移動的是div2，就必須在div2的CSS樣式中調用浮動，因為浮動只能影響調用它的元素。

可以看出div2的右邊有一個浮動元素div1，那麼我們可以在div2的CSS樣式中使用clear:right;來指定div2的右邊不允許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

4 定位（position）
1 static，預設值 static：無特殊定位，物件遵循正常文件流。
top，right，bottom，left等屬性不會被套用。

2 position:relative

relative：物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊透過z-index屬性定義。

absolute：物件脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊透過z-index屬性定義。如果設定 position:relative，就可以使用 top,bottom,left和 right 來相對於元素在文件中應該出現的位置來移動這個元素。
即元素實際上仍然佔據文檔中的原有位置，只是視覺上相對於它在文檔中的原有位置移動了。
當指定 position:absolute 時，元素就脫離了文檔
即在文檔中已經不佔據位置了，可以準確的按照設置的top,bottom,left 和 right 來定位
。

如果一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，如果有設置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。

3 position:fixed

在理論上，被設定為fixed的元素會被定位於瀏覽器視窗的一個指定座標，無論視窗是否滾動，它都會固定在這個位置。
🎜fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現捲軸時，物件不會隨著滾動。而其層疊透過z-index屬性定義。 🎜
注意點：一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是「定位流」。但是 relative 卻可以。因為它原本所佔的空間仍然佔據文檔流。