博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

HTML-CSS速查

Posted on 2010-11-25 20:20  PHP-张工  阅读(806)  评论(5)  编辑  收藏  举报

页面下载

HTML标签

<html> 标准HTML结构 +
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>页面名称</title>
  <meta name="Keywords" content="关键词"/>
  <meta name="description" content="描述"/>
  <meta http-equiv="x-ua-compatible" content="ie=7" /> <--IE7兼容模式-->
  <meta http-equiv="imagetoolbar" content="no" /> <--去掉图片工具条-->
  <base href="http://www.cnblogs.com/"> <--页面所有相对链接的基准URL-->
  <base target="_blank"> <--连接默认在新窗口打开-->
  <link href="*.css" rel="stylesheet" type="text/css" /> <--外部样式表-->
  <style type="text/css"></style> <--内嵌样式表-->
  <script type="text/javascript" src="*.js"></script> <--外部JS-->
  <script type="text/javascript"></script> <--内嵌JS-->
</head>
<body>
  <div>
    <span></span>
  </div>
</body>
</html>
<a> 连接标记 +
常用连接
<a href="http://www.cnblogs.com">博客园</a>
<a href="http://www.cnblogs.com/index.html">转到页面</a>
<a href="index.html?id=123&tag=love#book">多个参数</a>
<a href="/about.aspx">根目录</a>
<a href="./about.aspx">本目录</a>
<a href="../about.aspx">上级目录</a>
<a href="index.html" rel="nofollow">搜索引擎不要跟踪链接</a>
锚点
<a id="abc1"></a> <a name="abc1"></a>
<a href="#abc1">转到锚点</a>
<a href="a.html#abc1">转到锚点</a>
跳转 target
<a target="_blank" href="a.html">新窗口打开</a>
<a target="_self" href="a.html">本窗口打开</a>
<a target="_parent" href="a.html">父窗口打开</a>
<a target="_top" href="a.html">顶级窗口打开</a>
<a target="frame1" href="a.html">在指定框架中打开</a>
执行脚本
<a href="javascript:alert('1');">执行JS脚本</a>
<a href="javascript:void(0);" onclick="alert(1);">执行JS脚本</a>
<table> 表格结构 +
标准表格结构
<table border="1" cellpadding="3" cellspacing="0" style="border-collapse:collapse;">
  <caption>表头</caption>
  <colgroup>
    <col style="color:Red;" />
  </colgroup>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr style="background-color:Gray;">
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>低</th>
      <th>低</th>
      <th>低</th>
    </tr>
  </tfoot>
</table>
显示效果
表头
列1 列1 列1
1 1 1
2 2 2
3 3 3
低 低 低
<form> 表单 +
表单
<form action="a.aspx" method="get"></form>
按钮
<input type="button" value="按 钮" onclick="" />
<input type="reset" value="重 置" />
<input type="submit" value="提 交" />
<input type="image" src="" /> <--图片按钮-->
<button type="button">确 定 <img /></button>
选项
<input type="checkbox" id="chk1" /> <label for="chk1">复选框</label>
<input type="checkbox" disabled /> <--复选框(禁用)-->
<input type="checkbox" checked /> <--复选框(默认选中)-->
<input type="radio" name="rr" checked /> <--单选框(默认选中)-->
<input type="radio" name="rr" /> <--单选框-->
<select multiple> <--multiple多选标记-->
  <optgroup label="选项组">
    <option>选项1</option>
    <option value="sss">选项1</option>
    <option selected>选项1</option>
  </optgroup>
</select>
输入框
<input type="text" value="文本框" />
<input type="text" disabled value="禁用文本框" />
<input type="text" readonly value="只读文本框" />
<input type="text" maxlength="10" value="限制长度" />
<input type="text" accesskey="a" value="文本框alt-a" />
<textarea>多行输入框</textarea>
其他
<fieldset> <--表单框-->
  <legend>表单框</legend>
  内容
</fieldset>
<input type="file" /> <--选择文件-->
<input type="hidden" value="" /> <--隐藏字段-->
效果演示
表单演示



上传文件
隐藏字段
图片按钮
密码输入框









单选下拉框
多选列表

