html5中文学习网

您的位置: 首页 > html5教程 > 高级应用 » 正文

浅谈html5标签css3的常用样式_html5教程技巧

[ ] 已经帮助:人解决问题

<meta name=''>zp8HTML5中文学习网 - HTML5先行者学习网

name:有如下6个值:zp8HTML5中文学习网 - HTML5先行者学习网
application-name:文档名或者应用名,整个文档只能包含一个值。zp8HTML5中文学习网 - HTML5先行者学习网
author:文档作者zp8HTML5中文学习网 - HTML5先行者学习网
description:文档描述zp8HTML5中文学习网 - HTML5先行者学习网
generator:生成文档的程序。zp8HTML5中文学习网 - HTML5先行者学习网
keywords:网页关键字,用英文逗号分隔。zp8HTML5中文学习网 - HTML5先行者学习网

zp8HTML5中文学习网 - HTML5先行者学习网
<a href="http://www.jb51.net">脚本之家</a>zp8HTML5中文学习网 - HTML5先行者学习网

href:路径zp8HTML5中文学习网 - HTML5先行者学习网
<img src="../img/a.jpg" alt="此图无法显示" border="1px solid red" width="400" height="250"/>zp8HTML5中文学习网 - HTML5先行者学习网
src:图片路径zp8HTML5中文学习网 - HTML5先行者学习网

<table>标签的属性zp8HTML5中文学习网 - HTML5先行者学习网
Border 边框zp8HTML5中文学习网 - HTML5先行者学习网
Cellspacing 表格外边距zp8HTML5中文学习网 - HTML5先行者学习网
Cellpadding 表格内边距zp8HTML5中文学习网 - HTML5先行者学习网
Align  位置zp8HTML5中文学习网 - HTML5先行者学习网
Bgcolor:背景色zp8HTML5中文学习网 - HTML5先行者学习网
Background:背景图片zp8HTML5中文学习网 - HTML5先行者学习网
Bordercolor:边框颜色zp8HTML5中文学习网 - HTML5先行者学习网

table中 <tr></tr>zp8HTML5中文学习网 - HTML5先行者学习网

<td colspan="2"></td>  colspan 跨2列zp8HTML5中文学习网 - HTML5先行者学习网

        rowspan  跨  行zp8HTML5中文学习网 - HTML5先行者学习网

<input type="">zp8HTML5中文学习网 - HTML5先行者学习网

 type值zp8HTML5中文学习网 - HTML5先行者学习网

text  文本zp8HTML5中文学习网 - HTML5先行者学习网

password 密码zp8HTML5中文学习网 - HTML5先行者学习网

radio 单选zp8HTML5中文学习网 - HTML5先行者学习网

checkbox 多选zp8HTML5中文学习网 - HTML5先行者学习网

reset 重置zp8HTML5中文学习网 - HTML5先行者学习网

file 文件上传zp8HTML5中文学习网 - HTML5先行者学习网

submit 提交表单zp8HTML5中文学习网 - HTML5先行者学习网

image 图形提交zp8HTML5中文学习网 - HTML5先行者学习网

button 普通按钮zp8HTML5中文学习网 - HTML5先行者学习网

分组下拉zp8HTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. <select name="city" id="city">  
  2.     <optgroup label="山东">  
  3.         <option value="yt">烟台</option>  
  4.         <option value="qd">青岛</option>  
  5.         <option value="wh">威海</option>  
  6.     </optgroup>  
  7.     <optgroup label="北京">  
  8.         <option value="bj">bj</option>  
  9.         <option value="tam">tam</option>  
  10.         <option value="zong">zong</option>  
  11.     </optgroup>  
  12. </select>  
文字区域textareazp8HTML5中文学习网 - HTML5先行者学习网
XML/HTML Code复制内容到剪贴板
  1. <textarea name="textarea" id="textarea" cols="30" rows="10" readonly="readonly"  
  2.         disabled="disabled">  
  3.     1</textarea>  

zp8HTML5中文学习网 - HTML5先行者学习网
cols 宽度 rows 高度  readonly 只读zp8HTML5中文学习网 - HTML5先行者学习网

css样式zp8HTML5中文学习网 - HTML5先行者学习网
字体、字号:zp8HTML5中文学习网 - HTML5先行者学习网
font(缩写形式)zp8HTML5中文学习网 - HTML5先行者学习网
font-weight(粗细) 正常(normal) 粗体(bold) 斜体(italic)zp8HTML5中文学习网 - HTML5先行者学习网
font-size(大小) zp8HTML5中文学习网 - HTML5先行者学习网
font-family(字体系列)zp8HTML5中文学习网 - HTML5先行者学习网
font-style(字体样式)zp8HTML5中文学习网 - HTML5先行者学习网

字体颜色:zp8HTML5中文学习网 - HTML5先行者学习网
colorzp8HTML5中文学习网 - HTML5先行者学习网
opacity (透明度 css3)zp8HTML5中文学习网 - HTML5先行者学习网

