!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 Id /title style type= text/css !-- #STYLE_1 { font-size: 20px; } -- /style /head body div id= STYLE_1 用Id來給對象應用樣式 /div /body /html
2:使用.定義樣式,并使用class為對象應用樣式。
例:
!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 Id /title style type= text/css !-- .STYLE_1 { font-size: 20px; } -- /style /head body div >3:不定義樣式,直接使用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 Id /title /head body div >使用這三種方法所產生的效果是相同的,但我們需要注意的是,這三種方法間的優先級問題。
如果我們對一個對象同時使用上述三種方法定義樣式,會怎么樣呢?
比如我們先定義一個#STYLE { font-size:12px; }再定義一個.STYLE { font-size:14px; }最后在對象上使用 >!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 Id /title style type= text/css !-- #STYLE { font-size: 12px; } .STYLE { font-size: 14px; } -- /style /head body div id= STYLE >這種情況下,瀏覽器會根據三種方式的優先級,即style id class來為對象應用樣式。上述例子中,div中的文字會顯示為16px大小。
以上就是css中的id,class,style三種應用樣式用法詳解的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
|
新聞熱點
疑難解答