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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • “:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
    查看全部
  • :enabled比如输入框密码框复选框等。在默认情况之下这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
    查看全部
  • :only-child 筛选出只有一个唯一的子元素进行调整。
    查看全部
  • odd表示奇数,even表示偶数。 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。
    查看全部
  • :first-of-type类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 如:.wrapper > p:first-of-type { background: orange; }
    查看全部
  • :nth-child(n) 其中第一个n不用管,只要改后面括号里的n就能改变选择的项了。括号里改成2n+1就能选择到奇数了。
    查看全部
  • 和之前的fist-child类似,用于批量处理后,希望单独处理的。 ul>li:last-child{background:blue;}
    查看全部
  • target选择器很方便,适合各种调用操作。 :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。
    查看全部
  • 这一章讲的是结构性伪类选择器。 :not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。
    查看全部
  • 结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。 示例演示: 通过“:root”选择器设置背景颜色 HTML代码: <div>:root选择器的演示</div> CSS代码: :root { background:orange; } “:root”选择器等同于<html>元素,简单点说: :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。
    查看全部
  • 非常方便的技能,也比较简单,用来精确选择,改变样式等。温故而知新! 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
    查看全部
  • 总算做好了,就那个3 和4感觉很生疏,但是理解了后也不难,需要掌握的东西。同时那个HOVER加上旋转的特效很新颖很好看,交互感觉很不错的。
    查看全部
  • 大量数据的时候用上缩写: multiple backgrounds 多重背景,也就是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 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。 提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
    查看全部
  • background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box | padding-box | content-box | no-clip
    查看全部

举报

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

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