css知識點清單

javaweb的css部分

自己總結的知識點清單，如果轉發請注明出處，尊重原創，雖然寫的不怎麼樣吧，哈哈 ，内容中有些時候是不連貫的，那是本人做的筆記，或者寫的感想，不影響閱讀。有錯誤的地方還請批評指正。

css部分

css文法

1.css基本文法

       selector{

              property:value

              }

例如：h1{color:red;font-size:14px}

屬性大于1個之後，屬性之間用分号隔開

如果值大于一個單詞，則需加上引号：

       P{font-family:”sansserif”}

2.css進階文法

       2.1選擇器分組；就是多個元素是同一個樣式。

       H1,h2,h3,h4,h5,h6{color:red;}

       2.2繼承，就是下一級的元素沒有指定css樣式，那麼和上一級的相同。

       Body{

              Color:green;

       }

1.    css派生選擇器

ul li {

……………..}

2.    css的id選擇器

5.1、選擇器

        id選擇器可以為帶有id的HTML元素指定特定的樣式

id選擇器以#來定義。

5.2、id選擇器和派生選擇器

        目前比較流行的方式是id選擇器常常用于建立派生選擇器。

3.    css的類選擇器

1、.類選擇器

        類選擇器以一個點進行顯示

2.、class也可以作為派生選擇器。

7.css屬性選擇器。

       1、屬性選擇器

              對帶有指定屬性的HTML元素設定樣式。

              [屬性]{…………..}

       2.屬性和值選擇器。

              [屬性=值] {………………}

Css樣式

1.    css樣式-背景。

背景。

Css允許應用純色作為背景，也允許使用背景圖像建立相當複雜的效果。

屬性                                                                       描述

Background-attachment                    背景圖像是否固定或者随着頁面的其餘部分滾動

Background-color                              設定元素的背景顔色

Background-image                            把圖檔設定為背景。

Background-position                         設定背景圖檔的起始位置

Background-repeat                            設定背景圖檔是否以及如何重複

Background-size:                               規定背景圖檔的尺寸

Background-origin                            規定背景圖檔的定位區域

Background-clip                                規定背景的繪制區域。

Padding是一個内邊框。

Background-position:right----------是一個從圖檔右邊，和中間顯示，一般不單獨使用

應該是這樣的。Background-position:right top,也可以添加具體數值和百分比。

2.    css文本

css文本屬性可以定義文本外觀

通過文本屬性，可以改變文本顔色、字元間距、對齊方式、裝飾文本、對文本縮進

屬性                                                                       描述

Color                                                 文本顔色

Direction                                            文本方向

Line-height                                        行高

Letter-spacing                                   字元間距

Text-align                                          對齊元素中的文本

Text-decoration                                 向文本添加修飾

Text-indent                                        縮進元素中的文本首行

Text-transform                                   元素中的字母

Unicode-bidi                                      設定文本方向

White-space                                      元素中的空白處理方式。

Word-spacing                                   字間距。

Text-shadow                                      向文本中添加陰影

Word-wrap                                       規定文本的換行規則。

3.    css字型

css字型屬性定義文本的字型系列、大小、加粗、風格和變形。

屬性                                                                       描述

Font-family                                                      設定字型系列

Font-size                                                         設定字型尺寸

Font-style                                                        設定字型風格

Font-variant                                                    以小型大寫字型或正常字型顯示文本

Font-weight                                                     設定字型粗細

4.    css連結

4.1、css連結的四種狀态

        a:link      普通的、未被通路的連結。

        a:visited         使用者已經通路過得連結

        a:hover   滑鼠指針位于連結上方

        a:active          連結呗點選的時刻

例如：a:visited       {

               Color:green;

        }

4.2、常見的連結方式

        Text-decoration屬性大多數用于将連結的下劃線去掉。

        比如

               text-decoration:none;

        background-color:

5.    css清單

css清單屬性允許你放置、改變清單标志、或者将圖像作為清單項标志。

屬性                                                                       描述

List-style                                                          簡寫清單項

List-style-image                                               清單項圖示

List-style-position                                            清單标志位置

List-style-type                                                 清單類型。

List-style-type -----可以是空心圓，或者序号等

List-style-image:url(“……圖檔路徑”)

List-style  :none是沒有任何圖示

6.    css表格

6.1、css表格

Css表格屬性可以幫助我們極大的改善表格外觀

6.2表格邊框

6.3、折疊邊框

6.4、表格寬高

6.5、表格文本對齊;

6.6、表格内邊距

6.7、表格顔色

屬性                                                                       描述

Border                                                             設定外邊框

Border-collapse                                               折疊邊框，就是合并雙邊框，變成單邊框

Width                                                              表格寬

