css进阶

html5/css3介绍

html5简而言之就是html的升级版

• 语义化标签
  

html代码

header


    
    
    
    
section
    
section

1. header 头部
   标签是用于展示介绍性内容，通常包含一组介绍性的或者是辅助导航的实用元素
2. main 主体
   通常是页面的主体内容区域
3. footer 底部
   表示页面页脚的版权数据，与文档相关的链接，责任声明等信息
4. nav 导航标签
   定义文档或者页面的导航
5. aside 侧边栏
   定义页面的侧边栏内容
6. section 区域块
   定义文档中的节，区域块， section更像接近div的语句，就是在页面开辟一块空间

css3与html5的关系类似于 css与html的关系

css伪元素 ::after/::before

实现红框中的效果

主页

css

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
    background-size: contain;
    vertical-align: top;
    margin-right: 8px;
}

.words {
    font-size: 18px;
    line-height: 24px;
}

有更好的办法实现这种效果，通过伪元素

• 伪元素
  伪元素就是利用css代码在标签内部的前面，或者后面添加一个行内元素，这个行内元素可以理解为span

写法：

/* before */
选择器::before{
  /* 使用空白符号占位 */
  content: '';
}

/* after */
选择器::after{
  /* 使用空白符号占位 */
  content: '';
}

实现案例的代码

主页

伪元素

/* 在span之前添加行内元素 */
span::before {
  content: '';
  /* 将添加的行内元素定位，并设置大小、背景 */
    position: absolute;
    left: 0px;
    width: 24px;
    height: 24px;
    background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
    background-size: contain;
}

css伪类——清除浮动

• 浮动带来的问题
  设置子元素的高度后，父元素会自适应，会被子元素撑起来

会影响父元素兄弟元素的布局

• 清除浮动
  让父元素包住浮动的子元素

这种技术叫做清除浮动
css代码：

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

需要在父元素中加入类名clearfix

    
son-one
    
son-two
    
son-three

总结：哪个元素有浮动，就在哪个元素中添加清除浮动

• 尖括号在html中会报错，所以需要用转义字符来写

小米<小爱老师>
小米<小爱老师>

css伪类——事件伪类

通俗的说就是鼠标移动上去后，字体颜色，背景颜色或者边框中的一种或多种样式发生了变化

• 鼠标移动上去——hover
  先学习鼠标移动上去的效果

要让样式发生变化，需要有一个基础样式

当鼠标移动上去后，对应的地方，样式会发生改变，就是伪类

具体代码：

li:hover{
    background-color: #47A0FC;
    color: white;
}

• active——鼠标点击时

这里的点击是按住不松手
代码：

ul>li:active{
    /* 要改变的效果 */
}

注意： hover一定要在active之前

• 获取焦点后——focus
  focus：获取焦点的伪类，一般是用于具有焦点的元素，比如：input，
  我们可以让input获取到焦点后改变颜色

一个标签可以添加多个hover并且都会生效

但是也与选择器权重有关系


    


div:hover>span{
    background:blue;
}
改变直接子元素的方法

如果是图片发生hover，可以用背景图片

• 如何通过兄弟元素的伪类改变另一个兄弟元素的属性
  显示隐藏元素可以用display: none

css伪类改变兄弟元素的属性

/* 选中获得焦点的 input 元素后面一个 div 元素（input 和 div 是兄弟元素） */
input:focus+div{
    border:1px solid blue;
}

但是被改变的元素要紧邻有伪类效果的元素
比如这种情况就不会生效

• 结合hover和display控制元素的显示和隐藏

    
item
    
item
    
item

css:

ul{
    display:none;
}
.box{
    width: 100px;
    height: 30px;
    background-color: #FF0000;
}
.box:hover+ul{
    display: block;
}

• css伪类——列表伪类
  列表伪类的功能更像是一个选择器，选择某个元素的子元素
  常用的三个：

1. 匹配其父元素的第一个子元素
   :first-child

ul>li:first-child{
    background-color: #3687FC;
    color: #FFFFFF;
}

一定是ul>li

1. 匹配父元素的最后一个元素
   :last-child

将上述的:first-child改成:last-child

1. 匹配父元素的第n个子元素
   :nth-child()
   括号里添加任意数字，1代表first
   比如：

ul>li:nth-child(3){
  background-color: #3687FC;
  color: #FFFFFF;
}

这是第三个子元素

括号里还可以写
odd表示奇数
even表示偶数
n+3表示n取大于等于0的所有项
2n+3同理