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