css基礎進階css知識點

邊框

border-width:邊框的寬度

border-color:邊框的顔色

border-style:邊框的線型

border-top:上邊框

border-bottom:下邊框

border-left:左邊框

border-right:右邊框

代表邊框内壁與内部元素之間的距離

padding:10px;代表上下左右都是10px

padding:1px 2px 3px 4px;上右下左

padding:1px 2px;上下/左右

padding:1px 2px 3px; 上/左右/下

padding-top:單獨設定

代表邊框外壁與其他元素之間的距離

margin:10px;代表上下左右都是10px

margin:1px 2px 3px 4px;上右下左

margin:1px 2px;上下/左右

margin:1px 2px 3px;上/左右/下

margin-top:單獨設定

選擇器的優先級：id>class>元素

文法：html标簽名{css屬性} 示例：

文法：#id的值{css屬性}

文法：.class的值{css屬性}

文法：基本選擇器[屬性=‘屬性值’]{css屬性}

a标簽的僞元素選擇器 文法：

靜止狀态 a:link{css屬性}

懸浮狀态 a:hover{css屬性}

觸發狀态 a:active{css屬性}

完成狀态 a:visited{css屬性}

文法：父級選擇器 子級選擇器 …..

文法 僞類的文法： selector : pseudo-class {property: value}CSS 類也可與僞類搭配使用。 selector.class : pseudo-class {property: value}

假如上面的例子中的連結被通路過，那麼它将顯示為紅色。

文法 父級選擇器>子級選擇器(中間用 “ > ”連接配接 如果您不希望選擇任意的後代元素，而是希望縮小範圍，隻選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

這個規則會把緊跟 h1 下面的 strong 元素變為紅色

文法： 标簽+标簽 用一個結合符隻能選擇兩個相鄰兄弟中的第二個元素 如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。

在支援 CSS 的浏覽器中，連結的不同狀态都可以不同的方式顯示，這些狀态包括：活動狀态，已被通路狀态，未被通路狀态，和滑鼠懸停狀态。

a:link {color: #FF0000} /* 未通路的連結 */

a:visited {color: #00FF00} /* 已通路的連結 */

a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */

a:active {color: #0000FF} /* 標明的連結 */

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之後，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之後，才是有效的。

提示：僞類名稱對大小寫不敏感。

您可以使用 :first-child 僞類來選擇元素的第一個子元素。這個特定僞類很容易遭到誤解，是以有必要舉例來說明。考慮以下标記：

僞類 第一個元素 first-child 或者nth-child（1） 其他： a:not(:first-child)

font-size:大小

font-family:字型類型

color:顔色

line-height：行高

text-decoration ：文本裝飾

屬性值 - none - underline 會對元素加下劃線 - overline - line-through - blink

屬性值：none underline

text-align:對齊方式

屬性值：left center right

hello css!!!

<a href="#">click me!!!</a>

div{color:red;text-decoration: underline;text-align: right }

a{text-decoration: none;}

text-indent：文本縮進

所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。 text-indent 還可以設定為負值。利用這種技術，可以實作很多有趣的效果，比如“懸挂縮進”，即第一行懸挂在元素中餘下部分的左邊：

background:簡寫屬性

屬性值： 顔色 url 平鋪方式 移動位置（left top）

background-color:背景顔色

background-image:背景圖檔

屬性值：url(“圖檔位址”);

background-repeat:平鋪方式

屬性值：預設橫向縱向平鋪

repeat:橫向縱向平鋪

no-repeat:不平鋪

repeat-y：縱向

repeat-x：橫向

body{

background-color: black;

background-image: url(“images/dog.gif”);

background-repeat: repeat-y;

}

如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會随之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。 您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區是固定的（fixed），是以不會受到滾動的影響：

CSS 背景屬性

background                     簡寫屬性，作用是将背景屬性設定在一個聲明中。

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

background-color           設定元素的背景顔色。

background-image         把圖像設定為背景。

background-position      設定背景圖像的起始位置。

background-repeat        設定背景圖像是否及如何重複。

list-style-type:清單項前的小标志

屬性值：太多了

list-style-image:清單項前的小圖檔

width:寬度

height:高度

border-collapse ：折疊邊框

屬性設定是否将表格邊框折疊為單一邊框

text-align 和 vertical-align 屬性設定表格中文本的對齊方式。

text-align 屬性設定水準對齊方式，比如左對齊、右對齊或者居中： vertical-align 屬性設定垂直對齊方式，比如頂部對齊、底部對齊或居中對齊

CSS Table 屬性

屬性                                       描述

display:

屬性值： none:隐藏 block:塊級顯示 inline：行級顯示

float:

left right clear:清除浮動 left right both

缺點 ：

(1)影響相鄰元素不能正常顯示

(2)影響父元素不能正常顯示