从零基础到web前端工程师(三)
前文連接:從零基礎到web前端工程師(二)
CSS選擇器
文章目錄
- CSS選擇器
- 初始CSS
- 引入CSS樣式表
- 內部樣式表
- 行內式(內聯樣式)
- 外部樣式表(外鏈式)
- 三種樣式表總結(位置)
 
- CSS樣式規則
- CSS基礎選擇器
- 標簽選擇器(元素選擇器)
- 類選擇器
- 多類名選擇器
- id選擇器
- 通配符選擇器
 
- CSS字體樣式屬性
- CSS外觀屬性
- CSS復合選擇器
- 交集選擇器
- 并集選擇器:
- 后代選擇器
- 子元素選擇器
- 偽類選擇器
 
 
 
初始CSS
從HTML被發明開始,樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
 隨著HTML的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是隨著這些功能的增加,HTML變的越來越雜亂,而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS(Cascading Style Sheets) 美化樣式,CSS通常稱為CSS樣式表或層疊樣式表(級聯樣式表),主要用于設置HTML頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
 CSS以HTML為基礎,提供了豐富的功能,如字體、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設置不同的樣式。
引入CSS樣式表
內部樣式表
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中,并且用style標簽定義,其基本語法格式如下:
<head> <style type="text/CSS">選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} </style> </head>代碼實例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">h3{color: #FF0000;}div{color: #8EA9DB;}h4{color: deeppink;}p{color: #FFD966;size: letter;}</style> </head> <body> <h3>憶江南(1)</h3><div>唐.白居易</div><p>江南好,風景舊曾諳。(2) 日出江花紅勝火,春來江水綠如藍,(3) 能不憶江南。</p><h4>作者介紹</h4><p>白居易(772-846) ,字樂天,太原(今屬山西)人。唐德宗朝進士,元和三年(808)拜左拾遺,后貶江州(今屬江西)司馬,移忠州(今屬四川)刺史,又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽,自號醉吟先生、香山居士。其詩政治傾向鮮明,重諷喻,尚坦易,為中唐大家。也是早期詞人中的佼佼者,所作對后世影響甚大。</p><h4>注釋</h4> <p>(1)據《樂府雜錄》,此詞又名《謝秋娘》,系唐李德裕為亡姬謝秋娘作。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字,雙凋五十四字,皆平韻。(2)諳(音安):熟悉。(3)藍:藍草,其葉可制青綠染料。</p> <h4>品評</h4><p>此詞寫江南春色,首句“江南好”,以一個既淺切又圓活的“好”字,攝盡江南春色的種種佳處,而作者的贊頌之意與向往之情也盡寓其中。同時,唯因“好”之已甚,方能“憶”之不休,因此,此句又已暗逗結句“能不憶江南”,并與之相關闔。次句“風景舊曾諳”,點明江南風景之“好”,并非得之傳聞,而是作者出牧杭州時的親身體驗與親身感受。這就既落實了“好”字,又照應了“憶”字,不失為勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進 行形象化的演繹,突出渲染江花、江水紅綠相映的明艷色彩,給人以光彩奪目的強烈印象。其中,既有同色間的相互烘托,又有異色間的相互映襯,充分顯示了作者善于著色的技巧。篇末,以“能不憶江南”收束全詞,既托出身在洛陽的作者對江南春色的無限贊嘆與懷念,又造成一種悠遠而又深長的韻味,把讀者帶入余情搖漾的境界中。</p> </body> </html>顯示效果:
 
 注意:
 語法中,style標簽一般位于head標簽中title標簽之后,也可以把他放在HTML文檔的任何地方。
 type=“text/CSS” 在html5中可以省略, 寫上也比較符合規范, 所以這個地方可以寫也可以省略。
行內式(內聯樣式)
內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式,其基本語法格式如下:
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>例如,我修改了上面代碼實例中最后一個p標簽,修改內容:
 <p style="color: #152161;background-color: #FF0000">
顯示效果:
 
語法中style是標簽的屬性,實際上任何HTML標簽都擁有style屬性,用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同,行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
外部樣式表(外鏈式)
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中,通過link標簽將外部樣式表文件鏈接到HTML文檔中,其基本語法格式如下:
<head><link href="CSS文件的路徑" rel="stylesheet" /> </head>代碼實例:
 css部分(這個我創建在一個css文件夾中)