行距、对齐等:zp8HTML5中文学习网 - HTML5先行者学习网
line-height (行高) zp8HTML5中文学习网 - HTML5先行者学习网
text-align (对齐) zp8HTML5中文学习网 - HTML5先行者学习网
letter-spacing (字符间距)zp8HTML5中文学习网 - HTML5先行者学习网
text-decoration (文本修饰 )zp8HTML5中文学习网 - HTML5先行者学习网
overflow  超出的部分隐藏zp8HTML5中文学习网 - HTML5先行者学习网
text-overflowzp8HTML5中文学习网 - HTML5先行者学习网

text-overflow文本裁剪  clip裁剪文本时不添加...  ellipsis 裁剪时加...  注意:不换行和over-flow控制zp8HTML5中文学习网 - HTML5先行者学习网

text-shadow 阴影zp8HTML5中文学习网 - HTML5先行者学习网
text-indentzp8HTML5中文学习网 - HTML5先行者学习网

背景属性:zp8HTML5中文学习网 - HTML5先行者学习网
background (缩写形式)zp8HTML5中文学习网 - HTML5先行者学习网
background-color(背景色 )zp8HTML5中文学习网 - HTML5先行者学习网
background-image(背景图 )zp8HTML5中文学习网 - HTML5先行者学习网
background-repeat(背景图重复方式 )zp8HTML5中文学习网 - HTML5先行者学习网
background-position(位置坐标、偏移量)zp8HTML5中文学习网 - HTML5先行者学习网

zp8HTML5中文学习网 - HTML5先行者学习网
列表常用zp8HTML5中文学习网 - HTML5先行者学习网

list-style: none无风格 disc实心圆 circle空心圆 square 实心正方形 decimal 数字zp8HTML5中文学习网 - HTML5先行者学习网

盒子属性:zp8HTML5中文学习网 - HTML5先行者学习网
margin(外边距/边界)    以上方为主 可写1、2、4个值zp8HTML5中文学习网 - HTML5先行者学习网
border(边框) zp8HTML5中文学习网 - HTML5先行者学习网
padding(内边距/填充 )zp8HTML5中文学习网 - HTML5先行者学习网

后可加 -top 等方向zp8HTML5中文学习网 - HTML5先行者学习网

border-radius 边框圆角zp8HTML5中文学习网 - HTML5先行者学习网

box-shadow  阴影zp8HTML5中文学习网 - HTML5先行者学习网

变形效果:transformzp8HTML5中文学习网 - HTML5先行者学习网

transform-origin 指定变换的起点zp8HTML5中文学习网 - HTML5先行者学习网

none无变换zp8HTML5中文学习网 - HTML5先行者学习网

translate(长度值或百分比) translateX translateY 在水平、垂直方向平移zp8HTML5中文学习网 - HTML5先行者学习网

scale(数值)scaleX scaleY 在水平方向、垂直方向或两个方向上缩放zp8HTML5中文学习网 - HTML5先行者学习网

rotate(角度)旋转元素zp8HTML5中文学习网 - HTML5先行者学习网

skew(角度)skewX skewY  在水平方向、垂直方向或两个方向上使元素倾斜一定的角度zp8HTML5中文学习网 - HTML5先行者学习网

matrix 自定义zp8HTML5中文学习网 - HTML5先行者学习网

过渡效果:transitionzp8HTML5中文学习网 - HTML5先行者学习网

transition-property 指定过渡的css属性 默认值 allzp8HTML5中文学习网 - HTML5先行者学习网

transition-duration 完成过渡的时间zp8HTML5中文学习网 - HTML5先行者学习网

transition-timing-function 指定过渡函数  缓动效果默认值ease 等同于(0.25, 0.1, 0.25, 1.0) zp8HTML5中文学习网 - HTML5先行者学习网

transition-delay 指定过渡开始出现的延迟时间zp8HTML5中文学习网 - HTML5先行者学习网

@keyframes:定义一个动画zp8HTML5中文学习网 - HTML5先行者学习网

animationzp8HTML5中文学习网 - HTML5先行者学习网

CSS Code复制内容到剪贴板
  1. <style>             
  2.   .t5{   
  3.             transition: 5s ease-out all;   /*过渡   ease    in 加速   out减速*/  
  4.         }/*transition-delay延迟*/  
  5.         .t5:hover{   
  6.   
  7.             transform: skew(45deg,45deg)   
  8.         }   
  9.         @keyframes key {   
  10.             0%{   
  11.                 background-colorred;width200px;height200px;   
  12.             }   
  13.             25%{   
  14.                 background-color: orange;width100px;height100px;transform: rotate(-90deg);   
  15.             }   
  16.             50%{   
  17.                 background-coloryellow;width60px;height60px;transform: none;   
  18.             }   
  19.             75%{   
  20.                 background-colorgreen;width120px;height120px;transform: none;   
  21.             }   
  22.             100%{   
  23.                 background-colorblue;width200px;height200px;transform: rotate(360deg);   
  24.             }   
  25.         }   
  26.         .kt{   
  27.             animation:key 1s;   
  28.            /* animation-iteration-count: infinite;*//*无限循环*/  
  29.             background-coloryellow;   
  30.             width200px;height200px;   
  31.   
  32.         }   
  33.   
  34.  </style>   
  35.   
  36. <div class="kt t5"></div>  

以上就是小编为大家带来的浅谈html5标签css3的常用样式全部内容了,希望大家多多支持脚本之家~zp8HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助