css知識點整理

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

一、css引入的方式

　　1、行內樣式：行內式是在標記的style屬性中設定CSS樣式。這種方式沒有反映出CSS的優勢，不建議使用。

　　2、嵌入式：嵌入式是將CSS樣式集中寫在網頁的標籤對的標籤對中。格式如下：

　　　　

　　

       　　

              .　　..此處寫CSS樣式

       　　

      　　

　　3、導入式：將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，

         

                    @import"mystyle.css"; 此處注意.css檔案的路徑

         

　　4、連結式：也是將一個.css檔案引入到HTML檔案中    

　　注意:導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這

　　是導入式固有的一個缺陷。使用連結式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣

　　先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

　　二、css的選擇器

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

　　1、基礎選擇器：

　　＊ ：                                  { margin:0; padding:0; }

　　E  ：                                 標籤選擇器，中與所有使用資料標籤中使用

　　.info與E.info:                     class選擇器，與所有class屬性中包含info 的元素        .info { background:ffff0;

　　#info和E#info                    id選擇器，與所有id屬性等於footer的元素          

　　2、組合選擇器：　　

   　E,F               多元素選擇器，同時搭配所有E元素或F元素，E和F之間以逗號分隔         

      E F                後代元素選擇器，並為所有屬於E元素後代的F元素，E與F之間以空格分隔    #nav li { display:inline; }    li: {pold-display:inline; }   ightli;

      E > F             子元素選擇器，與所有E元素的子元件F                 #f00; }

　　E + F            毗鄰元素選擇器，與所有緊接在E元素之後的同級元素F                 

　　注意嵌套规则：　

1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2. 块级元素不能放在p里面。
3. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
4. li内可以包含div
5. 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：
   ）

　　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;}

 

        p:before         在每个

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

        p:after           在每个

元素的内容之前插入内容                      p:after{ content:"hello"；color:red}

　　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代码; }

　　三、css常用属性

　　1、颜色属性　

  　　

ppppp

   　　

ppppp

 　　

ppppp

 

  　　

ppppp

　　2、字體屬性　

　　font-size: 20px/50%/larger

　　font-family:'Lucida Bright'

　　font-weight: lighter/bold/border/

　　

老男孩

　　3、背景屬性

　　

　　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加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片，另外，如果此時要設定一個

     width＝100px，你也看不出效果，除非你設定出html。   

<span style="color: #008080;"> 1</span> 
<span style="color: #008080;"> 2</span> "<span style="color: #800000;">en</span><span style="color: #800000;">"</span>>
<span style="color: #008080;"> 3</span> 
<span style="color: #008080;"> 4</span>     <meta charset="<span" style="color: #800000;">"<span style="color: #800000;">UTF-8</span><span style="color: #800000;">"</span>>
<span style="color: #008080;"> 5</span>     <title>Title</title>
<span style="color: #008080;"> 6</span>     <style>
<span style="color: #008080;"> 7 <span style="color: #000000;">        html{
<span style="color: #008080;"> 8             background-<span style="color: #000000;">color: antiquewhite;
<span style="color: #008080;"> 9             
<span style="color: #008080;">10 <span style="color: #000000;">        }
<span style="color: #008080;">11 <span style="color: #000000;">        body{
<span style="color: #008080;">12 <span style="color: #000000;">            width: 100px;
<span style="color: #008080;">13 <span style="color: #000000;">            height: 600px;
<span style="color: #008080;">14             background-<span style="color: #000000;">color: deeppink;
<span style="color: #008080;">15             background-image: url(1<span style="color: #000000;">.jpg);
<span style="color: #008080;">16             background-repeat: no-<span style="color: #000000;">repeat;
<span style="color: #008080;">17             background-<span style="color: #000000;">position: center center;
<span style="color: #008080;">18 <span style="color: #000000;">        }
<span style="color: #008080;">19     </style>
<span style="color: #008080;">20</span> 
<span style="color: #008080;">21</span> 

View Code

　　4、文字屬性

　　

　　 white-space: 設定元素中空白的處理方式

• normal：預設處理方式。
• pre：保留空格，當文字超出邊界時不換行
• nowrap：不保留空格，強制在同一行內顯示所有文本，直到文本結束或碰到br標籤
• pre-wrap：保留空格，當文字碰到邊界時換行
• pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行

　　direction: 規定文本的方向 

• ltr 默認，文字方向從左到右。
• rtl 文字方向從右到左。