html部分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文言文</title><link rel="stylesheet" href="css/style.css" /> </head> <body> <h3 align="center">捕蛇者說</h3> <div align="center">作者:柳宗元</div> <p>永州之野產異蛇:黑質而白章,觸草木盡死;以嚙人,無御之者。然得而臘之以為餌,可以已大風、攣踠、瘺癘,去死肌,殺三蟲。其始太醫以王命聚之,歲賦其二。募有能捕之者,當其租入。永之人爭奔走焉。有蔣氏者,專其利三世矣。問之,則曰:“吾祖死于是,吾父死于是,今吾嗣為之十二年,幾死者數矣。”言之貌若甚戚者。余悲之,且曰:“若毒之乎?余將告于蒞事者,更若役,復若賦,則如何?”蔣氏大戚,汪然出涕,曰:“君將哀而生之乎?則吾斯役之不幸,未若復吾賦不幸之甚也。向吾不為斯役,則久已病矣。自吾氏三世居是鄉,積于今六十歲矣。而鄉鄰之生日蹙,殫其地之出,竭其廬之入。號呼而轉徙,餓渴而頓踣。觸風雨,犯寒暑,呼噓毒癘,往往而死者,相藉也。曩與吾祖居者,今其室十無一焉。與吾父居者,今其室十無二三焉。與吾居十二年者,今其室十無四五焉。非死即徙爾,而吾以捕蛇獨存。悍吏之來吾鄉,叫囂乎東西,隳突乎南北;嘩然而駭者,雖雞狗不得寧焉。吾恂恂而起,視其缶,而吾蛇尚存,則弛然而臥。謹食之,時而獻焉。退而甘食其土之有,以盡吾齒。蓋一歲之犯死者二焉,其余則熙熙而樂,豈若吾鄉鄰之旦旦有是哉。今雖死乎此,比吾鄉鄰之死則已后矣,又安敢毒耶?”余聞而愈悲,孔子曰:“苛政猛于虎也!”吾嘗疑乎是,今以蔣氏觀之,猶信。嗚呼!孰知賦斂之毒,有甚于是蛇者乎!故為之說,以俟夫觀人風者得焉。</p></body> </html>顯示效果:
 
 注意: link 是個單標簽哦!!!
 該語法中,link標簽需要放在head頭部標簽中,并且必須指定link標簽的三個屬性,具體如下:
href:定義所鏈接外部樣式表文件的URL,可以是相對路徑,也可以是絕對路徑。
 type:定義所鏈接文檔的類型,在這里需要指定為“text/CSS”,表示鏈接的外部文件為CSS樣式表。
 rel:定義當前文檔與被鏈接文檔之間的關系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個樣式表文件。
三種樣式表總結(位置)
| 行內樣式表 | 書寫方便,權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽(少) | 
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面(中) | 
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多,強烈推薦 | 控制整個站點(多) | 
CSS樣式規則
使用HTML時,需要遵從一定的規范。CSS亦如此,要想熟練地使用CSS對網頁進行修飾,首先需要了解CSS樣式規則,具體格式如下:
 
在上面的樣式規則中:
1.選擇器用于指定CSS樣式作用的HTML對象,花括號內是對該對象設置的具體樣式。
 2.屬性和屬性值以“鍵值對”的形式出現。
 3.屬性是對指定的對象設置的樣式屬性,例如字體大小、文本顏色等。
 4.屬性和屬性值之間用英文“:”連接。
 5.多個“鍵值對”之間用英文“;”進行區分。
 可以用段落 和 表格的對齊的演示。
CSS基礎選擇器
要想將CSS樣式應用于特定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。
標簽選擇器(元素選擇器)
標簽選擇器是指用HTML標簽名稱作為選擇器,按標簽名稱分類,為頁面中某一類標簽指定統一的CSS樣式。其基本語法格式如下:
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
 或者
 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽選擇器最大的優點是能快速為頁面中同類型的標簽統一樣式,同時這也是他的缺點,不能設計差異化樣式。標簽選擇器 可以把某一類標簽全部選擇出來 div span
前面寫的代碼實例其實都是標簽選擇器 ,都是為頁面中某一標簽指定統一的CSS樣式。
類選擇器
類選擇器使用“.”(英文點號)進行標識,后面緊跟類名,其基本語法格式如下:
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
 標簽調用的時候用 class=“類名” 即可。
 類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標簽