Height                                                             表格高

Text-align                                                        表格内容居中

Solid                                                                設定邊框邊緣顔色

7.    css輪廓

輪廓的作用主要是用來突出元素

屬性                                                                       描述

Outline                                                            設定輪廓屬性

Outline-color                                                   設定輪廓顔色

Outline-style                                                    設定輪廓的樣式

Outline-width                                                  設定輪廓的寬度

Css定位

1.    css定位

改變元素在頁面中的位置

1.1、     css定位機制

普通流：元素按照其在HTML中的位置順序決定排布過程

浮動

絕對布局

1.2、     css定位屬性

屬性                                                                            描述

Position                                                         把元素放在一個靜态的、相對的、絕對的                                                                     或者固定的位置中

Top                                                               元素向上的偏移量

Left                                                                元素向左的偏移量

Right                                                              元素向右的偏移量

Bottom                                                          元素向下的偏移量

Overflow                                                        設定元素溢出其區域發生的事情

Clip                                                                設定元素顯示的形狀

Vertical-align                                                 設定元素的垂直對齊方式

z-index                                                          設定元素的堆疊順序。

Position屬性：

Static:left/right等都對它不起作用

Relative：相對布局。相對于父容器的位置，可以通過left屬性左加上多少數。Right等調整

Absolute：絕對布局，好像是摳出來不在頁面，也可以通過left。Right等調整

Fixed：固定布局，可以不随着滾動條的動而動

2.      css浮動

2..1浮動

Float屬性可用的值：

      Left                       元素向左浮動

      Right                    元素向右浮動

      None                    元素不浮動。

      Inherit                   從父級繼承浮動屬性。

2.2、clear屬性

      去掉浮動屬性，包括繼承來的浮動屬性

      Clear屬性值

             Left、right：去掉元素的左、右浮動

             Both:左右兩側均去掉浮動

             Inherit：從父級繼承來的clear的值

Css盒子模型

1.    盒子模型的内容範圍包括

Margin                  外邊距

Border                   邊框

Padding                 内邊距

Content                 内容

2.    css内邊距

内邊距在content外、邊框内

屬性                                                                            描述

Padding                                                                  設定所有邊距

Padding-bottom                                                     設定底邊距

Padding-left                                                           設定左邊距

Padding-right                                                         設定右邊距

Padding-top                                                           設定上邊距

3.    css邊框

我們可以建立出效果出色的邊框，并且可以應用于任何元素

邊框的樣式：

        Border-style：定義了10種不同的非繼承樣式，包括none

邊框的單邊樣式

Border-top-style

Border-left-style

Border-right-style

Border-bottom-style

邊框的寬度：

Border-width

              邊框的單邊寬度

Border-top-width

Border- left -width

Border- right -width

Border- bottom -width

邊框顔色：

Border-color

單邊框顔色

Border-top-color

Border- left -color

Border- right -color

Border- bottom -color

Css3邊框

Border-radius：圓角邊框    可以變成圓形，就是扣扣的那個

Box-shadow：邊框陰影

               Box-shadow：10px 10px 5px #FFCCFF;

       ：吧第一個數是左偏移，第二個數是上偏移，第三個數是透明度，第四個數是顔色

Border-image：邊框圖檔

4.    css外邊距

外邊距：圍繞在内容邊框的區域就是外邊框，外邊距預設為透明區域，外邊距接收任何長度機關、百分數值

外邊距常用屬性：

屬性                                                                         描述

Margin                                                            設定所有邊距

Margin-bottom                                                設定下邊距

Margin-left                                                      設定左邊距

Margin-right                                                    設定右邊距

Margin-top                                                      設定上邊距

5.    css外邊距合并

外邊距合并就是一個疊加的概念。遵循多個哪一個，就是兩個部分的外邊距都是100的話，哪麼兩個平行的部分就是100而不是二百。如果一個是100，一個是50，哪麼兩個平行的部分就是相差100

Css常用操作

1.    對齊操作

1.1、     margin進行水準對齊

margin-left屬性設定成為auto

margin-right屬性設定為auto

那麼兩邊就進行了對等的配置設定，也就是居中對齊。

Margin:100px auto

就是上下是100px，左右是居中

1.2、使用psition屬性進行左對齊或者右對齊

1.3、使用f loat屬性進行左對齊或者右對齊

2.分類操作

       2.1．屬性

   屬性                                                                             描述

Height                                                                      設定元素高度

Line-height                                                              設定行高

Max-height                                                              設定元素最大高度

Max-width                                                                設定元素最大寬度

Min-height                                                               設定元素最小高度

Min-width                                                                設定元素最小寬度

Width                                                                       設定元素寬度

分類屬性

