为了账号安全,请及时绑定邮箱和手机立即绑定
  • nth-child(n)
    定位某个父元素的一个或多个特定的子元素
    (n)可以为整数(1,2,3...)当n为整数时不能为0,从1算
    (n)也可以是多项式,多项式里的n可以为0
    例如(n)为(2n)时,表示选中的是2,4,6,8...等等偶数项,一直往后选直到选完


    查看全部
  • :last-child
    用法与:first-child类似
    选择的是元素的最后一个子元素
    例如   div>p:last-child  选择的是div下的子元素p的最后一个


    查看全部
  • :first-child  表示选择父元素下的第一个子元素

    div>p:first-child  表示选择p元素的父元素下的第一个子元素



    查看全部
  • 目标选择器  :target
    用来匹配页面中的url的某个标识符的目标元素
    即例如 <a href="#mm">aaa</a>
           <h1 class="att" id="mm"> pp</h1>
           那么点击aaa时就会触动h1标签
           css中这样定义
           #mm:target{}


    查看全部
  • :empty 伪类选择器
    选择器表示的就是空,用来选择没有任何内容的元素,一个空格都不行


    查看全部
  • 否定选择器  :not
    表示选择除某个元素外所有元素
    例如 
    div:not[id="aa"]{}
    表示的就是div元素下,选择除了id="aa"的其他所有元素


    查看全部
  • 根选择器  :root
    :root选择器匹配元素所在文档的根元素。在HTML文档中,根元素始终是<html>
    所以:root的作用相当于直接选择html
    即   :root{}==html{}
    建议选择使用:root选择器


    查看全部
  • 属性选择器
    E[att^="val"] 元素E中 匹配 属性att以val开头的
    E[att$="val"] 元素E中 匹配 属性att以val结尾的
    E[att*="val"] 元素E中 匹配 属性att包含了val的

     

    查看全部
  • 语法缩写如下:

    background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

    可以把上面的缩写拆解成以下形式:

    background-image:url1,url2,...,urlN;

    background-repeat : repeat1,repeat2,...,repeatN;
    backround-position : position1,position2,...,positionN;
    background-size : size1,size2,...,sizeN;
    background-attachment : attachment1,attachment2,...,attachmentN;
    background-clip : clip1,clip2,...,clipN;
    background-origin : origin1,origin2,...,originN;
    background-color : color;

    注意:

    1. 用逗号隔开每组 background 的缩写值;

    2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

    3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

    4. background-color 只能设置一个。


    查看全部
  • 设置背景图片大小 background-size
    格式 background-size:auto或 长度值 或 百分比 或cover 或contain
    auto:表示默认值 ,不做改变
    长度值:单位px 成对出现 设置宽高
    百分比:0%-100%之间 ,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值
    cover:填满整个区域
    contain:将背景图片等比缩放至某一边紧贴容器边缘为止


    查看全部
  • 背景剪切  background-clip
    格式 background-clip:border-box或padding-box或content-box或no-clip
    border-box:表示从边框开始剪切
    padding-box:表示从内边开始剪切
    content-box:表示从内部区域开始剪切
    no-clip:表示不剪切
    注意:这里剪切不仅剪切了图片,而且剪切了背景,即背景颜色也被剪切


    查看全部
  • 背景图片显示的起始位置  background-origin
    格式 background-origin:border-box或padding-box或content-box
    border-box:表示图片从边框开始显示
    padding-box:表示图片从内边开始显示
    content-box:表示图片从内部区域开始显示
    注意:要想设置成padding-box和content-box两种格式,必须把背景设置为 no-repeat 否则则是默认border-box


    查看全部
  • 文本阴影 text-shadow
    格式 text-shadow:水平偏移距离 垂直偏移距离 阴影模糊程度  阴影颜色,可以用rgba色
    类似的是边框阴影为  box-shadow


    查看全部
  • 设置本地机器没有的字体 @font-face
    格式 @font-face{
              font-family:"字体名称";
              src:url("字体在服务器上的路径");
          }
    将@font-face设置好后,就可以设置某个元素的字体为上述定义的字体


    查看全部
  • 文本溢出省略
    格式
    text-overflow:ellipsis或clip  表示溢出部分什么方式表示,前者是省略号,后者表示直接剪切
    over-flow:hidden   设置溢出部分隐藏
    white-space:nowrap或break-word 设置文本行为  前者是浏览器默认设置,表示控制连续文本换行,后者表示内容将在边界内换行,一般用默认方式


    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!