复习之HTML(3)

选择器

派生选择器

ul li{}

子元素选择器

p>span {}

联合选择器

html，body{}

通用选择器

*{}

元素属性选择器

input{}

input [type=text]{}       /*设置input标签下所有type=text的样式*/

伪类选择器

a:hover{}    鼠标悬停事件

a:active{}     鼠标点击事件

a:visited{}    访问后的样式

p:after{content:"Hello"}    在p标签后加上Hello

p:before{}  在p标签之前加

@keyframes 制作动画

<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:a 5s infinite;     /*调用动画*/
}

@keyframes   a{      /*制作dongh*/
from {top:0px;}    
         to {top:200px;}
}
</style>

选择文件按钮

<input type="file" />

样式

背景颜色的过渡（渐变）

style="background: linear-gradient(to top right, #000, #f00 50%, #090);width: 100px ;height: 50px;"

display 展示效果

none  不展示

block 以一个块级标签展示 会换行 可设置高宽

inline-block  不换行 可设置高宽

inline     不换行 不可设置高宽

position属性

position: absolute;   绝对定位的元素 相对于 static 定位以外的第一个父元素进行定位。

position: relative;   相对定位

position:fixed;         绝对定位的元素，相对于浏览器窗口进行定位。

visibility: hidden; 元素不可见 但会占用页面位置