1、具有交互属性的按钮18.私有样式当前页面独立使用的样式,不具备公用性19.水平(垂直)居中在页面中的某个元素处于父级的上下或左右的相同距离20.标准头(尾)定义相同的页面头或尾元素集合二.文本格式化1. 段落:p2. 斜体:address(联系信息)em(强调)i(突出不同)cite(引用)dfn(首次定义术语)3. 粗体:strong(重要)b(提醒)4. 图片块:figure5. 引述文段,段落缩进:blockquote6. 背景颜色:mark7. 虚线下划线:abbr8. 上标下标:sub/sup9. 下划线:ins10. 删除线:del(标记已删除内容)s(标记不准确内容)11. 等宽
2、字体:code12. 预格式化:pre13. 字号减小,表注释:small14. 时间:time15. 换行:br16. html5定义区块:header nav article section aside footer div span三.表单表格1. .2. 表单元素的组织:/fieldset3. 创建各种框: 注:textpassword/url/tel/email Id:为了让对应的标签识别,添加CSS Name:为了让服务器和脚本识别,通常和id设为一样 Size:文本框大小 Maxlength:能输入的最大字符数 Pattern:正则表达式4. 添加标签:label for=idn
3、ame5. 单(多)选按钮:input tupe=radio/checkboxaaabeijing北京bbbshanghai上海chengdu成都size:选择框的高度 multiple:允许多选 selected:默认选择 用9. 创建提交按钮:submit点此提交 创建带图像的提交按钮:button type=imageimg src=1.jpg点击这里 创建图像按钮: alt=提交 src= Submitreset重置10. 文本区域:textarea name=30 rows= cols=请在此输入字符11. 表格 :tablecaption/captiontheadtrth scop
4、e=rowgroup.col/tr/theadtbodyrowtd rowspan=3/tdtd/tbody/table四.文本格式化1. font:(斜体 粗体 小型大写字母) 字体大小(必有) 行距 字体集(必有);2. 文本背景: background:#foc url(1.jpg)repeat-x scroll 0 0;3. 字间距:word-spacing:12px;4. 字偶距:letter-spacing:5. 缩进增加:text-indent:6. 小型大写字母: font-variant:small-caps;7. 文本对齐:text-align:left;适用于block,
5、inline-block8. 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9. 文本上的线:text-decoraion:underline/overline/line-through;11. 空格:white-space:pre(显示所有空格回车)/nowrap(非断行空格);12. h316px; h512px; verdana,Geneva,sans-serif;13. 列表属性: lilist-style:url(1.jpg) inside square;五.CSS布局1. width:不包括
6、padding,border,margin;max-width设置外围限制;2. 浮动:float:left; 清除浮动:clear:both;3. 设置边框: border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4. 使元素对齐:vertical-align:baseline/middle/text-bottom.5. 显示:display:black/inline/inline-block;6. 显示:visibility:visible/hiddle;7. 相对定位:position:relative; top:5px; 相对于该元素的原始位
7、置8. 绝对定位:absolute; 相对于body或离他最近定位的祖先元素9. 三维位置:z-index:50; 越大的在最上面10. 厂商前缀:-webkit-(safari) moz-(firefox) ms-(IE) o-(opera)11. 创建圆角: -moz-border-radius-topleft:50px;-webkit-border-top-left-radius:border-top-left-radius: (左上角,角的半径是50px)border-radius:(所有角简写)12. 创建椭圆角: border-radius:40px/20px; (x半径/y半径)
8、13. 创建圆形: 50px为元素半径大小14. 文本加阴影:text-shadow: 2px 5px 5px #999; x/y/模糊半径15. 元素加阴影:(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影);16. 多重背景:background:#000 url(1.png) 50% 102% no-repeat,#222 url(2.png) 12px -150px repeat-x;17. 透明度: opacity:.5; 01 透明不透明18. 渐变背景:linear-grad
9、ient(left,#000,#999); (left :渐变线沿逆时针方向转至水平线的角度)六.html5视频音频1. html5支持3种视频:.ogg/.ogv .mp4/.m4v .webm2. 添加视频:video src=1.webm/video 视频属性:src autoplay controls muted loop poster width height preload3. 为视频添加多个来源:video controls=controlssource src=1.mp4 type=video/mp4video/webmobject type=application/x-shockwave-flash data=1.swf?videourl=1.mp4&control=true /嵌入Flash动画a href=下载该视频4. html5支持5中音频:.ogg .mp3 .wav .aac .mp45.添加音频:audio src=1.ogg/audio 音频属性:src autoplay controls muted loop preload 。多个来源同video。七.一些约定 我们结合常用的一些命名习惯,再结合CSS的实际应用,整理出一些较好的命名习惯。 1.样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符;
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1