html5标签css3的常用样式

<meta name=‘‘>

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

<a href="http://www.baidu.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 普通按钮

分组下拉

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

<style>
  .t5{
            transition: 5s ease-out all;   /*过渡   ease    in 加速   out减速*/
        }/*transition-delay延迟*/
        .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;
           /* animation-iteration-count: infinite;*//*无限循环*/
            background-color: yellow;
            width: 200px;height: 200px;

        }

</style>

<div class="kt t5"></div>
				
时间: 2024-10-20 18:52:13

html5标签css3的常用样式的相关文章

html5和css3的常用参考网

当我们使用HTML5, CSS3,甚至Bootstrap设计网站的时候,有些方面是必须考虑的,比如字体大小,标题大小,行间距,每行字数,字体,颜色,背景图片和文字的搭 配,图标,留白和布局......所有的这些,都不是随随便便的,讲究一定的原则.而这些原则通常我们为参考一些网站.下面就列举这些网站. HTML5和CSS3常用参考网站? 浏览器渲染符合HTML5标准:http://necolas.github.io/normalize.css/ Google字体:ttps://www.google

让 IE9 以下的浏览器支持HTML5标签 和 CSS3选择器

做项目的很多时候,想用 HTML5  CSS3 新的技术,又考虑到低版本的浏览器不支持这些标签和属性,就让人烦恼,不过问题的出现,就有问题的解决方案,那么这里就介绍用 js 插件来让低版本浏览器也兼容吧... 让浏览器支持HTML5标签插件下载地址: http://code.google.com/p/html5shiv/ 让浏览器支持CSS3选择器插件下载地址: http://www.jb51.net/jiaoben/24032.html 使用方法: 下载插件,在下载到的文件中找到下面标着红颜色

[js开源组件开发]html5标签audio的样式更改

html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下: 作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存

小K的H5之旅-HTML5与CSS3部分新属性浅见

一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}:可以全部省略标签的元素 {html,head,body}   >>>尽量不用!! 具有boolean值的属性:属性名=属性值 >>> 可以只写属性名 属性值的引号可省略:具有多个属性值的不能省 3.HTML新增结构标签(变形的

HTML5与CSS3实现动态网页

课程目录: 步骤1: 初识HTML5本阶段内容主要涵盖HTML5新增.删除标签.标签属性变化以及HTML5布局知识.通过本阶段学习,大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器,熟练运用HTML5的语义化标签进行静态网页的开发.1.HTML5标签变化 HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML52.HTML5网页布局 传统布局与HTML5网页布局的区别和意义,通过案例讲解如何使用HTML5搭建网页3.HTML5属性变化 了解这些属性带来的好处,加深对

HTML5标签不兼容ie怎么办?

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <header>定义页面或区段的头部:<nav>定义页面或区段的导航区域:<section>页面的逻辑区域或内容组合:<article>定义正文或一篇完整的内容:<aside>定义补充或相关内容:<footer>定义页面或区段的尾部:使用他们能让代码语

使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物

探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包,要求 XHTML 序列化,还增加了补充性的 XML 词汇,例如 MathML 和 SVG.EPUB 3 提供了多种开发先进的原生数字出版物的选项.在这篇文章中,您将学习如何利用 EPUB 3 中的部分新特性来制作具有版式丰富的页面. 0 评论: Liza Daly, 软件工程师和企业家, Safa

Web前端攻城狮培养计划之HTML5与CSS3实现动态网页

步骤1: 初识HTML5本阶段内容主要涵盖HTML5新增.删除标签.标签属性变化以及HTML5布局知识.通过本阶段学习,大家可以运用HTML5标签轻松实现网页音乐播放器和视频播放器,熟练运用HTML5的语义化标签进行静态网页的开发. 第1课 HTML5标签变化HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5 第2课 HTML5网页布局传统布局与HTML5网页布局的区别和意义,通过案例讲解如何使用HTML5搭建网页 第3课 HTML5属性变化了解这些属性带来的好处,加深对

(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变形,动画效果等.HTML5的介绍,常用的元素和属性,表单相关元素和属性,CSS3新添加的选择器,CSS3新的属性. 了解HTML5,和现在主流的浏览器的,与基本语法. 在使用HTML5之前,w3c希望用XHTML来替代HTML,因为HTML与XHTML相比,XHTML是一种更加严格,更加规范的HT