1、 css引入方式和選擇器,CSS代碼怎么用?
css代碼可以內嵌也可以外鏈。內嵌就是將css直接寫在html標記中,大約在2008年以后基本都逐漸規范為外鏈方式。內嵌css有個很大的缺點,就是html標記與css代碼混合在一起,頁面代碼看起來比較混亂、吃力,結構不太清晰,后期如果有修改就會很費勁;規范為外鏈后,代碼美觀易懂、脈絡清晰,方便二次修改。外鏈css,就是將css從html標記中分離出來,集中到一個或多個css頁面,再根據需要,調用相關css文件進行指定樣式表。
CSS樣式表
內嵌css的方式:在html標記中添加屬性“style”,設置相關屬性值。如:“<p style=“font-size:12px”>帶你走進科技大世界。</p>”就是給“帶你走進科技大世界。”這段文字設置的字體大小為12px。
內嵌CSS樣式
外鏈css方式:建一個css文件,樣式集中寫在該文件中,在所需頁面調用就行了。方法是在“<head>”標記中添加“<link rel="stylesheet" type="text/css" href="xxx/cssName.css" >”,其中“xxx”為路徑,“cssName.css”為文件名。外鏈設置好后,在標記中通過“class”或“id”進行調用,如“<p class=“toptxt”>”或"<p id="toptxt">",這時候樣式表中被命名為“toptxt”的樣式就應用到這個“<p>”標記中了。樣式表中“class”和“id”的寫法不一樣,“class”前面加“.”,“id”前加“#”。
調用CSS文件
下面來說說使用“class”和“id”的區別,二者之間最大的區別是“class”名稱在同一個頁面中可以重復使用,而“id”名稱是獨一無二的。“class”本身就是用來調用樣式的,一個頁面中有同一個樣式效果很正常,用“class”方便省事也更合理。“id”相當于人名,不允許重復出現。因為“id”不僅可用于樣式,在寫JavaScript時通常也要用“id”指定塊。
2、 CSS有哪幾種方式控制網頁頁面?
有4種方式,行內方式、內嵌方式、鏈接方式、導入方式
1、行內方式
行內方式是4種樣式中最直接最簡單的一種,直接對HTML標簽適用style="",例如:
<p style="color:#F00; background:#CCC; font-size:12px;"></p>
雖然這種方法比較直接,在制作頁面的時候需要為很多的標簽設置style屬性,所以會導致HTML頁面不夠純凈,文件體積過大,不利于搜索蜘蛛爬行,從而導致后期維護成本高。
2、內嵌方式
內嵌方式就是將CSS代碼寫在<head></head>之間,并且用<style></style>進行聲明,例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
<!--
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
-->
</style>
</head>
<body>
<div id="div1"><img src="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
運行代碼 復制代碼 另存代碼 <script language="JavaScript">ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode7 .value = ffcod;</script> 提示:您可以先修改部分代碼再運行
內嵌方式,大家應該也能意識到,即使有公共CSS代碼,也是每個頁面都要定義的,如果一個網站有很多頁面,每個文件都會變大,后期維護也大,如果文件很少,CSS代碼也不多,這種方式還是很不錯的。
3、鏈接方式
鏈接方式是使用頻率最高,最實用的方式,只需要在<head></head>之間加上
復制代碼
代碼如下:
<link href="style.css" type="text/css" rel="stylesheet" />
,就可以了,這種方式將HTML文件和CSS文件徹底分成兩個
或者多個文件,實現了頁面框架HTML代碼與美工CSS代碼的完全分離,使得前期制作和后期維護都十分方便,并且如果要保持頁面風格統一,只需要把這些公共的CSS文件單獨保存成一個文件,其他的頁
面就可以分別調用自身的CSS文件,如果需要改變網站風格,只需要修改公共CSS文件就OK了,相當的方便,這才是我們xHTML+CSS制作頁面提倡的方式。
HTML代碼
復制代碼
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="div1"><img src="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
CSS代碼
復制代碼
代碼如下:
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4、導入方式
導入樣式和鏈接樣式比較相似,采用import方式導入CSS樣式表,在HTML初始化時,會被導入到HTML文件中,成為文件的一部分,類似第二種內嵌方式。
具體導入樣式和鏈接樣式有什么區別,可以參看這篇文章《CSS:@import與link的具體區別》,不過我還是建議大家用鏈接方式!
四種樣式的優先級 :
如果這上面的四種方式中的兩種用于同一個頁面后,就會出現優先級的問題,這里我就不再舉例子來說明了,大家在下面自己證明一下下面的結論
四種樣式的優先級別是(從高至低):行內樣式、內嵌樣式、鏈接樣式、導入樣式。
拓展資料
css是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS為HTML標記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
3、 不同引入方式的優勢與劣勢有哪些?
常用的三種:1、頁面中引入樣式表文件,在單獨的樣式表css文件中編寫樣式代碼,引入方式如下:然后在style.css文件中編寫樣式。這種最常用,優點是方便管理,樣式統一,代碼精簡,用于全站統一樣式。2、在Html頭部(head)中用包起來,在這里面編寫樣式代碼,如下:這種一般用于單頁面或單獨的專題頁面,如果用于全站,增加頁面代碼,浪費流量,也不利于改版。3、在標簽里面直接編寫行內樣式,這種是最不常用的:
這類最少用,會使頁面結構混亂,代碼臃腫,后期維護成本增加。4、 css中選擇器是什么意思?
要使用css對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
每一條css樣式定義由兩部分組成,形式如下:[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{}中的“樣式”的作用對象,也就是“樣式”作用于網頁中的哪些元素。