代碼實例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Goole</title><style>span{font-size: 150pt;}.g {color: skyblue;}.o {color: red;}.oo {color: orange;}.l {color: green;}</style> </head> <body> <span class="g">G</span> <span class="o">o</span> <span class="oo">o</span> <span class="g">g</span> <span class="l">l</span> <span class="o">e</span></body> </html>結果顯示:
 
多類名選擇器
我們可以給標簽指定多個類名,從而達到更多的選擇目的。
 例如:
 
代碼實例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.font20 {font-size: 20px;color: blue;}.red {color: red;}.fontw {font-weight: 700;}</style> </head> <body><div class="font20 red fontw">多類名選擇器</div><div>多類名選擇器</div><div>多類名選擇器</div><div>多類名選擇器</div><p class="red">多類名選擇器</p><p>多類名選擇器</p><p>多類名選擇器</p><p class="fontw">多類名選擇器</p><div>多類名選擇器</div> </body> </html>顯示效果:
 注意:
id選擇器
id選擇器使用“#”進行標識,后面緊跟id名,其基本語法格式如下:
 #id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
 該語法中,id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應于文檔中某一個具體的元素。
實例代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#last {color: pink;/* id只能有一個*/}.set_color{color: red;}</style> </head> <body><div>id選擇器</div><div >id選擇器</div><div class="set_color">id選擇器</div><div id="last">id選擇器</div> <!-- id只能有一個--></body> </html>顯示效果:
 
 id選擇器和類選擇器區別
區別:
W3C標準規定,在同一個頁面內,不允許有相同名字的id對象出現,但是允許相同名字的class。
 也就是說具有相同名稱的class可以出現多次,而id只能出現一次。就好比人的名字和身份證的區別。
 id選擇器和類選擇器最大的不同在于使用次數上
通配符選擇器
通配符選擇器用“*”號表示,他是所有選擇器中作用范圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
代碼案例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style> * { /** 代表所有標簽的意思 使用較少 */color: lightskyblue;}</style> </head> <body><div>通配符選擇器</div><p>通配符選擇器</p><span>通配符選擇器</span><table>通配符選擇器</table> </body> </html>結果顯示:
 
CSS字體樣式屬性
font-size:字號大小 :font-size屬性用于設置字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用像素單位px,絕對長度單位使用較少。具體如下:
 
font-family:字體 :
 font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文本的字體設置為微軟雅黑,可以使用如下CSS樣式代碼:
 p{ font-family:"微軟雅黑";}
 可以同時指定多個字體,中間以逗號隔開,表示如果瀏覽器不支持第一個字體,則會嘗試下一個,直到找到合適的字體。
注意:
CSS Unicode字體:
 在 CSS 中設置字體名稱,直接寫中文是可以的。但是在文件編碼(GB2312、UTF-8 等)不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。
方案一: 你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。
方案二: 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱,瀏覽器是可以正確的解析的。
 例如:
 font-family: "\5FAE\8F6F\96C5\9ED1",表示設置字體為“微軟雅黑”。
這里關于字體和Unicode編碼轉化的表格
| 宋體 | SimSun | \5B8B\4F53 | 
| 新宋體 | NSimSun | \65B0\5B8B\4F53 | 
| 黑體 | SimHei | \9ED1\4F53 | 
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 | 
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 | 
| 隸書 | LiSu | \96B6\4E66 | 
| 幼園 | YouYuan | \5E7C\5706 | 
| 華文細黑 | STXihei | \534E\6587\7EC6\9ED1 | 
| 細明體 | MingLiU | \7EC6\660E\4F53 | 
| 新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 | 
font-weight:字體粗細
 字體加粗除了用 b 和 strong 標簽之外,可以使用CSS 來實現。
font-weight屬性用于定義字體的粗細,其可用屬>性值:normal、bold、bolder、lighter、>100~900(100的整數倍)(其中400等價于normal,而700等價于bold)。
font-style:字體風格
 字體傾斜除了用 i 和 em 標簽之外,可以使用CSS 來實現.
 font-style屬性用于定義字體風格,如設置斜體、傾斜或正常字體,其可用屬性值如下:
