中一樣,這兒真沒有把它們重復(fù)一次的必要。
!Important
所有被!important 標記的樣式,即使它后來被重寫,瀏覽器也只會采用被標記的那條。
#content{
height:960px !important;
height:900px;
}
!important: IE7/IE8/IE9/FireFox 可以識別上面附加!important 的語句,看到附加!important 的語句后,就不會再去執(zhí)行 第二句,盡管他們也“認識”第二句,但是附加“!important”的語句擁有絕對優(yōu)先級,只要有它存在,第二句就不允許執(zhí)行。
IE6會執(zhí)行!important 的語句后,再去執(zhí)行第二句“height:900px” ,用后面的樣式覆蓋了前面的樣式,所以在IE6下,最終的height值是900px。
@import and
在決定使用使用哪種方法去包含你的樣式表之前,你應(yīng)該明白這兩種方法被用來干嘛?
鏈接式:
link就是把外部CSS與網(wǎng)頁連接起來,將其加在 頭部標簽中,具體形式如下:
導(dǎo)入樣式:
通過兩個或以上的css 文件共同部分,在css 頁面引入css 文件,通過@import url(” “)
@import url("global.css");
@import url(global.css);
@import "global.css";
以上三種方式都有效,
區(qū)別:
1)link屬于XHTML標簽,而@import是CSS提供的;
2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
3)@import只在IE5以上才能識別,而link是XHTML標簽,無兼容問題;
4)link方式的樣式的權(quán)重 高于@import的權(quán)重.
行內(nèi)元素、塊元素和空元素
行內(nèi)元素特點
1、和其他元素都在一行上;
2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置;
3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。
行內(nèi)元素在設(shè)置 水平方向的padding-left、padding-right、margin-left、margin-right 都產(chǎn)生邊距效果,但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom 卻不會產(chǎn)生邊距效果。
塊級元素特點
1、每個塊級元素都從新的一行開始,并且其后的元素也另起一行。(真霸道,一個塊級元素獨占一行)
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設(shè)定一個寬度。
在html中,、、、 、 、 和 就是典型的行內(nèi)元素(inline)元素。
塊級元素是可以設(shè)置寬高的,但是它的實際寬高是本身寬高+padding。block元素要多帶帶占一行。內(nèi)聯(lián)元素不多帶帶占一行,給他設(shè)置寬高是沒有用的。
塊級元素和行內(nèi)元素列表:
空元素
知名的空元素: 鮮為人知的是:
長度單位
em
em 為相對長度單位,相對于當前對象內(nèi)文本的字體尺寸(font-size )。比如:Web頁面中body 的文字大小在用戶瀏覽器下默認渲染是16px ,所以,此時的1em = 16px ;
in
英寸(Inches)。絕對長度單位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
pt
點(Points)。絕對長度單位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
small
標簽呈現(xiàn)小號字體效果。
, 和 , 標簽
`` 標簽和 `` 標簽一樣,用于強調(diào)文本,但它強調(diào)的程度更強一些。
`em` 是 斜體強調(diào)標簽,更強烈強調(diào),表示內(nèi)容的強調(diào)點。相當于html元素中的 `... `;
`< b > < i >` 是視覺要素,分別表示無意義的加粗,無意義的斜體。
em 和 strong 是表達要素(phrase elements)。
b標簽和i標簽的區(qū)別
b 元素現(xiàn)在描述為在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文本。
例如:文檔概要中的關(guān)鍵字,評論中的產(chǎn)品名。或者代表強調(diào)的排版方式。
i 元素現(xiàn)在描述為在普通文章中突出不同意見或語氣或其他的一段文本,
例如:一個分類名稱,一個技術(shù)術(shù)語,一個外語中的諺語,一個想法等?;蛘叽硇斌w的排版方式。
角度單位
deg
度(Degress)。一個圓共360度
90deg = 100grad = 0.25turn
grag
梯度(Gradians)。一個圓共400梯度
90deg = 100grad = 0.25turn
turn
轉(zhuǎn)、圈(Turns)。一個圓共1圈
90deg = 100grad = 0.25turn
rad
弧度(Radians)。一個圓共2π弧度
90deg = 100grad = 0.25turn
CSS 多類選擇器
一個 class 值中可能包含一個詞列表,各個詞之間用空格分隔。例如,如果希望將一個特定的元素同時標記為重要(important)和警告(warning),就可以寫作:
This paragraph is a very important warning.
對于ID來說,就不能這樣寫了
所有瀏覽器下的CSS透明度
元素透明度時常是個惱人的問題,下面這種方式可以實現(xiàn)所有瀏覽器下的透明度設(shè)置:
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Zoom 屬性是IE瀏覽器的專有屬性,F(xiàn)irefox等瀏覽器不支持。它可以設(shè)置或檢索對象的縮放比例。除此之外,它還有其他一些小作用,比如觸發(fā)IE的hasLayout 屬性,清除浮動、清除margin 的重疊等。
當一個元素的 hasLayout 屬性值為true時,我們說這個元素有一個布局(layout)
css float屬性
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。
注釋: 假如在一行之上只有極少的空間可供浮動元素,那么這個元素會跳至下一行,這個過程會持續(xù)到某一行擁有足夠的空間為止。
偉大的塌陷
使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素,那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景,這個問題會很難被注意到
塌陷的直觀對立面更不好,看看下面的情況:
清除浮動
如果你很明確的知道接下來的元素會是什么,可以使用 clear:both ; 來清除浮動。這個方法很不錯,它不需要 hack ,不添加額外的元素也使得它有良好的語義性。
使用css 偽選擇符(:after)來清除浮動:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
漸進增強與優(yōu)雅降級
概念
優(yōu)雅降級和漸進增強印象中是隨著css3 流出來的一個概念。由于低級瀏覽器不支持css3 ,但css3 的效果又太優(yōu)秀不忍放棄,所以在高級瀏覽中使用 css3 而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多,都是在關(guān)注不同瀏覽器下的不同體驗,關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容,以及這種不同造成的 工作流程的差異。
漸進增強 progressive enhancement :針對低版本瀏覽器進行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation :一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容。
區(qū)別
優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗的供給,而漸進增強則是從一個非常基礎(chǔ)的,能夠起作用的版本開始,并不斷擴充,以適應(yīng)未來環(huán)境的需要。降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶。
visibility:hidden和display:none
display:none 隱藏對應(yīng)的元素,在文檔布局中不再給它分配空間,它各邊的元素會合攏,
就當他從來不存在。
visibility:hidden 隱藏對應(yīng)的元素,但是在文檔布局中仍保留原來的空間。
使用CSS display:none 屬性后,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden 屬性后,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據(jù)的空間位置仍然存在。
text 文本屬性
text-indent
text-indent 屬性規(guī)定文本塊中首行文本的縮進。
注釋:允許使用負值。如果使用負值,那么首行會被縮進到左邊。使用一個較大的負值進行縮進的話,文字將被隱藏,如-9999em
letter-spacing與word-spacing
letter-spacing 屬性與 word-spacing 的區(qū)別在于,前者是修改字母的間隔,后者是修改單詞或單個文字的間隔
text-transform
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值:
none
uppercase:所有的單詞都大寫
lowercase:所有的單詞都小寫
capitalize:只對每個單詞的首字母大寫
text-decoration
text-decoration 有 5 個值:
none
underline:下劃線
overline:上劃線
line-through:在文本中間畫一個貫穿線
blink:讓文本閃爍
white-space
pre-line 合并空白符序列,但保留換行符
normal
nowrap 防止元素中的文本換行
pre 空白符不會被忽略
pre-wrap 保留空白符序列
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/110954.html
摘要:也就是說,較寬的外邊距決定兩個元素最終離多遠。盒模型結(jié)論二沒有設(shè)定屬性的元素始終會擴展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實現(xiàn)方案固定寬度流動彈性。
為文檔添加樣式的三種方法
行內(nèi)樣式
行內(nèi)樣式是寫在HTML標簽的style屬性里的,比如:
Hello Everyone!
行內(nèi)樣式會覆蓋嵌入樣式和鏈接樣式。
嵌入樣式
嵌入的css樣式是放在HTML文檔...
摘要:目前在前端開發(fā)所占的比重越來越高,在我們學習和開發(fā)的過程中都會去使用。下面把程序員雷雪松對的知識點總結(jié)和歸納分享給大家。過濾對同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個元素。返回指定元素相對于其他指定元素的位置。
jQuery目前在Web前端開發(fā)所占的比重越來越高,在我們jQuery學習和開發(fā)的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原...
摘要:子選擇器只對直接后代有影響的選擇器,而對孫子后代以及多層后代不產(chǎn)生作用。爛透了盡可能使用復(fù)合語法糟糕好的避免不必要的重復(fù)糟糕好的組織好的代碼格式代碼的易讀性和易維護性成正比。
標簽與元素
標簽和p元素有什么區(qū)別呢?大多數(shù)時候他們表示的是同一樣東西,但仍有細微的區(qū)別。、等指的是HTML分隔符,而元素則是由一對開始結(jié)束標簽構(gòu)成的,用來包含某一些內(nèi)容
子選擇器和后代選擇器的區(qū)別:
后代選擇器...
摘要:繼承性子標簽會繼承父標簽樣式優(yōu)先級行內(nèi)樣式選擇器類選擇器標簽選擇器通配符繼承機制創(chuàng)建了的元素中,在垂直方向上的會發(fā)生重疊。
技能考察:
一、關(guān)于Html
1、html語義化標簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡潔的html結(jié)構(gòu); SEO優(yōu)化
a、理解:根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時
讓瀏覽器的爬蟲和...
摘要:繼承性子標簽會繼承父標簽樣式優(yōu)先級行內(nèi)樣式選擇器類選擇器標簽選擇器通配符繼承機制創(chuàng)建了的元素中,在垂直方向上的會發(fā)生重疊。
技能考察:
一、關(guān)于Html
1、html語義化標簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡潔的html結(jié)構(gòu); SEO優(yōu)化
a、理解:根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化),選擇合適的標簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時
讓瀏覽器的爬蟲和...
男| 高級講師
閱讀 2346· 2021-11-24 10:33
閱讀 1418· 2019-08-30 15:43
閱讀 3306· 2019-08-29 17:24
閱讀 3517· 2019-08-29 14:21
閱讀 2250· 2019-08-29 13:59
閱讀 1764· 2019-08-29 11:12
閱讀 2841· 2019-08-28 18:00
閱讀 1882· 2019-08-26 12:17
<