屬性                                                                         描述

Clear                                                   設定一個元素的側面是否允許其他元素浮動

         Cursor                                                 規定當指向某元素之上時顯示的指針類型

         Display                                                 設定是否以及如何顯示元素

         Float                                                    定義元素在哪個方向上面浮動

         Position                                               把元素放置到一個靜态的、相對的、絕對的笃

定的位置

         Visibility                                               設定元素是否可見或不可見

Display設定清單是否可見或者不可見，display:inline     就變成了一行，設定成了導航欄

Visibility設定清單元素是否可見或不可見

2.      導航欄

導航欄都是用清單方式實作的

2.1、垂直導航欄

2.2、水準導航欄

2.3、導航欄效果

3.css圖檔操作

       Opacity:0.5            設定透明度。如果是0的話，那麼是完全透明的，1是原圖

css選擇器

1.    元素選擇器

1.1、     最常見的選擇器就是元素選擇器，文檔的元素就是最基本的選擇器

例如：h1{},              a{}

組合選擇器：h1,h2,h3{          }

Div h1 ul li{       }

2.      類選擇器

2.1、     類選擇器允許以一種與文檔元素的方式來指定樣式

.class{        }

2.2、     組合元素選擇器：

例如：a.class{          }

2.3、     多類選擇器

例如：class.class{            }擁有了兩個class的css

3.      id選擇器

id選擇器類似于類選擇器，不過也有一些重要差别

例如：#id{           }

3.2、類選擇器和id選擇器差別

      Id隻能在文檔中使用一次，而類可以多次使用

      Id選擇器不能結合使用

      當使用js的時候，需要用到id

4.      屬性選擇器

4.1、     簡單屬性選擇器

例如：[title]{     }

4.2、     根據具體屬性值選擇：

除了選擇擁有某些的元素，還可以進一步縮小選擇範圍，隻選擇有特定屬性值的元素，例如：a[href=”連結”]{   };

4.3、     屬性和屬性值必須完全比對

4.4、     根據部分屬性值選擇

比如：title~=“hello”就是模糊比對其中的值中含有hello的值

5.      後代選擇器

Css3動畫效果

1、2d、3d的轉換

       1.1

              通過css3的轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸

                     轉換是使元素改變形狀、尺寸和位置的一種效果

                     可以使用2d、3d來轉換元素

       1.2、2D的轉換方法。

              通過transform屬性來引入動畫

              Translate()             :移動

                            比如在css檔案中是 transform: translate(100px,100px);

                            -webkit-transform:     translate(100px,100px);        支援safari     chrome

                            -ms-transform:     translate(100px,100px);        支援IE

                            -o-transform:      translate(100px,100px);        支援opera

                            -moz-transform:  translate(100px,100px);        支援firefox

                            360浏覽器核心什麼的都是用的IE是以IE的就行

              Rotate(度數deg)                 旋轉

              Scale(1，2)                   縮放       第一個參數是寬度的縮放，第二個參數是高度縮放

              Skew(50deg，50deg)          傾斜       第一個是圍繞x軸旋轉的度數，第二個是Y

              Matrix()                        矩陣

       1.3、3D轉換方法

              rotateX()        一個參數，表示被壓縮

              rotateY()

2.    過渡

通過css3可以給元素添加一些效果

2.1、     css過渡是元素從一種形式轉換成另一種形式

動畫效果的css

動畫執行的時間

2.2、     屬性

屬性                                                                             描述

Transition                                                              設定四個過渡屬性

Transition-property                                                過渡的名稱

Transition-duration                                                過渡效果花費的時間

Transition-timing-function                                     過渡效果的時間曲線

Transition-delay                                                     過渡效果開始的時間。延時時間

       Transition:      width 2s,height 2s,-webkit-transform 2s;

              寬高執行時間，和旋轉的執行時間2s，浏覽器的支援如上

3.      動畫

3.1、     通過css3，也可進行建立動畫了

3.2、     Css3的動畫需要遵循@keyframes規則

規定動畫的時長

規定動畫的名稱

Animation：名稱 執行時間(s);infinite   alternate 一直執行，如果沒有這個那麼就是執行一次。

浏覽器支援

然後

@keyframes 名稱{

   0%{background:red…….添加效果}-------------0%的時候的樣子

   25%{background:green…….添加效果}---------25%的時候的樣子

}

浏覽器支援

4.      多列

4.1、     在css3中，可以建立多列來對文本或者區域進行布局。

4.2、     屬性

Column-count         分列的數量

Column-gap            每一列中間所間隔的距離

Column-rule            每一列間隔的線以及線的顔色

Column-width         每一列的寬度

多列可以實作瀑布流效果

<hr/>分割線