CSS筆記(二):基本語法

HTML tag中,可直接置入CSS的有:
1.  文字相關:h1~h6, p, div, blockquote(另有較少用的address和pre)
2.  清單相關:ul(li), ol(li), dl(dd)
這些Block Level的元素都是排版的要角,所以先不要急著自訂新的class,盡量使用HTML本身就有的tag來附加CSS。

基本語法

1. 附加在HTML tag上:

例:
【HTML】
<p>這是一個文字段落</p>
【CSS】
加在所有的p上
p{color:#aaa; font-size:1.2em}

2. 附加在HTML上,但只加在指定的tag上:

例:
【HTML】
<p class=“content”>這是一個文字段落</p>
【CSS】
只加在CSS類別為”content”的p上
p.content{color:#aaa; font-size:1.2em}

3. 自訂class,並加在自訂的區段:

例:
【HTML】
<div class=“content”>
<h1>標題文字</h1>
<p>這是一個文字段落</p>
</div>
【CSS】
只加在CSS類別為”content”的div上
.content{color:#aaa; font-size:1.2em}

4. 加在某一個巢狀區段:

例:
【HTML】
<div class=“content”>
<h1>標題文字</h1>
<p>這是一個文字段落</p>
</div>
【CSS】
針對類別為”content”的div下面的h1做設定
.content h1{color:#ff6600; font-size:2em; text-align:center}

5. 一個有小分支的class:

例:
【HTML】
<div class=“content privacy”>
<h1>標題文字</h1>
<p>這是一個文字段落</p>
</div>
【CSS】
.content.privacy{color:#ccc; font-size:0.8em}
.content.privacy 會繼承.content的設定,並在有指定privacy的區段再併用.privacy的設定。

6.id selector
Id用在HTML中只會出現一次的區段。

例:
【HTML】
<div id=“menu”>
<ul>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
【CSS】
#menu{height:40px}

若id中的CSS設定與它繼承的class設定有衝突,id中的設定擁有較高優先權。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s