day08

1 CSS3 选择器

1.1 基本选择器

1.2 层级

• 空格

• >

• + .item+li

• ~ .item~p

1.3 属性选择器

• [attr]

• [attr=value]

• [attr^=value]

• [attr$=value]

• [attr*=value]

• [][][]

1.4 伪类选择器

• :link

• :visited

• :hover

• :active

• :focus

• :first-child .list li:first-child

• :last-child

• :nth-child() 从1开始 odd even

• :nth-last-child() 从1开始

• :only-child li:only-child

• :first-of-type

• :last-of-type

• nth-of-type()

• nth-last-of-type()

• only-of-type

<ul>
    <li></li>
    <li></li>
    <p></p>
    <li>li:nth-of-type(3) </li>
    <li></li>
    <li></li>
</ul>
​
li:nth-of-type(3)   #选择到
li:nth-child(3)   #没有满足条件的元素

1.5 伪元素选择器

• ::before .item::before

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

<div class="nav clearfix"> 
    子元素浮动
    [::after 此处是伪元素创建的]
</div>
​
​
<div class="banner">
</div>

• ::first-letter

• ::first-line

• ::selection

• ::placeholder ::placeholder {color:red} <input placeholder="请输入用户名">

 

2 CSS3 基础

2.1 新增颜色单位

• rgba() 不透明0~1

2.2 新增长度单位

• rem

• vw

• vh

 

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

3.2 布局

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width

3.4 不透明度

opacity: 0~1

 

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

 

3.5 背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

 

3.6 CSS3变换

• transform

  translatex() 
  translatey()
  translate(x, y)
  rotate() 角度 deg
  skewx()  角度deg
  skewy()
  skew(x, y)

• transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

 

3.7 过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)

触发过渡

伪类触发  :hover  :focus  ....
媒体查询   @media
JS

相关属性

transition-property  指定要过渡的属性 用,隔开。默认是 all
transition-duration  过渡持续时间
transition-timing-function  过渡线性效果  默认 ease
transition-delay   过渡延迟
transition：property timing-function duration delay

 

3.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

 

相关CSS属性

animation-name  指定动画的名字
animation-duration  动画的执行时间
animation-timing-function  执行效果速度  
animation-delay   延迟
animation-iteration-count   循环 次数  infinite(无限)
animation-direction:  alternate （正向 反向 交替）\ reverse（反向）
animation-play-state: running / paused
animation 复合属性