&nbsp; 特殊字符 +
" - &quot;
& - &amp;
< - &lt;
> - &gt;
小空格 - &nbsp;
大空格 - &emsp;
© - &copy;
® - &reg;
囍 - &#22221;
<div> 块文本 +
<div>块级元素</div>
<h1>标题</h1> <--h1到h6-->
<pre>预格式文本</pre>
<span>行级元素</span>
<p>段落</p>
<i>斜体</i>
<b>粗体</b>
<br /> <--换行-->
<bdo dir="rtl">文字从右到左</bdo>
<hr /> <--分割线-->
<ul> <--无序列表-->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol> <--有序列表-->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<img src="../mypic.gif" galleryimg="no"/> <--图片-->
<IE> ie条件注解 +
<!--[if IE]>此内容只有IE可见<![endif]-->
<!--[if IE 6.0]>此内容只有IE6.0可见<![endif]-->
<!--[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]-->
<!--[if gt IE 5.0]>此内容只有IE5.0以上版本可见<![endif]-->
<!--[if lt IE 6.0]>此内容只有IE6.0以下版本可见<![endif]-->
<!--[if gte IE 5.0]>此内容只有IE5.0及以上版本可见<![endif]-->
<!--[if lte IE 6.0]>此内容只有IE6.0及以下版本可见<![endif]-->

CSS