-  normal:默認值,瀏覽器會顯示標準的字體樣式。 
-  italic:瀏覽器會顯示斜體的字體樣式。 
-  oblique:瀏覽器會顯示傾斜的字體樣式。 
font:綜合設置字體樣式
 font屬性用于對字體樣式進行綜合設置,其基本語法格式如下:
 選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時,必須按上面語法格式中的順序書寫,不能更換順序,各個屬性以空格隔開。
 注意:其中不需要設置的屬性可以省略(取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。
CSS外觀屬性
color:文本顏色
 color屬性用于定義文本的顏色,其取值方式有如下3種:
預定義的顏色值,如red,green,blue等。
十六進制,如#FF0000,#FF6600,#29D794等。實際工作中,十六進制是最常用的定義顏色的方式。
RGB代碼,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是,如果使用RGB代碼的百分比顏色值,取值為0時也不能省略百分號,必須寫為0%。
 line-height:行間距
 ine-height屬性用于設置行間距,就是行與行之間的距離,即字符的垂直間距,一般稱為行高。line-height常用的屬性值單位有三種,分別為像素px,相對值em和百分比%,實際工作中使用最多的是像素px.
text-align:水平對齊方式
 text-align屬性用于設置文本內容的水平對齊,相當于html中的align對齊屬性。其可用屬性值如下:
-  left:左對齊(默認值) 
-  right:右對齊 
-  center:居中對齊 
text-indent:首行縮進
 text-indent屬性用于設置首行文本的縮進,其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%,允許使用負值, 建議使用em作為設置單位。
1em 就是一個字的寬度 如果是漢字的段落, 1em 就是一個漢字的寬度
text-decoration 文本的裝飾
 text-decoration 通常我們用于給鏈接修改裝飾效果
| none | 默認。定義標準的文本。 | 
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的 | 
| overline | 定義文本上的一條線。 | 
| line-through | 定義穿過文本下的一條線。 | 
CSS復合選擇器
復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽。
交集選擇器
交集選擇器由兩個選擇器構成,其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如h3.special。(就是兩者都要滿足的意識)
 
并集選擇器:
并集選擇器(CSS選擇器分組)是各個選擇器通過逗號連接而成的,任何形式的選擇器(包括標簽選擇器、class類選擇器id選擇器等),都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用并集選擇器為它們定義相同的CSS樣式。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>復合選擇器</title><style>div.red{color: red; /*交集選擇器*/}p,span{color:pink; /*并集選擇器*/}</style></head> <body><div class="red">復合選擇器</div><div>復合選擇器</div><div>復合選擇器</div><p>復合選擇器</p><p>復合選擇器</p><p>復合選擇器</p><span>復合選擇器</span><span>復合選擇器</span></body> </html>實例結果:
 
后代選擇器
后代選擇器又稱為包含選擇器,用來選擇元素或元素組的后代,其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔。當標簽發生嵌套時,內層標簽就成為外層標簽的后代。
代碼實例:
 這里有個需求,只要把div下的p標簽下的天天向上變為紅色
效果實現:
 
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個 > 進行連接,注意,符號左右兩側各保留一個空格。(就指親兒子)
比如: .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
一個小案例:
需求
顯示效果:
 
偽類選擇器
鏈接偽類選擇器
- :link /* 未訪問的鏈接 */
- :visited /* 已訪問的鏈接 */
- :hover /* 鼠標移動到鏈接上 */
- :active /* 選定的鏈接 */
代碼實例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>a:link { /* 未訪問過的連接狀態*/color: #3c3c3c;font-size: 25px;text-decoration: none; /*取消下劃線*/font-weight: 700;}a:visited { /*這個鏈接我們已經點過的樣子 已訪問過鏈接*/color: orange;}a:hover { /*鼠標經過連接時候的樣子*/color: #f10215;}a:active { /*鼠標按下時候的樣子*/color: green;}</style> </head> <body><a href="http://www.百度.com">秒殺</a> </body> </html>顯示效果:
 點擊前是顏色是:#3c3c3c(差不多黑色)經過是紅色,點擊是綠色,點擊后是橘色,
 而且一般按這4個狀態的順序寫
 
 但是,在項目中,我們一般這樣寫:
感謝,你能看到這里,文章中難免會有錯誤,請指出或提出建議
 下文鏈接:跟新中 ? \cdots ?
總結
以上是生活随笔為你收集整理的从零基础到web前端工程师(三)的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: 三极管集电极和基集短接等效成二极管
- 下一篇: kotlin实现的简单个人账户管理APP
