十年網(wǎng)站開發(fā)經(jīng)驗 + 多家企業(yè)客戶 + 靠譜的建站團隊
量身定制 + 運營維護+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
css
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供巴彥淖爾網(wǎng)站建設、巴彥淖爾做網(wǎng)站、巴彥淖爾網(wǎng)站設計、巴彥淖爾網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、巴彥淖爾企業(yè)網(wǎng)站模板建站服務,10年巴彥淖爾做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡服務。
是一門語言 , 在任何軟件里都是用類和id來實現(xiàn)布局的
,你問的是軟件里自動生成的css嗎?
在dw
cs3 里面
設置css樣式表是中文
,在cs5 是英文的
CSS按其位置可以分成三種:
內(nèi)嵌樣式(Inline Style)
內(nèi)部樣式表(Internal Style Sheet)
外部樣式表(External Style Sheet)
內(nèi)嵌樣式(Inline Style)
Inline Style是寫在Tag里面的。內(nèi)嵌樣式只對所在的Tag有效。
P style="font-size:20pt; color:red"這個Style定義p/p里面的文字是20pt字體,字體顏色是紅色。/p
內(nèi)部樣式表(Internal Style Sheet)
內(nèi)部樣式表是寫在HTML的head/head里面的。內(nèi)部樣式表只對所在的網(wǎng)頁有效。
HTML
HEAD
STYLE type="text/css"
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
/STYLE
/HEAD
BODY
H1 class="mylayout" 這個標題使用了Style。/H1
H1這個標題沒有使用Style。/H1
/BODY
/HTML
內(nèi)部樣式表(Internal Sytle Sheet)要用到Style這個Tag,寫法如下:
STYLE type="text/css"
......
/STYLE
外部樣式表(External Style Sheet)
如果很多網(wǎng)頁需要用到同樣的樣式(Styles),用什么方法呢?
將樣式(Styles)寫在一個以.css為后綴的CSS文件里,然后在每個需要用到這些樣式(Styles)的網(wǎng)頁里引用這個CSS文件。
比如可以用文本編輯器(NotePad)建立一個叫home的文件,文件后綴不要用.txt,改成.css。文件內(nèi)容如下:
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一個網(wǎng)頁,代碼如下:
HTML
HEAD
link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"
/HEAD
BODY
H1 class="mylayout" 這個標題使用了Style。/H1
H1這個標題沒有使用Style。/H1
/BODY
/HTML
使用外部(Extenal)樣式表,相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的,有以下優(yōu)點:
樣式代碼可以復用。一個外部CSS文件,可以被很多網(wǎng)頁共用。
便于修改。如果要修改樣式,只需要修改CSS文件,而不需要修改每個網(wǎng)頁。
提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里,會降低網(wǎng)頁顯示的速度,如果網(wǎng)頁引用一個CSS文件,這個CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它),網(wǎng)頁顯示的速度就比較快。
css樣式分三種,內(nèi)部樣式,內(nèi)聯(lián)樣式和外部樣式。外部樣式,顧名思義,也就是通過link /引入的css樣式文件,而內(nèi)部樣式呢,主要是放在style/style中的樣式,而內(nèi)聯(lián)樣式,就是直接嵌入標簽的,充當標簽的一個屬性,使用style='這里寫樣式' 來實現(xiàn)。
他們的優(yōu)先級是內(nèi)聯(lián)樣式的優(yōu)先級最高,其次判斷內(nèi)部和外部樣式的優(yōu)先級得看它們在html中出現(xiàn)的位置,一般來說,越靠后的優(yōu)先級也就越高。
css是英文Cascading Style Sheets的縮寫。
它是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
它包含3種類型,內(nèi)部樣式,行內(nèi)樣式和外部樣式表三種
作用的效果是按順序從下到上,相同樣式下面的會覆蓋原有樣式,除特殊情況外,一般都是行內(nèi)樣式內(nèi)部樣式外部樣式。
以div為例
行內(nèi)樣式寫法:
在style里面寫樣式
div style="height:30px; background:#f00;"/div
內(nèi)部樣式:
在head標簽內(nèi)加入style標簽,在標簽內(nèi)寫樣式:
style
div{height:30px; background:#f00;}
/style
外部樣式是建立一個新文件后綴名為.css
舉個例子:
建立style.css文件放在項目根目錄下:
在里面寫入
div{height:30px; background:#f00;}
然后保存,在html的head標簽內(nèi)調(diào)用樣式
link rel="stylesheet" type="text/css" href="style.css" /
1.外部樣式表就是新建一個文檔,里面全寫css,然后再通過 link 插入到html 代碼中
2.內(nèi)部樣式表就是直接在HTML文檔中寫css代碼,寫在head/head中
用style/style包圍
3.內(nèi)聯(lián)樣式就是 直接在標簽里寫樣式,形如 div style = "color:#000"/div
1、首先我們我們新建一個記事本,并將記事本的名字改為“引入外部css文件和外部js文件.html”,并回車鍵確定,以使文件轉(zhuǎn)化為瀏覽器可以打開的html網(wǎng)頁文件。
2、我們編寫一個html5的聲明標簽— !DOCTYPE html, 以使瀏覽器能認識到我們的文檔是一個html5的文件,這樣就可以快速的正確解讀,以提高瀏覽的體驗。
3、我們寫一個title的標簽,將網(wǎng)頁的題目寫入進去,讓網(wǎng)頁的標題顯示為“引入外部css文件和外部js文件”。
4、我們用meta標簽設置字符的編碼格式為:UTF-8,以使瀏覽器能夠正確的顯示我們的網(wǎng)頁。
5、我們寫一個body標簽,用來包含網(wǎng)頁的主體部分。
6、我們寫幾個標簽以便在外部css文件樣式表中,為其設置樣式。
7、我們新建一個css文件,把txt的文件后綴名改為css即可,之后打開就可以寫入css代碼了。
8、我們用標簽選擇器為p標簽、div標簽和span標簽的內(nèi)容設置樣式。
9、我們使用,link標簽將我們編寫的css文件樣式表文件其引入到我們當前的html文件中來。
10、我們鼠標右擊在彈出的下拉菜單中,我們選擇“在瀏覽器中打開”這一項。
11、我們看到我們編寫的樣式被應用到了標簽中文字上,說明我們的css外部樣式表文件引入成功。
外部樣式表是相對于內(nèi)部樣式表而言的,它實際上是一個后綴名為.css的文件,獨立于HTML頁面,放置于網(wǎng)站文件夾內(nèi)某個位置,我們也把這樣的外部樣式表稱為樣式表文件。樣式表文件的內(nèi)容和內(nèi)部樣式表類似,都是樣式的定義。在本書中,為以示區(qū)別,在提到樣式表文件的時候有時候也用css文件來代替,而具體的層疊樣式表則用CSS這3個大寫的縮寫代稱。
外部樣式表通過在某個HTML頁面中添加鏈接的方式生效。同一個外部樣式表可以被多個網(wǎng)頁甚至是整個網(wǎng)站的所有網(wǎng)頁所采用,這就是它最大的優(yōu)點。如果說前面介紹的內(nèi)部樣式表在總體上定義了一個網(wǎng)頁的顯示方式,那么外部樣式表可以說在總體上定義了一個網(wǎng)站的顯示方式。
代碼2.4說明了在HTML中是如何通過鏈接一個外部樣式表來設置頁面顯示的。
代碼2.4 HTML中連接外部樣式表:html-outer.html
htmlheadtitle一個簡單網(wǎng)頁/titlelink href=style.css rel="stylesheet" type="text/css"/headbody你好!HTML!(外部樣式表)/body/html
鏈接外部樣式表是通過link標簽來實現(xiàn)的,語法如下。
link href="外部樣式表css文件的路徑與名稱" rel="stylesheet" type="text/css"
在代碼2.4中,外部樣式表為style.css,該文件存在于html-outer.html同目錄下,具體內(nèi)容如代碼2.5所示。
代碼2.5 外部樣式表:style.css
...Body {font-size:28px;}...
將代碼2.5和前面的代碼2.3相比對,發(fā)現(xiàn)其內(nèi)容實際上就是內(nèi)部樣式表中除去style/style等標簽后的實際內(nèi)容。
在瀏覽器中打開代碼2.4的頁面,效果如圖2.14所示。
圖2.14 利用外部樣式
表style.css的網(wǎng)頁
從圖2.10、圖2.11、圖2.14我們可以發(fā)現(xiàn)行內(nèi)樣式表、內(nèi)部樣式表、外部樣式表都可以令示例文字“你好!HTML!”在瀏覽器中顯示出同樣的外觀,這是因為具體控制CSS的代碼都是Body{font-size:28px;},而區(qū)別就在于這行代碼存在的位置不同,下面我們再來總結一下3種樣式表的特點,見表2-1。
表2-1 3種樣式表的對比
表2-1中關于缺點有必要特別指出,由于行內(nèi)樣式表只針對當前所在的標簽,內(nèi)部樣式表只針對當前所在的HTML文件。如果一個HTML文件中這樣的標簽很多,或者一個網(wǎng)站中包含內(nèi)部樣式表的HTML文件很多,都會增加文件的大小,從而使服務器接受用戶請求并反饋網(wǎng)頁回來的時候,傳輸速度受到影響。雖然這種影響大部分時候都是比較微小的,但如果文件大到一定程度,還是需要我們特別注意的。
更重要的一個問題就是維護。我們的網(wǎng)頁投入使用后可能要經(jīng)常修改,如果需要修改樣式,3種樣式表需要改動的成本有多大呢?我們來算一筆賬。
假設頁面A中有10個包含行內(nèi)樣式表的標簽。網(wǎng)頁B把這10個標簽的樣式定義歸結到一起,放置在頁面頭部,形成了內(nèi)部樣式表。網(wǎng)頁C則鏈接了一個外部樣式表,它的內(nèi)容也是這10個標簽的樣式定義。當我們需要修改這10個標簽的樣式定義時,操作如下。
(1)網(wǎng)頁A的情況。
對于網(wǎng)頁A,我們要打開編輯界面,一行一行地找到全部的10個標簽,逐一進行修改。如果標簽出現(xiàn)寫法上的錯誤,需要反復修改時,我們很難確定錯誤出現(xiàn)的位置,修改過程比較麻煩。如果網(wǎng)站中類似網(wǎng)頁A的HTML頁面很多,我們要逐一打開這些文件,逐一找到這些標簽,逐一進行修改。
(2)網(wǎng)頁B的情況。
我們只要打開編輯界面,關注頁面頭部的樣式定義,進行集中修改就可以了。如果出現(xiàn)寫法錯誤,依然只關注頁面頭部的樣式定義即可。
如果網(wǎng)站中與網(wǎng)頁B類似的HTML頁面很多,我們?nèi)匀恍枰鹨淮蜷_這些網(wǎng)頁,修改它們頭部的內(nèi)部樣式表。
(3)網(wǎng)頁C的情況。
我們只要打開外部樣式表文件,由于文件內(nèi)容全部是樣式定義的,修改的時候不會被其他信息所干擾。
如果網(wǎng)站中與網(wǎng)頁C類似的HTML頁面很多,我們也只是修改共同的一個或幾個外部樣式表文件即可。因為在這些HTML頁面中,鏈接到外部樣式表文件的代碼:link href="外部樣式表css文件的路徑與名稱" rel="stylesheet" type="text/css"是一樣的,不用修改。
顯而易見,3種樣式表在同樣狀況下進行修改時可提供的效率高低依次是外部樣式表內(nèi)部樣式表行內(nèi)樣式表。
在實際應用中,往往是3種樣式表同時運用,網(wǎng)站的總體風格依靠外部樣式表來定義,每個網(wǎng)站的網(wǎng)頁都鏈接一個或幾個固定的css文件;當某個頁面需要特別的樣式時,則在該頁面上采用內(nèi)部樣式表;當頁面的某個標簽需要特別的樣式時,在該標簽上應用行內(nèi)樣式表。通過這樣的方法,做到了共性與個性的統(tǒng)一,在變化與固定之間建立了比較好的平衡。