選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定
通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的**書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。
即把某個標籤選擇出來
示例**:
選擇器分為基礎選擇器和復合選擇器兩大類。
基礎選擇器就是由單個選擇器構成
基礎選擇器又可以分為標籤選擇器、類選擇器、id選擇器和通配選擇器
標籤選擇器
標籤選擇器(元素選擇器)是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。
語法格式:
標籤名
第乙個標籤
第二個標籤
第三個標籤
第四個標籤
< style >寫在< head >標籤裡,直接引用標籤名加大括號。 是對所用使用相同標籤的內容進行樣式設定。如圖:
作用
標籤選擇器可以把某一類標籤全部選擇出來,比如所有的
標籤和所有的
標籤。優點
能快速為頁面中同型別的標籤統一設定樣式。
缺點
不能設計差異化樣式,只能選擇全部的當前標籤。
類選擇器
為了能夠針對某個特定的標籤進行設計,而不是全部同名標籤進行設定,就可以用類選擇器。類選擇器可以差異化選擇不同的標籤,單獨選乙個或某幾個標籤。
語法格式:
.類名
注意是 乙個點**.**加類名
示例**:
"red">第乙個標籤
第二個標籤
"red">第三個標籤
第四個標籤
輸出結果:
就是在head內用樣式點定義,在標籤內用結構類class呼叫,可以乙個或多個標籤呼叫,這是開發時最常用的方法。
點後面的名字可以任意取,但是不能和標籤名相同
注意事項:
①類選擇器使用"."(英文點號)進行標識,後面緊跟類名(自定義).
②可以理解為給這個標籤起了乙個名字,
③長名稱或片語可以使用中橫線來為選擇器命名。
④不要使用純數字、中文等命名,盡量使用英文本母來表示
⑤命名要有意義,盡量使別人-眼就知道這個類名的目的。
類選擇器 多類名
我們可以給乙個標籤指定多個類名 ,從而達到更多的選擇目的。就是乙個標籤有多個名字.每個類名必須用空格分開
格式:
"red box">第乙個是紅色
"green box">第二個是綠色
類名之間必須用空格隔開
示例**:
"red box">第乙個是紅色
"green box">第二個是綠色
"red box">第三個是紅色
"green box">第三個是綠色
樣式結果:
此時可以直接在box裡面修改所有方格的長寬高屬性。
(1)可以把一些標籤元素相同的樣式(共同的部分)放到乙個類裡面.
(2)這些標籤都可以呼叫這個公共的類然後再呼叫自己獨有的類.
(3)從而節省css**,統-修改企非常方便.
id選擇器
id選擇器可以為標有特定id的html元素指定特定的樣式。
html元素以id屬性來設定id選擇器, cs中id選擇器以**"#"**來定義。
語法格式:
#id名
呼叫直接在標籤內呼叫。
注意是先用#id名定義樣式,再在標籤內呼叫
示例**:
"pink">這是乙個用id選擇器設定的標籤
輸出結果:id選擇器只能呼叫一次,其他標籤不能呼叫已經被呼叫的id,而類選擇器是可用被多次呼叫的。
通配選擇器
通配選擇器表示選取頁面內的所有標籤,包括body,head,等等;
不需要呼叫通配選擇器,自動講所有元素標籤使用樣式。
語法格式:
這是乙個標籤
這是二個標籤
這是三個標籤
這是四個標籤
輸出結果:
CSS 再學習,基礎篇
語法 共享宣告 h1,h2,h3,h4,h5,h6繼承 通過 css 繼承,子元素將繼承最高端元素 在本例中是 body 所擁有的屬性 這些子元素諸如 p,td,ul,ol,ul,li,dl,dt,和 dd 不需要另外的規則,所有 body 的子元素都應該顯示 verdana 字型,子元素的子元素也...
CSS基礎學習總結
1.標準文件流 2.塊級標籤和行級標籤 塊級標籤 div form p h1等 行級標籤 span strong input img等 strong 文字加粗 塊級標籤和行級標籤都是盒子模型 3.盒子模型 都有的屬性border margin pading content 四個值 上右下左,順時針方...
CSS學習總結 基礎篇 設計字型屬性
css fonts屬性可以用於定義字型系列,大小,粗細,和文字樣式 斜體,加粗,下劃線等 css使用font family屬性定義文字的字型系列 語法格式 p div 示例 doctype html en utf 8 字型屬性 title h2p style head 標題字型設定為微軟雅黑 h2 ...