slicy 基础CSS

• 排版
  • 段落排版
  • 引用
  • 标签
• 代码
• 表格
• 表单
• 按钮
• 其他
  • 文字
  • 位置
  • 背景
  • 边框
  • 图片

排版

默认设置,段落,标题,文本，对字体颜色，锚文本的下划线，颜色，字体做了重写，均采用了最符合中国网站体验的12号字体和 Verdana, Arial, Helvetica, sans-serif 字体。行距22px。这些重写参考了，盛大，腾讯，百度，新浪等众多网站对css重写的选择。

演示

采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。

<p>采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>

段落排版

h1~h6标签同strong标签一样在seo中具有提高文字权重的效果

演示

我是h1标签，在seo中我拥有最高的权重

我是h2标签，在seo中我拥有仅次于h1标签的权重

我是h3标签，在seo中我拥有仅次于h1,h2标签的权重

我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重

我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重

<h1>我是h1标签，在seo中我拥有最高的权重</h1>
<h2>我是h2标签，在seo中我拥有仅次于h1标签的权重</h2>
<h3>我是h3标签，在seo中我拥有仅次于h1,h2标签的权重</h3>
<h4>我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重</h4>
<h5>我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5>

引用

引用常常被用于评论中，在网页中非常常见，用<blockquote>就可以轻松实现一段美观的引用。

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。

通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

<blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
        <blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote>
      </blockquote>

abbr

标签常常用于关键字tag等地方，用<abbr>就可以轻松实现。

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

代码区间 pre

演示

body{ background:white;}

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

表格

带边框的表格加上class="table table-bordered"即可实现带边框的表格

演示

<table class="table table-bordered">
 <tbody>
  <tr>
   <td>当我还是个小女孩</td>
   <td>我问我妈妈</td>
   <td>将来我会变成什么样子呢</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>会漂亮吗</td>
   <td>会富有吗</td>
   <td>她对我说：世事不可强求，顺其自然吧</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <td>当我长大并恋爱了</td>
    <td>我问我的心上人</td>
    <td>我们将来会怎么样呢</td>
  </tr>
  <tr>
   <td>生活每天都美好吗</td>
   <td>我的爱人对我说：</td>
   <td>世事不可强求，顺其自然吧</td>
  </tr>
 </tfoot>
</table>

斑马表格

加上class="table table-zebra"即可实现斑马表格

演示

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

表单

对文本框等进行了重写，通过美化一些表单元素默认样式，例如文本框，按钮，下拉菜单等，让表单更美观。通过placeholder属性来完成，文本框的默认值，鼠标点击消失，失去光标，默认值恢复的效果。（改效果在firefox浏览器下可见）

演示

自我介绍：

爱好： 踢球 上网 冲浪

性别： 男 女

学历：

文件域：

<form action="" method="get" enctype="multipart/form-data">
        <fieldset>
        <legend>注册表单</legend>
        <p>
          <label>姓名 <small>字符在3~9位</small></label>
          <input name="" type="text" placeholder="请填写真实的姓名">
          <input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
        </p>
        <p>
          <label>自我介绍：</label>
          <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
        </p>
        <p>
          <label>爱好：</label>
          <input type="checkbox" name="checkbox" id="checkbox">
          踢球
          <input type="checkbox" name="checkbox" id="checkbox">
          上网
          <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>学历：</label>
          <select name="select" id="select">
            <option value="1">大学/大专</option>
            <option value="2">高中/中专</option>
            <option>小学</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>

按钮

对按钮或者a标签按钮的样式重写,css3按钮是指通过css3来实现的按钮的效果，css3纯css可以实现立体，渐变，阴影，圆角等很多种特效，如果把这些属性通过各种不同的方式组合在一起就能实现很多不同的炫酷的按钮效果。 <a class="btn"> 或者 <input type="btn" class="btn">

<a href="#" class="btn">默认</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">蓝色</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">小号</a>

<a href="#" class="btn btn-small">小号</a>

<a href="#" class="btn btn-medium">中号</a>

<a href="#" class="btn btn-large">大号</a>

<a href="#" class="btn btn-xlarge">加大号</a>

文字

演示

当我还是个小女孩，

我问妈妈

将来我会变成什么样子呢？

会漂亮吗？

会富有吗？

她对我说：

世事不可强求

顺其自然吧

<p class="txt-red">当我还是个小女孩，</p>
<p class="txt-yellow">我问妈妈</p>
<p class="txt-blue">将来我会变成什么样子呢？</p>
<p class="txt-green">会漂亮吗？</p>
<p>会富有吗？</p>
<p>她对我说：</p>
<p>世事不可强求</p>
<p>顺其自然吧</p>

文字位置

演示

当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？

会漂亮吗？会富有吗？

她对我说：世事不可强求,顺其自然吧

当我长大了，恋爱了，我问我的心上人，“我们将来会怎么样呢？我们的生活每天都会美好吗？”我的爱人对我说：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”现在我有了自己的孩子，他们问我，“将来我会变成什么样子呢？会英俊吗？会富有吗？”我轻声地回答：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”

<p class="bdr txt-left pd-small">当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？</p>
<p class="bdr txt-center pd-small">会漂亮吗？会富有吗？</p>
<p class="bdr txt-right pd-small">她对我说：世事不可强求,顺其自然吧</p>
<p class="bdr txt-justify pd-small">当我长大了，恋爱了，...世事不可强求顺其自然吧。”</p>

背景色

歌词来自《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

边框

歌词来自《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>

图片

鼠标移上去图片放大类img-scale

演示

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