html5,标签,css3<meta name=''> name:有如下6个值: application-name:文档名或者应用名,整个文档只能包含一个值。 author:文档作者 description:文档描述 generator:生成文档的程序。 keywords:网页关键字,用英文逗号分隔。 <a href="http://www.jb51.net">wanshiok.com</a>
href:路径 <img src="../img/a.jpg" alt="此图无法显示" border="1px solid red" width="400" height="250"/> src:图片路径 <table>标签的属性 Border 边框 Cellspacing 表格外边距 Cellpadding 表格内边距 Align 位置 Bgcolor:背景色 Background:背景图片 Bordercolor:边框颜色 table中 <tr></tr> <td colspan="2"></td> colspan 跨2列 rowspan 跨 行 <input type=""> type值 text 文本 password 密码 radio 单选 checkbox 多选 reset 重置 file 文件上传 submit 提交表单 image 图形提交 button 普通按钮 分组下拉 XML/HTML Code复制内容到剪贴板 - <select name="city" id="city">
- <optgroup label="山东">
- <option value="yt">烟台</option>
- <option value="qd">青岛</option>
- <option value="wh">威海</option>
- </optgroup>
- <optgroup label="北京">
- <option value="bj">bj</option>
- <option value="tam">tam</option>
- <option value="zong">zong</option>
- </optgroup>
- </select>
文字区域textarea
XML/HTML Code复制内容到剪贴板 - <textarea name="textarea" id="textarea" cols="30" rows="10" readonly="readonly"
- disabled="disabled">
- 1</textarea>
cols 宽度 rows 高度 readonly 只读
css样式 字体、字号: font(缩写形式) font-weight(粗细) 正常(normal) 粗体(bold) 斜体(italic) font-size(大小) font-family(字体系列) font-style(字体样式) 字体颜色: color opacity (透明度 css3) 行距、对齐等: line-height (行高) text-align (对齐) letter-spacing (字符间距) text-decoration (文本修饰 ) overflow 超出的部分隐藏 text-overflow text-overflow文本裁剪 clip裁剪文本时不添加... ellipsis 裁剪时加... 注意:不换行和over-flow控制 text-shadow 阴影 text-indent 背景属性: background (缩写形式) background-color(背景色 ) background-image(背景图 ) background-repeat(背景图重复方式 ) background-position(位置坐标、偏移量) 列表常用
list-style: none无风格 disc实心圆 circle空心圆 square 实心正方形 decimal 数字 盒子属性: margin(外边距/边界) 以上方为主 可写1、2、4个值 border(边框) padding(内边距/填充 ) 后可加 -top 等方向 border-radius 边框圆角 box-shadow 阴影 变形效果:transform transform-origin 指定变换的起点 none无变换 translate(长度值或百分比) translateX translateY 在水平、垂直方向平移 scale(数值)scaleX scaleY 在水平方向、垂直方向或两个方向上缩放 rotate(角度)旋转元素 skew(角度)skewX skewY 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度 matrix 自定义 过渡效果:transition transition-property 指定过渡的css属性 默认值 all transition-duration 完成过渡的时间 transition-timing-function 指定过渡函数 缓动效果默认值ease 等同于(0.25, 0.1, 0.25, 1.0) transition-delay 指定过渡开始出现的延迟时间 @keyframes:定义一个动画 animation CSS Code复制内容到剪贴板 - <style>
- .t5{
- transition: 5s ease-out all;
- }
- .t5:hover{
-
- transform: skew(45deg,45deg)
- }
- @keyframes key {
- 0%{
- background-color: red;width: 200px;height: 200px;
- }
- 25%{
- background-color: orange;width: 100px;height: 100px;transform: rotate(-90deg);
- }
- 50%{
- background-color: yellow;width: 60px;height: 60px;transform: none;
- }
- 75%{
- background-color: green;width: 120px;height: 120px;transform: none;
- }
- 100%{
- background-color: blue;width: 200px;height: 200px;transform: rotate(360deg);
- }
- }
- .kt{
- animation:key 1s;
-
- background-color: yellow;
- width: 200px;height: 200px;
-
- }
-
- </style>
-
- <div class="kt t5"></div>
以上就是小编为大家带来的浅谈html5标签css3的常用样式全部内容了,希望大家多多支持wanshiok.com~ html5,标签,css3
|