基础css

通过重置一些不兼容的css代码,能够避免一些不必要的跨浏览器兼容问题,定义了一些常用的css
类,能够用于快速开发,也能统一网页的风格。

排版

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

example

采用了符合中国人阅读习惯的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中具有提高文字权重的效果

example

我是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>

加粗

通过原生的<strong></strong>标签即可加粗,css加粗为font-weight:bold;<strong>...</strong> <b>在w3c新标准中已经不建议使用了

example
这是一段加粗的文字
<strong>这是一段加粗的文字</strong>

下划线

可以通过css的text-decoration:underline; 实现同样的效果

example
这是一段下划线的文字
<u>这是一段下划线的文字</u>

斜体

可以通过css的font-style:italic;实现同样的效果,<em>...</em> <i>在w3c新标准中已经不建议使用了

example
这是一段斜体的文字
<em>这是一段斜体的文字</em>

删除线

可以通过css的text-decoration:line-through;实现同样的效果

example
这是一段删除线文字
<del>这是一段删除线文字</del>

上标和下标

example

上标的文字在文字位于右上方显示这是一段上标文字

下标的文字在文字位于右下方显示这是一段下标文字

<p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p>
<p>下标的文字在文字位于右下方显示<sup>这是一段下标文字</sup></p>

文字加大,缩小

example

这是一段加大号文字

这是一段小号文字

<p><big>这是一段加大号文字</big></p>
<p><small>这是一段小号文字</small></p>

引用

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

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

abbr

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

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

列表

无序列表ul

example
  • 无序列表是这样表现的
  • 无序列表是点点点
  • 无序列表是没有罗马文字的
<ul>
<li>无序列表是这样表现的</li>
<li>无序列表是点点点</li>
<li>无序列表是没有罗马文字的</li>
</ul>

有序列表ol

example
  1. 有序列表是这样表现的
  2. 有序列表不是是点点点
  3. 有序列表是有罗马文字的
<ol>
<li>有序列表是这样表现的</li>
<li>有序列表不是是点点点</li>
<li>有序列表是有罗马文字的</li>
</ol>

没有样式的<ul class="unstyled">

example
  • 没有样式是这样表现的
  • 没有样式的列表什么也没有
  • 没有样式比较干净
<ul class="unstyled">
<li>没有样式是这样表现的</li>
<li>没有样式的列表什么也没有</li>
<li>没有样式比较干净</li>
</ul>

圈圈<ul class="circle">

example
  • 圈圈列表是这样表现的
  • 圈圈列表是圈圈的
  • 圈圈列表跟点点很相似
<ul class="circle">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>

方块<ul class="square">

example
  • 圈圈列表是这样表现的
  • 圈圈列表是圈圈的
  • 圈圈列表跟点点很相似
<ul class="square">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>

中文123<ul class="cjk">

example
  • 中文123样式是这样表现的
  • 中文123样式的列表什么也没有
  • 中文123样式是用汉字一二三排序的
<ul class="cjk">
<li>中文123样式是这样表现的</li>
<li>中文123样式的列表什么也没有</li>
<li>中文123样式是用汉字一二三排序的</li>
</ul>

代码代码区间

一行代码

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

多行代码

example
  1. body{
  2. background:white;
  3. font-size:13px;
  4. line-height:22px;
  5. }
<pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol></pre>

表格表格的表框,间距等进行了重写让table更美观

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

example
/    
     
     
<table class="table table-bordered">
 <tbody>
<tr>
<td>/</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr> </tbody> <tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr> </tbody> <tfoot>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr> </tfoot>
</table>

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

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

表单

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

example
注册表单
fadf

踢球 上网 冲浪

<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="button blue" value="提交">
<input name="重置" type="reset" class="button" value="重置">
</p>
</fieldset>
</form>

按钮

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

演示 代码 功能
默认 <a class="button"> 或者 <input type="button" class="button"> 默认按钮
反向 <a class="button inverse"> 或者 <input type="button" class="button inverse"> 反向按钮
黑色 <a class="button black"> 或者... 黑色的按钮
橙色 <a class="button orange"> 或者... 橙色按钮
红色 <a class="button red"> 或者... 红色按钮
蓝色 <a class="button blue"> 或者... 蓝色按钮
玫瑰红 <a class="button rosy"> 或者... 玫瑰红按钮
绿色 <a class="button green"> 或者... 绿色按钮
粉红 <a class="button pink"> 或者... 粉红按钮
黄色 <a class="button yellow"> 或者... 黄色按钮
圆角 <a class="button black bigrounded"> 或者... 圆角的按钮
适中号 <a class="button black medium"> 或者... 中等号按钮
小号 <a class="button black small"> 或者... 小号按钮

颜色值

example

当我还是个小女孩,

我问妈妈

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

会漂亮吗?

会富有吗?

她对我说:

世事不可强求

顺其自然吧

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