　　text-align: 文本的水平對齊方式 

• left
• center
• right

  　　line-height: 文字行高

• normal 預設

  　　vertical-align: 文字所在行高的垂直對齊方式

• baseline 預設
• sub 垂直對齊文字的下標，和_{標籤一樣的效果}
• super 垂直對齊文字的上標，和^{標籤一樣的效果}
• top 物件的頂端與所在容器的頂端對齊
• text-top 物件的頂端與所在行文字頂端對齊
• middle 元素物件基於基線垂直對齊
• bottom 物件的底端與所在行的文字底部對齊
• text-bottom 物件的底端與所在行文字的底端對齊

  　　text-indent: 文字縮排

  　　letter-spacing: 添加字母之間的空白

  　　word-spacing: 加入每個單字之間的空白

  　　text-transform: 屬性控製文字的大小寫

• capitalize 文本中的每個單字以大寫字母開頭。
• uppercase 定義僅有大寫字母。
• lowercase 定義僅有小寫字母。

  　　text-overflow: 文字溢位樣式

• clip 修剪文字。
• ellipsis 顯示省略符號...來代表被修剪的文字。
• string 使用給定的字串來代表被修剪的文字。
•   text-decoration: 文字的裝飾
• • none 預設。
  • underline 下劃線。
  • overline 上劃線。
  • line-through 中線。

    text-shadow：文字陰影

  • 第一個參數是左右位置
  • 第二個參數是上下位置
  • 第三個參數是虛化效果
  • 第四個參數是顏色
  • text-shadow: 5px 5px 5px #888;

    word-wrap：自動換行

  • word-wrap: break-word;

　　

　　5. 列表屬性

  　　list-style-type: 列表項目標誌的型別

• none 去除標誌
• decimal-leading-zero;  02.
• square;  方框
• circle;  空心圓
• upper-alph; & disc; 實心圓

  　　list-style-image：將圖象設定為列表項目標誌

  　　list-style-position：列表項目標誌的位置

• inside
• outside

 　　 list-style：縮寫

　　

　6. 邊框 

  　　border-style：邊框樣式

• solid 默認，實線
• double 雙線
• dotted 點狀線條
• dashed 虛線

 　　 border-color：邊框顏色

  　　border-width：邊框寬度

  　　　　border-radius：圓角

• 1個參數：四個角落都應用
• 2個參數：第一個參數應用於 左上、右下；第二個參數應用於 左下、右上
• 3個參數：第一個參數應用於 左上；第二個參數應用於 左下、右上；第三個參數應用於右下
• 4個參數：左上、右上、右下、左下（順時針）

  　　border: 簡寫

• border: 2px yellow solid; 

 　　 box-shadow：邊框陰影

• 第一個參數是左右位置
• 第二個參數是上下位置
• 第三個參數是虛化效果
• 第四個參數是顏色
• box-shadow: 10px 10px 5px #888;

　　

　　7、display

• none 不显示。
• block 显示为块级元素。
• inline 显示为内联元素。
• inline-block 行内块元素（会保持块元素的高宽）。
• list-item 显示为列表元素。

 　　8、盒子模型

　　什么是盒子模型？

　　

　　padding:用于控制内容与边框之间的距离;

　　margin: 用于控制元素与元素之间的距离; 

　　

　　一个参数，应用于四边。

　　两个参数，第一个用于上、下，第二个用于左、右。

　　三个参数，第一个用于上，第二个用于左、右，第三个用于下

　　边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法

　　

<span style="color: #008080;">1</span> <span style="color: #800000;">body </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> }

View Code

　　9、float

　　

　　讓一行顯示兩個區塊級標籤，會脫離文檔流

• none
• left 左浮動
• right 右浮動

　　clear 清除浮動：

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

 　10、position

　　

 　　1 static，預設值 static：無特殊定位，物件遵循正常文件流。

   top，right，bottom，left等屬性不 會被應用。 說到這裡我們必須提一下一個定義－文檔流，文檔流其實就是文檔的輸出順序， 也就是我們通常看到的由左      到右、由

　　上而下的輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性可以將元素從文檔流脫離出來顯示。 預設值就        是讓元素繼續按照

　　文檔流程顯示，不作出任何變更。

　　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 卻可以。因為它原本所佔的空間仍然佔據文檔流。

 

　　

 

　　透過以下四種屬性進行定位：　　

• left
• top
• right
• bottom
• z-index