HTML知识汇总集合

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           设置一个元素的侧面是否允许其他的浮动元素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;}