24h購物| | PChome| 登入
2012-04-23 14:11:06| 人氣523| 回應0 | 上一篇 | 下一篇

[HTML] CSS: Coding with Style

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

Beautifying More with Less

  • letter-spacing: [normal | 5px]
  • text-decoration: [none | underline | overline | line-through]
  • text-transform: [capitalize | uppercase | lowercase | none]
  • text-align: [left | right | center | justify]
  • text-indent: [5px | 5%]
  • line-height: [normal | 5px | 5%]



I'm excited about CSS. I love CSS. I can't wait to learn more about CSS and start using CSS all over the place!

<style>
em {color:green}
span {font-family:monospace}
</style>

I'm <em>excited</em> about <span>CSS</span>. I <em>love</em> <span>CSS</span>. I can't <em>wait</em> to learn more about <span>CSS</span> and start using <span>CSS</span> <em>all over the place</em>!


This paragraph should be indented 20 pixels, it should be blue with a yellow background, it should have a black border and it should have 30 pixels of padding.

<style>
    p {text-indent:20px; boarder: solid 1px black; padding: 30px; color:blue; background: yellow;}
</style>
<p>
This paragraph should be indented 20 pixels, it should be blue with a yellow background, it should have a black border and it should have 30 pixels of padding.
</p>





<style>
    p {letter-spacing: 5px; text-decoration: line-through;
        text-transform: uppercase; text-align: center;
        text-indent: 1%; line-height: 50%;}
</style>
<p>
    Here is a long paragraph for you to play with. Go ahead and mess
    with it. All of the properties shown here are text properties. As
    a bonus, you can try using different units for the properties that
    take numerical values. There is already the demo of pixels and
    percent. Try "em", a relative unit (1em = the current font size). You can also try
    negative values (e.g. -10px). Some properties take negative values,
    and some do not.
</p>

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

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