隨便寫寫，當作了解Css_html/css

選擇器 聲明塊

一、使用

css的注釋用 /* 注釋內容 */

1.導入外部樣式表

rel:表示關系，這里的關系是“stylesheet”；如果將rel定義為“alternate stylesheet”，他就為候選樣式表，利用title屬性生成候選樣式列表；

type:描述link加載的數據類型；

href:樣式表的位子；

media:這個樣式要運用的媒體，all表示所有。

2.內嵌在頁面的css

。可以使用media屬性。

3.內嵌樣式表中導入外部樣式表

media作用和前面的link一樣，可有可無。

4.內聯的樣式

直接使用元素的style屬性,指定p標簽內的顏色為紅色

xxxx

二、選擇器

1 分組

h1 , h2 , p { color : red; } 逗號表示分組，這句表示h1,h2,p標簽的字體顏色為紅色。如果不要逗號，意義完全不一樣。

* { color : grey ; font-size: 80px ;} * 是通配選擇器，表示所有的標簽元素 字體為灰色，大小為80像素。

2 類選擇器 要區分大小寫

.warning { font-weight : bold ; } 表示class值為“warning”的標簽，字體全部加粗。前面有英文的句號。類選擇起可以連起用 如 p.warning.help ,他匹配的是class屬性包含warning 和 help的p元素。中間沒有空格。

3 id選擇器 要區分大小寫

#warning { font-weight : bold ; } 表示Id值為“warning”的標簽，字體全部加粗。前面有井號。

p#warning 表示id為warning的p元素

類名可以重復用，而html中標簽的id是唯一的。這意味著id選擇器在一個html文檔中，最多只會使用一次。

4 屬性選擇器 [ ]

4.1根據屬性選擇

h1[class] { color: silver } 表示 帶有class 標簽的h1元素都被選擇，設置字體顏色為灰色。

* [id] 表示選擇所有的帶有id屬性的元素。其他屬性選擇同理。

4.2根據屬性值選擇

a[ href =”http://www.baidu.com”] 表示選擇所有超鏈接等于百度的a標簽。

p[ calss=”warning”] 表示選擇所有class等于warning的p標簽。

4.3根據部分屬性值選擇

p[ class~=”warning”]表示包含warning這個詞的class屬性，注意不是包含這個字符串，而是包含詞，使用空格分開的詞！他根據屬性中，一個用空格分隔的詞來完成選擇。他等價與 p.class

p[ class ^=”warning”] 表示calss屬性以字符串warning開頭的p標簽。

p[ class $=”warning”] 表示calss屬性以字符串warning結尾的p標簽。

p[ class *=”warning”] 表示calss屬性包含字符串warning的p標簽。

4.4后代選擇器

#d1 h1{ color : red }表示id為d1元素的所有后代h1字體顏色為red。

#d1 > h1{ color : red }表示id為d1元素的所有直接子元素h1字體顏色為red。

#d2 + div{ color : red }表示id為d2元素的緊接著的一個兄弟節點div的字體為紅色。

4.5偽類選擇器

a:link 表示未訪問的超鏈接

a:visited 表示已訪問的超鏈接

input : focus 表示當前有輸入焦點的input元素。

p:hover 表示當前鼠標停留的元素。

button : active 表示被用戶輸入激活的元素。

注：在a標簽上設置偽類樣式時，推薦是“LOVE-HA” ；link ，visited ， hover ， active

h1:first-child 選擇 作用第一個子元素的 h1 。eg：

d1外的h1

d1內的h1

d2內的h1

d1內的h1

* : lang(fr) 選擇所有法語。這個是對語言進行選擇

4.6偽元素選擇器

p:first-letter 選擇塊級元素的首字母 。常用的塊級元素 p div h 。。

p:first-line 選擇塊級元素的第一行文本

注：first-letter 和 first-line 對屬性的使用是有限制的，不是所有屬性都有效！

h1:before ｛contetn: “myContetn”；｝ 在標簽h1前添加一個myContent，后面可以設置樣式。

h1:after｛contetn: “myContetn”；｝ 在標簽h1后添加一個myContent，后面可以設置樣式。

三、關于定位和浮動

position的四個屬性。

1、static：默認值。沒有定位，元素出現在正常的流中。

2、relative：生成相對定位的元素，通過top,bottom,left,right的設置相對于其正常位置進行定位。他是相當于原本位置的偏移位置，可能會覆蓋其他元素。他原本的位置會保留。

3、absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。這種定位的元素不再正常流當中，完全被獨立了的。可能會覆蓋其他元素。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

4、fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

他們的上下關系用z-index確定。

浮動，float：left | right | none

他會從正常流中刪除，但是還是會影響布局。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com