HTML知识汇总集合
2016-01-06 15:50
381 查看
1.CSS样式引用:
(1)引用外部样式表:
<link rel="stylesheet" type="text/css" herf="mystyle.css">
(2)引用内部样式表
<style type="text/css"> body{background-color:red} p{margin-left:20px} </style>
(3)内联样式表:
<p style="color:red">
2.选择器使用:
(1)选择器分组:
h1,h2,h3,h4,h5{color:red}
通配符:*{}
(2)派生选择器:通过依据元素在其位置的上下文关系来定义样式
li strong{ color:red; }
(3)id选择器:可以为标有id的HTML元素指定特定的样式,id选择器以“#”来定义,id名不能出现重复,不能结合使用,当使用js时候,需要用到id
id选择器与派生选择器结合使用 #pid{ color:red; } #pid a{ color:red; }
(4)类选择器:类选择器以一个点显示,class也可以和派生选择器结合使用,类名可以多个相同
#pclass{ color:red; } #pclass a{ color:red; }
结合元素表情使用:a.pclass{}
多类选择器:.pclass.bclass{}
<p class="p1">p1</p> <p class="p2">p2</p> <p class="p1 p2">p3</p>//同时含有p1 p1的特点 .p1{color:red} .p2{font-size:30px} .p1.p2{font-style:intalic}//除同时含有p1 p2的效果外,也给p3设置自己的斜体
(5)属性选择器:[]title{}
1.除了选择拥有某些元素,还可以进一步缩小选择范围,只选择有特定属性的元素,例如:[href]{} 2.根据属性和属性值必须完全匹配,例如:[href="http:www.baidu.com"]{} 3.根据部分属性值选择 例如:<p title="title">hello</p>//这个也有效果 <p title="tit">hello</p>//这个也有效果 <p title="ti">hello</p> <style> [title~="tit"]{ font-size:50px; } </style>
(6)后代选择器:可以选择作为某些元素后代的元素
<p>this is my<strong>web<i>hello</i>ha </strong>page</p> p strong{color:red;} p strong i{font-size:23px} p i{font-size:23px}//可以通过隔代选择
(7)子元素选择器:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素
<p>this is my<strong>web<i>hello</i>ha </strong>page</p> p>strong{color:red;} strong>i{font-size:23px} p>i{font-size:23px}//这是错误的,不能隔代选择 p>strong>i{font-size:23px}//能通过多代一起选择
(8)相邻兄弟选择器:可选择紧接在另一个元素后的,且二者有相同父元素
<ul> <li>item</li>//这个元素没有效果 <li>item2</li>//这个元素有效果 <li>item3</li>//这个元素有效果 </ul> li+li{ color:red; }
3.背景、文本、链接、字体、列表、表格、轮廓
(1)背景
background-attachment 背景图片是否固定或随着页面的其他部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置背景图片起始显示的位置 background-size 规定背景图片的尺寸 background-origin 规定背景图片的定位区域 background-clip 规定背景的绘制区域 background-repeat 设置背景图片是否重复及如何重复 body{ background-image:url("bg.jpg"); background-repeat:no-repeat; background-position: right top; background-color:red; background-attachment: fixed; background-size:100px 100px; }
(2)文本
color 文本颜色 direction 文本方向 line-height 行高 letter-spacing 字符间距 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indet 缩进元素中文本的首行 text-transform 元素中的字母 unicode-bidi 设置文本方向 while-space 元素中空白的处理方式 word-spacing 字间距 text-shadow 向文本添加阴影 word-wrap 规定文本的换行规则 body{ color:red; text-align: center; word-wrap:normal //可用于内容多时自动换行 text-indet:2em; text-transform: capitalize; text-shadow: 5px 2px 5 #f00// 5px表示阴影距文本左边的距离 2px表示阴影距文本上边的距离 5表示阴影清晰度 #f00表示阴影颜色 padding-left:2em;//em字符单位 }
(3)链接,四种状态:a:link 普通、未被访问的链接,a:visited 用户已访问的链接,a:hover 鼠标指针位于链接的上方,a:active 链接被点击的时刻
text-decoration 用于去除链接的下划线 a:link{ color:#ff0000 text-decoration:none } a:visited { color:#00ff00 } a:visited { color:#0000ff } a:active { color:#f0f000 }
(4)字体
font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体的风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 字体的粗细 p{ font-size:40px; font-family:fantasy; } @font-face{ font-family:myfont; src:url("www.baidu.com") } div{ font-size:40px; font-family:myfont; }
(5)列表
list-style 简写列表项 list-style-image 列表项图片 list-style-position 列表标志位置(inside 往里边缘靠近,outside往外边缘靠近) list-style-type 列表类型
(6)表格
#tb{ border:1px solid red;//边框宽度以及边框颜色 border-collapse:collapse;//合并边框 }
(7)轮廓
outline 设置轮廓属性 outline-color 设置轮廓颜色 outline-style 设置轮廓样式 outline-width 设置轮廓的宽度
4.边框
broader-style 边框样式 broader-top-style 顶部边框样式 broader-left-style 边框左边样式 broader-right-style 边框右边样式 broader-bottom-style 边框底部样式 broader-width 边框宽度 broader-top-width 边框顶部宽度 broader-left-width 边框左边宽度 broader-right-width 边框右边宽度 broader-bottom-width 边框底部宽度 broader-color 边框样色 broader-top-color 边框顶部颜色 broader-left-color 边框左边颜色 broader-right-color 边框右边颜色 broader-bottom-color 边框底部颜色 broader-radius 圆角边框 box-shadow 边框阴影 border-image 边框图片
5.定位
position 把元素放在一个静态的(static)(偏移量及z-index属性无效)、相对的(relative)(占有位置,依次向下排序)、绝对的(absolute)(不占位置,两者重叠)、或固定的位置中(fixed) top 元素向上的偏移量 left 元素向左的偏移量 right 元素向右的偏移量 bottom 元素向下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素垂直对齐方式 z-index 设置元素的堆叠顺序
6.浮动
float 设置浮动(left 元素向左浮动,right 元素向右浮动, none 元素不浮动,inherit 从父级继承浮动属性) clear 清除浮动(left、right 去掉元素向左、向右浮动,both左右浮动均去掉,inherit 从父级继承的浮动清除)
7.对齐操作
(1)使用margin属性进行水平对齐 .div{ margin-left:auto; margin-right:auto;//左右都对等分配,表现形式居中效果 } .div{ margin:100px auto;//第一参数表示上下,第二参数表示左右 } (2)使用position属性进行左右对齐,设置布局方式(绝对,静态,相对,固定) .div{ position:absolute; right:0;//居右 } (3)使用float属性进行左右对齐 .div{ float:left;// }
8.尺寸的操作:
height 设置元素高度 line-height 设置行高 max-height 设置元素最大高度 max-width 设置元素最大宽度 min-width 设置元素最小宽度 min-height 设置元素最小高度 width 设置元素宽度
9.分类操作
clear 设置一个元素的侧面是否 a9dc 允许其他的浮动元素 cursor 规定当指向某元素之上时显示的指针类型,用于当鼠标放在元素上鼠标显示的类型 display 设置是否如何显示元素,多用于列表项,改变列表显示方向 (display:inline 列表显示一行) float 定义元素在哪个方向浮动 position 把元素放在一个静态的,相对的,绝对的,固定的位置 visibility 设置元素是否可见或不可见
10.导航栏
(1)垂直导航栏 (2)水平导航栏display:inline
11.图片
opacity 设置图片透明度 0~1
12.2D、3D转换
(1)2D转换方法: translate() 移动(transform:translate(100px,100px))(-webkit-transform:translate(100px,100px)//增加safari chrome支持)(-ms-transform:translate(100px,100px)//增加IE浏览器支持)(-o-transform:translate(100px,100px)//增加欧鹏浏览器支持)(-moz-transform:translate(100px,100px)//增加火狐浏览器支持) rotate() 旋转(transform:rotate(45deg))(-webkit-transform:transform:rotate(45deg)//增加safari chrome支持)(-ms-transform:transform:rotate(45deg)//增加IE浏览器支持)(-o-transform:transform:rotate(45deg)//增加欧鹏浏览器支持)(-moz-transform:transform:rotate(45deg)//增加火狐浏览器支持) scale() 缩放(transform:scale(1,2))(-webkit-transform:(transform:scale(1,2))//增加safari chrome支持)(-ms-transform:(transform:scale(1,2))//增加IE浏览器支持)(-o-transform:(transform:scale(1,2))//增加欧鹏浏览器支持)(-moz-transform:(transform:scale(1,2))//增加火狐浏览器支持) skew() 倾斜(transform:skew(50deg,50deg))(-webkit-transform:(transform:skew(50deg,50deg))//增加safari chrome支持)(-ms-transform:transform:skew(50deg,50deg)//增加IE浏览器支持)(-o-transform:transform:skew(50deg,50deg)//增加欧鹏浏 matrix() 矩阵 (2)3D转换方法 rotateX() 转换X(transform:rotateX(120dex))(-webkit-transform:transform:rotateX(120dex))//增加safari chrome支持)(-ms-transform:transform:rotateX(120dex)//增加IE浏览器支持)(-o-transform:transform:transform:rotateX(120dex)//增加欧鹏浏 rotateY() 同上
13.动画过渡(元素从一种样式转换成另一种样式)
transition 设置四个过渡属性 transition-property 过渡的名称 transition-duration 过渡效果花费的时间 transition-timing-function 过渡效果的时间曲线 transition-delay 过渡效果开始延时时间 div{ width:100px; height:100px; background-color:blue; -webkit-transition:width 2s,height 2s,-webkit-transform 2s;//简写 或如transition-delay:2s transiton:width 2s,height 2s,transform 2s; } div:hover{ width:200px; height:200px; transform:rotate(360deg); -webkit-transfrom:rotate(360deg); }
14.CSS2d动画效果(需要遵循@keyframes规则:规定动画的时长,规定动画的名称)
div{ width:100px; height:100px; background-color:red; position:relative; animation:anim 5s infinite alternate;//infinite alternate设置不断执行 -webkit-animation:anim 5s infinite alternate; } @keyframes anim{ 0%{background:red;left:0px;top:0px;} 25%{background:blue;left:200px;top:0px;} 50%{background:#ccffcc;left:200px;top:200px;} 75%{background:#00ffff;left:0px;top:200px;} 0%{background:red;left:0px;top:0px;} } @-webkit-keyframes anim{ 0%{background:red;left:0px;top:0px;} 25%{background:blue;left:200px;top:0px;} 50%{background:#ccffcc;left:200px;top:200px;} 75%{background:#00ffff;left:0px;top:200px;} 0%{background:red;left:0px;top:0px;} }
15.多列
column-count 多列数量 column-gap 多列间隔的距离 column-rule 多列间隔的线以及线的颜色 div{ column-count:4; -webkit-column-count:4; column-gap:30px; -webkit-column-gap:30px; column-rule:5px outset #ff0000; -webkit-column-rule:5px outset #ff0000; }
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签