24h購物| | PChome| 登入
2012-05-03 15:28:49| 人氣447| 回應0 | 上一篇 | 下一篇

[HTML] CSS: Coding with Style

推薦 0 收藏 0 轉貼0 訂閱站台

Precision Targeting with Classes and Selectors

To finish this section, let's learn some shorthand. A few declarations can be collapsed into just one declaration. Instead of individually setting

  • border-style: [style]
  • border-width: [width]
  • border-color: [color]

you can combine all three values into one border property. Just put a space after each value.

  • border: [style] [width] [color];

You can do something similar with the top, right, bottom and left declarations for margin and padding:

  • padding: [top] [right] [bottom] [left];

Notice that it starts at the top, like the hour-hand at noon, and goes clockwise all the way around. If you want all sides to be the same, you can shorten it even more:

  • margin: [all-four!]

If the horizontal sides are the same (left and right) and the vertical sides are the same (top and bottom), you can use this format:

  • margin: [vertical] [horizontal]
  1. Replace the three border declarations in the p selector with this one line:
    • border: dashed 1px orange;
  2. In p.highlight, collapse all four margin declarations into one.



實作如上

以下是 code


<style>
p {
    margin: 0px;
    text-align: justify;
    border: dashed 1px orange;
    padding: 0% 10% 0% 10%;
}
p.highlight {
    background: yellow;
    padding:0;
    margin: 15px 10%
    display:inline;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Curabitur ligula magna, scelerisque sed cursus ac, consequat non quam. Etiam ipsum ligula, semper scelerisque fringilla nec, elementum eu dui. Aenean nec nunc nisi. </p>
<p class="highlight">
    Highlight me! I'm an English paragraph!
</p>
<p>Curabitur in purus at odio viverra bibendum id eu urna. Curabitur aliquet, odio a mattis semper, justo risus volutpat nunc, non ornare velit augue tincidunt quam.</p>
<p>Morbi commodo nisl mauris, convallis venenatis urna. Donec consequat tincidunt commodo. </p>
<p>Etiam luctus, risus non dignissim gravida, nibh enim tristique turpis, vel viverra mauris dui sit amet sem. Morbi dignissim dictum tortor, vel ullamcorper sem consequat et. </p>
<p class="highlight">
    Highlight me! I am also in English!
</p>
<p>Ut turpis ante, pharetra vitae euismod ac, euismod at enim. Proin porttitor venenatis diam, consectetur placerat urna mattis vulputate. Vestibulum tristique scelerisque rhoncus. </p>
<p>Donec ac lectus tortor, sit amet gravida enim. </p>

我要檢舉
台長： Morris

您可能對以下文章有興趣

人氣(447) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 不分類 | 個人分類: [學習]HTML |
此分類下一篇:[HTML] CSS: Coding with Style
此分類上一篇:[HTML] CSS: Coding with Style

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文