slicy 基礎(chǔ)CSS

• 排版
  • 段落排版
  • 引用
  • 標(biāo)簽
• 代碼
• 表格
• 表單
• 按鈕
• 其他
  • 文字
  • 位置
  • 背景
  • 邊框
  • 圖片

排版

默認(rèn)設(shè)置,段落,標(biāo)題,文本，對(duì)字體顏色，錨文本的下劃線，顏色，字體做了重寫(xiě)，均采用了最符合中國(guó)網(wǎng)站體驗(yàn)的12號(hào)字體和 Verdana, Arial, Helvetica, sans-serif 字體。行距22px。這些重寫(xiě)參考了，盛大，騰訊，百度，新浪等眾多網(wǎng)站對(duì)css重寫(xiě)的選擇。

演示

采用了符合中國(guó)人閱讀習(xí)慣的font-size:12px像素字體，行距l(xiāng)ine-height:22px像素。字體font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;

級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。

<p>采用了符合中國(guó)人閱讀習(xí)慣的font-size:12px像素字體，行距l(xiāng)ine-height:22px像素。字體font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>

段落排版

h1~h6標(biāo)簽同strong標(biāo)簽一樣在seo中具有提高文字權(quán)重的效果

演示

我是h1標(biāo)簽，在seo中我擁有最高的權(quán)重

我是h2標(biāo)簽，在seo中我擁有僅次于h1標(biāo)簽的權(quán)重

我是h3標(biāo)簽，在seo中我擁有僅次于h1,h2標(biāo)簽的權(quán)重

我是h4標(biāo)簽，在seo中我擁有僅次于h1,h2,h3標(biāo)簽的權(quán)重

我是h5標(biāo)簽，在seo中我擁有僅次于h1,h2,h3,h4標(biāo)簽的權(quán)重

<h1>我是h1標(biāo)簽，在seo中我擁有最高的權(quán)重</h1>
<h2>我是h2標(biāo)簽，在seo中我擁有僅次于h1標(biāo)簽的權(quán)重</h2>
<h3>我是h3標(biāo)簽，在seo中我擁有僅次于h1,h2標(biāo)簽的權(quán)重</h3>
<h4>我是h4標(biāo)簽，在seo中我擁有僅次于h1,h2,h3標(biāo)簽的權(quán)重</h4>
<h5>我是h5標(biāo)簽，在seo中我擁有僅次于h1,h2,h3,h4標(biāo)簽的權(quán)重</h5>

引用

引用常常被用于評(píng)論中，在網(wǎng)頁(yè)中非常常見(jiàn)，用<blockquote>就可以輕松實(shí)現(xiàn)一段美觀的引用。

級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。

通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。

<blockquote>級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。
        <blockquote>通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。</blockquote>
      </blockquote>

abbr

標(biāo)簽常常用于關(guān)鍵字tag等地方，用<abbr>就可以輕松實(shí)現(xiàn)。

<abbr>css3</abbr> <abbr>html5</abbr>

代碼區(qū)間 pre

演示

body{ background:white;}

<pre>body{ background:white;}</pre>

表格

帶邊框的表格加上class="table table-bordered"即可實(shí)現(xiàn)帶邊框的表格

演示

<table class="table table-bordered">
 <tbody>
  <tr>
   <td>當(dāng)我還是個(gè)小女孩</td>
   <td>我問(wèn)我媽媽</td>
   <td>將來(lái)我會(huì)變成什么樣子呢</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>會(huì)漂亮嗎</td>
   <td>會(huì)富有嗎</td>
   <td>她對(duì)我說(shuō)：世事不可強(qiáng)求，順其自然吧</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <td>當(dāng)我長(zhǎng)大并戀愛(ài)了</td>
    <td>我問(wèn)我的心上人</td>
    <td>我們將來(lái)會(huì)怎么樣呢</td>
  </tr>
  <tr>
   <td>生活每天都美好嗎</td>
   <td>我的愛(ài)人對(duì)我說(shuō)：</td>
   <td>世事不可強(qiáng)求，順其自然吧</td>
  </tr>
 </tfoot>
</table>

斑馬表格

加上class="table table-zebra"即可實(shí)現(xiàn)斑馬表格

演示

<table width="100%" border="0" class="table table-zebra"></table>

表單

對(duì)文本框等進(jìn)行了重寫(xiě)，通過(guò)美化一些表單元素默認(rèn)樣式，例如文本框，按鈕，下拉菜單等，讓表單更美觀。通過(guò)placeholder屬性來(lái)完成，文本框的默認(rèn)值，鼠標(biāo)點(diǎn)擊消失，失去光標(biāo)，默認(rèn)值恢復(fù)的效果。（改效果在firefox瀏覽器下可見(jiàn)）

演示

自我介紹：

愛(ài)好： 踢球 上網(wǎng) 沖浪

性別： 男 女

學(xué)歷：

文件域：

<form action="" method="get" enctype="multipart/form-data">
        <fieldset>
        <legend>注冊(cè)表單</legend>
        <p>
          <label>姓名 <small>字符在3~9位</small></label>
          <input name="" type="text" placeholder="請(qǐng)?zhí)顚?xiě)真實(shí)的姓名">
          <input name="" type="text" placeholder="請(qǐng)?zhí)顚?xiě)真實(shí)的姓名" class="text radius">
        </p>
        <p>
          <label>自我介紹：</label>
          <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </p>
        <p>
          <label>愛(ài)好：</label>
          <input type="checkbox" name="checkbox" id="checkbox">
          踢球
          <input type="checkbox" name="checkbox" id="checkbox">
          上網(wǎng)
          <input type="checkbox" name="checkbox" id="checkbox">
          沖浪 </p>
        <p>
          <label>性別：</label>
          <input type="radio" name="radio" id="radio" value="radio">
          男
          <input type="radio" name="radio" id="radio" value="radio">
          女 </p>
        <p>
          <label>學(xué)歷：</label>
          <select name="select" id="select">
            <option value="1">大學(xué)/大專</option>
            <option value="2">高中/中專</option>
            <option>小學(xué)</option>
          </select>
        </p>
        <p>
          <label>文件域：</label>
          <input type="file" name="fileField" id="fileField">
        </p>
        <p>
          <label></label>
          <input name="" type="submit" class="btn blue" value="提交">
          <input name="重置" type="reset" class="btn" value="重置">
        </p>
        </fieldset>
      </form>

