體驗css02

【css中的背景屬性】

簡介:css中背景屬性用的是background它是一個復合屬性和border類似,也就是說它的內部有很多個值。對css來講背景圖是非常常用的就像我們做網站離不開圖片一樣,所以對于bg這個屬性必須要掌握的非常熟練。

《background基礎》

基本機構:

Background:顏色 圖片路徑 平鋪方式 水平位置 垂直位置 圖片模式;

舉例:background:#000 url(pic.jpg) no-repeat center top fixed;

其中最復雜的當屬圖片定位的兩個值;圖片定位可以用兩種方式來屬性第一是特殊值形式例如left,right,top,center,bottom第二是坐標形式可以通過先設置水平坐標后設置垂直坐標來控制圖片定位,注意它可以接受負值。整個網頁的左上角是坐標為0,0的原點。

圖片的平鋪方式 no-repeat表示不平鋪, repeat表示平鋪。

在所有值的最后添加一個fixed的話可以讓圖片跟隨屏幕滾動。

《知識點》

對于一個標簽如果沒有任何內容的前提下,這個標簽的默認狀態就和一條線一樣根本看不見。

【css復合選擇器】

簡介:css中一共有3種類型的復合選擇器分別是子代,并集,交集(指定式)

《子代選擇器》

選擇器中通過空格表示包含關系例如 ul li 表示選中ul中的所有li 也可以寫成 .class div表示某個類中的所有div標簽被選中。

《并集選擇器》

并集選擇器通過逗號來表示并列選擇關系。它可以將很多選擇器選中的內容合并到一起來書寫樣式。并集選擇器不區分前后。

《交集選擇器》

簡介:用的不多,但是見到以后需要知道是什么意思。

交集選擇器的作用是通過標簽名稱和標簽身上所具有的類名來直接選擇特定標簽。

例如 div.class 作用是 選中div并且身上帶有class類的那一個標簽。

交集選擇器中是沒有任何新的符號的就是連續書寫各種基礎選擇器。

【文字控制屬性】

Css中的所有屬性分為兩大類,文字控制屬性和區塊控制屬性。解釋一下區塊控制屬性指的就是對盒子進行的所有控制,例如實體化,邊距設置,定位,對齊等等。

《css中的bui設置》

Font-weight:bold 文本加粗;

Text-decoration:underline; 表示下劃線;

Overline ;上劃線;

Line-through;貫穿線; 實際上就是刪除線。none表示清除;

Font-style:italic ?表示文本傾斜。

【網頁布局】

對于任何復雜的網頁都是由盒子堆砌而成,那么布局指的是什么,布局是一個在網頁制作中非常麻煩的事情,但簡單的說布局指的就是網頁中形形色色的盒子的排列方式。 這些排列方式雖然看起來很多但實際上只有兩種排列類型就可以實現一切布局。首要的垂直排列,水平排列。 水平排列實際上是依附于垂直排列產生的。

《浮動屬性》

Float表示浮動對齊;它只有兩個值left,right沒有center。它最終實現的效果就是讓盒子能夠水平排列,并且浮動對齊了的盒子都能夠接受人為尺寸。

網頁的布局當中最穩定的盒子排列方式是垂直排列就是塊級元素垂直排列。而盒子水平排列一般都是在某個盒子內部進行拆分使用的。

*****浮動使用的原則:對于一個容器的內部同級的所有盒子只能接受一種排列方式要么是垂直要么是水平不能混用。

簡單理解為:同級標簽之間水平排列或垂直排列只能使用一種。

【網站制作】

《三步準備工作》

1. 清空默認邊距;

2. 設置正文默認樣式; 就是給body設置文字控制三屬性。

3. 修改超鏈接默認樣式;一般只需要改兩個,顏色,下劃線。

《水平排列結構的制作步驟》

分為三步:

1. 實體化盒子設置盒子的尺寸。

2. 實體化盒子好了以后設置浮動,左對齊右對齊或者一左一右的。

3. 一定要在最后一步再去確立內外間距的距離然后定位。

《清除列表樣式》

Css從來不用html當中默認的列表樣式所以在默認清空邊距的時候可以順帶清空。方法是;

List-style:none;

我再次強調一次,制作網頁布局的順序,一定是先實體化盒子,然后再添加浮動對齊,最后再處理間距用于定位。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,784評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,865評論 0 6
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,591評論 32 459
  • 第一,晚上開車一定要慢,要小心,視線真的不好。要左右看看以后,再踩油門。昨晚在東門,在轉彎時,還沒有順上道,右邊冒...
    freshriver閱讀 370評論 0 0
  • 我們中國人愛對美好的事物賦予情感和詩意,好的食物就稱之為美食。所謂美食,那一定應該是色香味俱全,已經上升到藝術的高...
    朝霞行閱讀 2,239評論 0 1