CSS+DIV之強化border屬性

來源:互聯網
上載者:User

  今天在百度搜尋引擎發現了“CSS+DIV”關鍵詞排名從第一頁跌到第四頁,感覺到蠻可惜的。究其原因應該是好久沒有更新依葫蘆畫瓢學CSS+DIV系列文章造成的,原來計劃教程可以與我修改網易版首頁共同更新,但首頁提前完成了上線了,但還不能完全適應Firefox瀏覽器,在辛苦修改中。求教了一些CSS+DIV高手,他們給我的答案:從最簡單的CSS屬性學起。將學習筆記整理出來,與更多的CSS+DIV愛好者共同成長。

  在網易首頁改版過程中,在div層套入border邊框是最常用的,它就像如同表格,可以將樣式、文字、圖片封裝起來。border邊框屬性主要學習邊框風格屬性(border-style)、邊框寬度屬性(border-width)、邊框顏色屬性(border-color),這三個屬性可以對整個邊框或者單邊架構多樣化設定。通過解剖學習的方法,將每一種屬性分解出來,更好將基本屬性學到位,學會簡單的運用。

  1.邊框風格屬性(border-style),用來設定上下左右邊框的風格,具體參數值有:
  
  none (沒有邊框)、dotted (點線式邊框)、dashed (破折線式邊框)、solid (直線式邊框)、double (雙線式邊框)、groove (槽線式邊框)、ridge(脊線式邊框)、inset (內嵌效果的邊框)、outset (突起效果的邊框),下面以最為常用的直線式邊框為例,代碼參考寫法如下:

<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09):強化border屬性</div>
</body>
</html>

  2.邊框寬度屬性(border-width),用來設定上下左右邊框的寬度,具體參數值有:

  medium (是預設值)、thin (比medium細)、thick (比medium粗)、用長度單位定值;可用絕對長度單位(cm, mm, in, pt, pc)或者用相對長度單位 (em, ex, px)。我比較喜歡用px的單位。以直線式1像素邊框為例,代碼參考寫法如下:

<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09):強化border屬性</div>
</body>
</html>

  3.邊框顏色屬性(border-color),用來設定上下左右邊框的顏色,顏色值可參照調色盤,樣本以直線式1像素紅色邊框為例,代碼參考寫法如下:

<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px; border-color:red;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09):強化border屬性</div>
</body>
</html>

  將這些三個屬性分解出來應該很簡單的,最後一個屬性樣本很容易將前面兩個屬性結合了。其實那樣的寫法過於詳細,可用綜合寫法對其代碼簡化。

.apple {border-style:solid; border-width:1px; border-color:red;} 
寫成<span style=”color:Red”>.apple {border:1px solid red;}</span>

  以上border邊框屬性是上下左右四個邊框統一設定,當然也可分開設定。如右邊框,只要將參數值變為:border-right, border-right-width, border-right-style, border-right-color。現舉例如下,同樣運用綜合寫法,

<html>
<head>
<title>徐果萍部落格</title>
<style type=”text/css”>
.apple {border-top:1px solid red; border-right:2px double blue; border-bottom:1px solid red; border-left:2px double blue;}
</style>
</head>
<body>
<div class = ”apple”>依葫蘆畫瓢學CSS+DIV(09):強化border屬性</div>
</body>
</html>

  強化border屬性,這是我自學時覺得應該掌握一些基礎性的知識,因為這些代碼最關鍵還是要學會運用,光看代碼是沒有用的,要學會自己去寫代碼,去發現其中錯誤的寫法,糾正一些常規的寫法,這樣才能加快手工寫入代碼的進程。下一課時,準備分享一些font屬性個人學習筆記的心得!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.