html第3天(样式,选择器,内外间距鼠标悬停事件,绝对定位标签浮动)

1. 样式

注意:样式可以通过先后执行的顺序被覆盖的
标签选择器<类选择器<id选择器

1. 样式分为内联样式和外联样式
   内联样式:样式代码直接写在当前的html页面中
   外联样式:样式写在XXX.css文件中,并且在需要使用的页面中,使用Link标签引入
2. 样式:
   样式代码是写在head标签中的style标签里的代码

• id选择器:根据标签中的id属性值,查找对应的标签(查找到一个标签)
  注意:每个标签中的id都是唯一的(可以设置相同的,但是不建议)

id选择器:#id名{样式内容1;样式内容2;}
#d1{
            /*
            html中的每一个标签都相当于是一个盒子,用来存放内容
            */
            width:100px;
            height:40px;
            /*border:设置边框
            三个参数:边框的粗细 实线solid/虚线dashed 边框颜色(可以使用16进制代码)*/
            border:1px solid red;
            /*设置边框的圆角*/
            border-radius: 5px;
            /*设置背景颜色background*/
            background: yellow;
            /*设置字体颜色color*/
            color: blue;
            /*设置字体family:字体   size:字号    weight:加粗*/
            font-family: 微软雅黑;
            font-size:16px;
            font-weight: bold;
            /*水平居中*/
            text-align: center;
            /*垂直居中
            注意:垂直居中的像素值必须和标签设置的高度一致
            */
            line-height: 40px;
        }

• 类选择器:根据标签中的class属性值,查找对应的标签(查找到多个标签)
• 标签选择器:根据标签的名字查找对应的标签(查找多个标签)
• 迭代选择器:查找当前标签的后代标签(查找可以是单个也可以是多个)

内外间距

margin:外边距
padding:内边距
注意:参照物不同,使用的内外边距不同
例如:两个div的距离(实际上是属于两个盒子之间的距离:可以采用外边距)

1. margin四个参数
   margin: 上 右 下 左
   padding: 上 右 下 左

margin: 0 0 20px 0;
padding: 0 0 20px 0;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;

鼠标悬停事件

hover:鼠标放上去的效果

鼠标放上去后变背景颜色和字色
span:hover{
            background: greenyellow;
            color: deepskyblue;
            transition: all 2s;
        }
鼠标放上去后图片旋转 
img:hover{
            border-radius: 50%;
            transform: rotate(360deg) scale(1.2);
            transition: all 2s;
        }

绝对定位和相对定位

绝对定位:标签的距离只跟浏览器有关系(以浏览器为参照物)
position:absolute;
left:
right:
top:
bottom:
相对定位:标签的距离和自己原来的位置有关系(以原来的位置为参照物)
position: relative;
position:absolute;
left:
right:
top:
bottom:

标签浮动

添加的浮动之后,每个标签实际上还是独占一行,只是这些标签之间存在了空间效果(即不在同一个平面中独占一行)
float:left
运用广泛,排版常用

list

去掉小黑点:list-style: none;

超链接

超链接去调下划线:text-decoration:none;