按鈕

對(duì)按鈕或者a標(biāo)簽按鈕的樣式重寫(xiě),css3按鈕是指通過(guò)css3來(lái)實(shí)現(xiàn)的按鈕的效果，css3純css可以實(shí)現(xiàn)立體，漸變，陰影，圓角等很多種特效，如果把這些屬性通過(guò)各種不同的方式組合在一起就能實(shí)現(xiàn)很多不同的炫酷的按鈕效果。 <a class="btn"> 或者 <input type="btn" class="btn">

<a href="#" class="btn">默認(rèn)</a>

<a href="#" class="btn btn-inverse">反向</a>

<a href="#" class="btn bg-red bg-inverse">紅色</a>

<a href="#" class="btn bg-blue bg-inverse">藍(lán)色</a>

<a href="#" class="btn bg-green bg-inverse">綠色</a>

<a href="#" class="btn bg-yellow bg-inverse">黃色</a>

<a href="#" class="btn btn-little">小號(hào)</a>

<a href="#" class="btn btn-small">小號(hào)</a>

<a href="#" class="btn btn-medium">中號(hào)</a>

<a href="#" class="btn btn-large">大號(hào)</a>

<a href="#" class="btn btn-xlarge">加大號(hào)</a>

文字

演示

當(dāng)我還是個(gè)小女孩，

我問(wèn)媽媽

將來(lái)我會(huì)變成什么樣子呢？

會(huì)漂亮嗎？

會(huì)富有嗎？

她對(duì)我說(shuō)：

世事不可強(qiáng)求

順其自然吧

<p class="txt-red">當(dāng)我還是個(gè)小女孩，</p>
<p class="txt-yellow">我問(wèn)媽媽</p>
<p class="txt-blue">將來(lái)我會(huì)變成什么樣子呢？</p>
<p class="txt-green">會(huì)漂亮嗎？</p>
<p>會(huì)富有嗎？</p>
<p>她對(duì)我說(shuō)：</p>
<p>世事不可強(qiáng)求</p>
<p>順其自然吧</p>

文字位置

演示

當(dāng)我還是個(gè)小女孩，我問(wèn)媽媽，將來(lái)我會(huì)變成什么樣子呢？

會(huì)漂亮嗎？會(huì)富有嗎？

她對(duì)我說(shuō)：世事不可強(qiáng)求,順其自然吧

當(dāng)我長(zhǎng)大了，戀愛(ài)了，我問(wèn)我的心上人，“我們將來(lái)會(huì)怎么樣呢？我們的生活每天都會(huì)美好嗎？”我的愛(ài)人對(duì)我說(shuō)：“世事不可強(qiáng)求順其自然吧。我們不能預(yù)見(jiàn)未來(lái)。世事不可強(qiáng)求順其自然吧。”現(xiàn)在我有了自己的孩子，他們問(wèn)我，“將來(lái)我會(huì)變成什么樣子呢？會(huì)英俊嗎？會(huì)富有嗎？”我輕聲地回答：“世事不可強(qiáng)求順其自然吧。我們不能預(yù)見(jiàn)未來(lái)。世事不可強(qiáng)求順其自然吧?！?/p>

<p class="bdr txt-left pd-small">當(dāng)我還是個(gè)小女孩，我問(wèn)媽媽，將來(lái)我會(huì)變成什么樣子呢？</p>
<p class="bdr txt-center pd-small">會(huì)漂亮嗎？會(huì)富有嗎？</p>
<p class="bdr txt-right pd-small">她對(duì)我說(shuō)：世事不可強(qiáng)求,順其自然吧</p>
<p class="bdr txt-justify pd-small">當(dāng)我長(zhǎng)大了，戀愛(ài)了，...世事不可強(qiáng)求順其自然吧?！?lt;/p>

背景色

歌詞來(lái)自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="bg-red bg-inverse pd-small">When I was just a little girl,</p>
<p class="bg-yellow bg-inverse pd-small">I asked my mother, </p>
<p class="bg-blue bg-inverse pd-small">"What will I be?</p>
<p class="bg-green bg-inverse pd-small">Will I be pretty?</p>
<p class="bg-red-light txt-red pd-small">When I was just a little girl,</p>
<p class="bg-yellow-light txt-yellow pd-small">I asked my mother, </p>
<p class="bg-blue-light txt-blue pd-small">"What will I be?</p>
<p class="bg-green-light txt-green pd-small">Will I be pretty?</p>

去掉背景

.bg-none

邊框

歌詞來(lái)自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="bdr bdr-red txt-red pd-small">When I was just a little girl,</p>
<p class="bdr bdr-yellow txt-yellow pd-small">I asked my mother, </p>
<p class="bdr bdr-blue txt-blue pd-small">"What will I be?</p>
<p class="bdr bdr-green txt-green pd-small">Will I be pretty?</p>
<p class="bdr pd-small">Will I be rich?"</p>

圖片

鼠標(biāo)移上去圖片放大類img-scale

演示

<a href="#"><img src="imgs/docs-img.jpg" class="img-scale" width="200"/></a>