添加 添加CSS +
<link href="*.css" rel="stylesheet" type="text/css" /> <--外部样式表-->
<style type="text/css"></style> <--内嵌样式表-->
<div style="font-size:12px;"></div>
<div class="divRed divBlue"></div>
<div id="div1"></div>
选择器 CSS选择器 +
* {} /* 所有元素 */
body {} /* body元素 */
div,span {} /* 所有div span元素 */
div span {} /* 所有div包含的span元素 */
.title {} /* 类选择器 */
p.title {} /* 类名为title的所有P元素 */
p .title {} /* P包含的所有类型为title的元素 */
#txtName {} /* ID选择器 */
a:link {} /* 正常连接 */
a:visited {} /* 访问过的连接 */
a:hover {} /* 鼠标经过时 */
a:active {} /* 鼠标按下时 */
p:first-line /* P的第一行 */
p:first-letter /* P的第一个字 */
/* 以下选择器IE6不支持 */
#title>p {} /* 子选择器(IE7) */
img[title] {} /* 属性选择器 所有设置了title的图片(IE7) */
input[type="text"] {} /* 所有文本框(IE7) */
div+p {} /* 紧跟着DIV的第一个同级P元素(IE7) */
div~p {} /* DIV后的所有同级P元素(IE7) */
a:hover span {} /* 伪类选择器(IE7) */
div:hover {} /* 当鼠标在DIV上时(IE7) */
input:focus {} /* 当input获得焦点时(IE8) */
div:before {content:"abc"} /* 在DIV前加abc(IE8) */
div:after {content:"abc"} /* 在DIV后加abc(IE8) */
div li:first-child {} /* DIV下的第一个LI元素(IE7) */
文字 文字样式 +
color:#FF0000; /* 文字颜色 */
color:#F98; /* 文字颜色 */
color:rgb(100,255,0); /* 文字颜色 */
color:rgb(100%,20%,0%); /* 文字颜色 */
color:Black; /* 文字颜色 */
/* White|Black|Red|Blue|Green|Yellow|Gray|Orange */
color:inherit; /* 继承父级 */
direction:rtl; /* 文字从右到左 */
font-size:30px; /* 文字大小 */
font-size:2em; /* 文字大小 */
font-size:large; /* 文字大小 */
/* xx-small|x-small|small|medium|large|x-large|xx-large */
font-family:Arial; /* 字体 */
font-family:Arial,serif,宋体; /* 字体 */
/* Arial|Georgia|Tahoma|Times|Verdana|sans-serif|serif|宋体|微软雅黑 */
font-style:italic; /* 字体风格 */
/* normal|italic|oblique */
font-variant:small-caps; /* 小型大写字母 */
font-weight:small-caps; /* 字体粗细 */
/* normal|bold|bolder|lighter|数值 */
text-indent:5em; /* 文本缩进 */
text-align:center; /* 文本对齐 */
/* left|right|center|justify */
letter-spacing:1px; /* 字间距 */
line-height:23px; /* 行间距 */
text-decoration:none; /* 文字修饰 */
/* none|underline|overline|line-through */
text-transform:uppercase; /* 大小写控制 */
/* none|capitalize|uppercase|lowercase */
white-space:normal; /* 空格处理方式 */
/* normal|pre|nowrap|pre-wrap|pre-line */
word-spacing:1px; /* 词间距 */
背景 背景样式 +
background:#FF0000 url(*.jpg) no-repeat fixed top center; /* 背景 */
background-color:#FF0000; /* 背景色 */
/* red|#FF0|#ff9090|rgb(2,3,89)|transparent */
background-image:url(*.jpg); /* 背景图片 */
/* url(URL)|none */
background-repeat:no-repeat; /* 背景图片平铺方式 */
/* repeat|repeat-x|repeat-y|no-repeat */
background-attachment:fixed; /* 背景图片是否固定位置 */
/* scroll|fixed */
background-position:fixed; /* 背景图片是否固定位置 */
/* top center|10% 50%|20px 30px */
块属性 大小、位置 +
margin:10px; /* 外边距[四边] */
margin:10px 20px; /* 外边距[上下，左右] */
margin:10px 20px 30px 10px; /* 外边距[上右下左] */
margin-top:10px; /* 外边距 */
margin-bottom:10px; /* 外边距 */
margin-left:-10px; /* 外边距 */
margin-right:auto; /* 外边距 */
padding:10px; /* 内边距[四边] */
padding:10px 20px; /* 内边距[上下，左右] */
padding:10px 20px 30px 10px; /* 内边距[上右下左] */
padding-top:10px; /* 内边距 */
padding-bottom:10px; /* 内边距 */
padding-left:10px; /* 内边距 */
padding-right:10px; /* 内边距 */
width:100px; /* 宽度 */
height:100px; /* 高度 */
max-width:100px; /* 最大宽度[IE7] */
max-height:100px; /* 最大高度[IE7] */
min-width:100px; /* 最小宽度[IE7] */
min-height:100px; /* 最小高度[IE7] */
position:absolute; /* 定位类型 */
/* absolute|fixed|relative|static fixed[IE7] */
top:10px; /* 距顶 */
bottom:10px; /* 距低 */
left:10px; /* 距左 */
right:10px; /* 距右 */
float:left; /* 浮动 */
/* left|right|none */
clear:both; /* 清除浮动 */
/* left|right|both|none */
cursor:pointer; /* 鼠标样式 */
/* url()|default|auto|crosshair|pointer|move|text|wait|help */
display:none; /* 显示方式 */
/* none|block|inline|inline-block */
overflow:hidden; /* 超出显示方式 */
/* visible|hidden|scroll|auto */
vertical-align:baseline; /* 上下对齐方式 */
/* baseline|sub|super|top|text-top|middle|bottom|text-bottom|数值 */
visibility:hidden; /* 是否显示 */
/* visible|hidden */
z-index:3; /* 层叠顺序 */
/* 数字|auto */
边框 边框、列表、表格 +
border:3px solid red; /* 边框 */
border-top:3px dotted red; /* 上边框 */
border-bottom:3px dashed red; /* 下边框 */
border-left:3px solid red; /* 左边框 */
border-right:none; /* 右边框 */
list-style:square inside url('/i/arrow.gif'); /* 列表样式 */
list-style-image:url('/i/arrow.gif'); /* 列表图片 */
list-style-position:inside; /* 列表标记位置 */
/* inside|outside */
list-style-type:inside; /* 列表标记类型 */
/* none|circle|square|decimal|disc */
border-collapse:collapse; /* 表格样式 */
CSS3 CSS3样式 +
color:rgba(255,100,0,0.3); /* 半透明颜色[IE9] */
border-radius:15px; /* 圆角[IE9] */
-moz-border-radius:15px; /* 圆角[Firefox] */
box-shadow:10px 10px 5px #888; /* 阴影[IE9] */
-moz-box-shadow:0 0 5px 5px #888; /* 阴影[Firefox] */
-webkit-box-shadow:10px 10px 5px #888; /* 阴影[Chrome] */
opacity:0.5; /* 半透明[IE9] */
text-shadow:2px 2px 2px #000; /* 文字阴影[IE不支持] */
outline:2px solid blue; /* 外边框[IE不支持] */
CSS技巧 CSS技巧 +
<div style="margin:10px auto; width:980px;"> /* DIV水平居中 */
<ruby>注音陈瑞银<rt style="font-size: 11px">zhu yin chen rui yin</rt></ruby> /* 汉语注音[仅IE下可用] */
<div style="overflow:hidden; text-overflow:ellipsis; width:100px; white-space:nowrap"> /* 超出内容省略 */
<div style="word-break:break-all; word-wrap:break-word; width:100px;"> /* 强制换行 */
CSS hack CSS兼容方法 +
#test{
  color:red; /* 所有浏览器都支持 */
  color:red !important;/* Firefox、IE7支持 */
  _color:red; /* IE6支持 */
  *color:red; /* IE6、IE7支持 */
  *+color:red; /* IE7支持 */
  color:red\9; /* IE6、IE7、IE8支持 */
  color:red\0; /* IE8支持 */
}
CSS reset CSS同一初始化 +
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,img {
  border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-weight: normal;
  font-style: normal;
}
ol,ul {
  list-style: none;
}
caption,th {
  text-align: left;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before,q:after {
  content:”;
}
abbr,acronym {
  border: 0;
}