css學習初級入門

2021-05-23 03:16:49 字數 1214 閱讀 8168

先體驗下css的魅力,哈哈

乙個簡單的html:

頁面層容器

頁面頭部

側邊欄主體內容

頁面底部

/*基本資訊*/

body

a:link,a:visited

a:hover{}

/*頁面層容器*/

#container

/*利用padding:20px 20px 0 0來固定選單位置*/

#menu

/*新增了float:right使得選單位於頁面右側*/

#menu ul

#menu ul li

.menudiv

#menu ul li a:link,#menu ul li a:visited

#menu ul li a:hover{}

#banner

#pagebody

#sidebar

#mainbody

這裡重點對css檔案進行解釋,

當在html中定義為id="divid"時,在css對應的設定語法則是#divid{} ,如果在html中定義為class="divid"時,則在css中對應的設定語法是.divid。

如果id="divid"這個層中包括了乙個

對層的margin屬性的左右邊距設定為auto可以讓層居中顯示。

margin:0px

也使用了縮寫,完整的應該是:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

或margin:0px 0px 0px 0px

順序是 上 / 右 / 下 / 左,你也可以書寫為margin:0(縮寫);

以上樣式說明body部分對上右下左邊距為0畫素,如果使用auto則是自動調整邊距,

另外還有以下幾種寫法:

margin:0px auto;

說明上下邊距為0px,左右為自動調整;

我們以後將使用到的padding屬性和margin有許多相似之處,他們的引數是一樣的,

只不過各自表示的含義不相同,margin是外部距離,而padding則是內部距離。

CSS初級入門 連線屬性

連線屬性 在 html 檔案裡的超連線文字經過瀏覽器的解釋後都會以加下劃線的方式來顯示,並沒有動態的效果,通過 css 之 anchor pseudo classes,大家可以將超連線文字的顯示方式做到幾種不同的變化。例如 www.webjx.com 以上的超級連線經過在瀏覽器頁面上是以加下劃線的方...

前端學習 css 初級

web開發中,html的每個元素都是盒子,盒子可以裝內容 content 可以有填充物 padding 有外殼 border 和 外保護層 margin 下圖為控制台中的盒子詳解 瀏覽器的控制台是我們了解乙個元素最好的乙個工具,下圖可以清晰的看出乙個盒子所擁有的屬性。元素的實際寬高 上圖可清晰的看出...

CSS初級入門 樣式的單獨呼叫

為什麼要單獨呼叫呢?單獨呼叫 就是加入style屬性。就是將css宣告套用在單獨的乙個網頁元素上 任乙個文字 等,都是網頁元素 此時,css將不再以乙個樣式表來顯示結果了,而是利用style屬性加到標籤中。為什麼要 單獨呼叫 css?原因是 比較靈活.舉個簡單的例子,我們希望讓輸入的表單的底色不使用...