为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。 语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
  • “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
    查看全部
  • ul > li:first-child ul下一级li中第一个li元素
    查看全部
  • ul > li:first-child ul下所有li中第一个li元素
    查看全部
  • 相当于给id选择器添加了一个鼠标点击事件 url指定的标志 须与对应元素ID一致
    查看全部
  • :empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
    查看全部
  • 伪类选择器:not div:not([id="footer"]){ background: orange; }
    查看全部
  • 在本浏览器下,不支持百分数,如果数值超过1了,将会变成1,如果小于0了,将会变成0。另外这个属性只支持背景透明,如果在其他不支持此属性的情况下实现这个效果将会用到一个层半透膜,然后用绝对定位控制到某一个层下。
    查看全部
  • demo
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 【CSS3】【background-clip 裁剪背景图片】 用来将背景图片做适当的裁剪以适应实际需要。 语法:background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从『边框』、或『内填充』,或者『内容区域』向外裁剪背景。 no-clip表示不裁切,和参数border-box显示同样的效果。『backgroud-clip默认值为border-box』
    查看全部
  • 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。
    查看全部
  • 【CSS3】【background-origin 设置背景图片的原始起始位置】 设置元素背景图片的原始起始位置:规定 background-position 属性相对于什么位置来定位。 语法:background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从『边框』,还是『内边距(默认值)』,或者是『内容区域』开始显示。 『注意:如果背景不是no-repeat,这个属性无效,它会从边框开始显示。』
    查看全部
  • 【CSS3】【文本阴影 text-shadow】 text-shadow可以用来设置文本的阴影效果。 语法:text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。 例:text-shadow: 2px 2px 6px blue;
    查看全部
  • 【CSS3】【嵌入字体 @font-face】 @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 例: @font-face { font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); } .demo { font-family: "MOOC Font"; }
    查看全部

举报

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

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