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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • shasha_0701
    伪元素和 CSS 类 伪元素可以与 CSS 类配合使用： p.article:first-letter { color: #FF0000; } <p class="article">This is a paragraph in an article。</p> 上面的例子会使所有 class 为 article 的段落的首字母变为红色。 多重伪元素 可以结合多个伪元素来使用。 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示： p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } CSS2 - :before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。 下面的例子在每个 <h1> 元素前面插入一幅图片： h1:before { content:url(logo.gif); } CSS2 - :after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容。 下面的例子在每个 <h1> 元素后面插入一幅图片： h1:after { content:url(logo.gif); }
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2018-03-22

  • shasha_0701
    CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的语法： selector:pseudo-element {property:value;} CSS 类也可以与伪元素配合使用： selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化： 实例 p:first-line { color:#ff0000; font-variant:small-caps; } 注释："first-line" 伪元素只能用于块级元素。 注释：下面的属性可应用于 "first-line" 伪元素： •font •color •background •word-spacing •letter-spacing •text-decoration •vertical-align •text-transform •line-height •clear :first-letter 伪元素 "first-letter" 伪元素用于向文本的首字母设置特殊样式： p:first-letter { color:#ff0000; font-size:xx-large; } 注释："first-letter" 伪元素只能用于块级元素。 注释：下面的属性可应用于 "first-letter" 伪元素： •font •color •background •margin •padding •border •text-decoration •vertical-align (仅当 float 为 none 时) •text-transform •line-height •float •clear
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2018-03-22

  • yangyuan
    “:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 简单的说就是一个DIV里有很多个DIV，而只有一个P元素，选择器就可以选中P元素进行设定
    查看全部
    0 采集 收起 来源：CSS3 only-of-type选择器

    2016-03-15

  • yangyuan
    “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
    查看全部
    0 采集 收起 来源：CSS3 only-child选择器

    2016-03-15

  • yangyuan
    “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
    查看全部
    0 采集 收起 来源：CSS3 nth-last-of-type(n)选择器

    2016-03-15

  • yangyuan
    “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
    查看全部
    0 采集 收起 来源：CSS3 last-of-type选择器

    2016-03-15

  • yangyuan
    “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
    查看全部
    0 采集 收起 来源：CSS3 nth-of-type(n)选择器

    2016-03-15

  • 一支猫的烦恼
    由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。 脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
    0 采集 收起 来源：Responsive设计——meta标签

    2018-03-22

  • yangyuan
    “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 HTML代码： <div class="wrapper"> <div>我是一个块元素，我是.wrapper的第一个子元素</div> <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p> <p>我是一个段落元素</p> <div>我是一个块元素</div> </div> CSS代码： .wrapper { width: 500px; margin: 20px auto; padding: 10px; border: 1px solid #ccc; color: #fff; } .wrapper > div { background: green; } .wrapper > p { background: blue; } /*我要改变第一个段落的背景为橙色*/ .wrapper > p:first-of-type { background: orange; }
    查看全部
    0 采集 收起 来源：CSS3 first-of-type选择器

    2018-03-22

  • yangyuan
    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-last-child(n)

    2016-03-15

  • 一支猫的烦恼
    max-width是小于或等于指定的宽度时，样式生效。 min-width是大于或等于指定的宽度时，样式生效。
    查看全部
    0 采集 收起 来源：Media Queries使用方法

    2016-03-15

  • Leadn
    冒号前不能有空格 form[type="text']:disabled{}
    查看全部
    0 采集 收起 来源：CSS3选择器 :disabled选择器

    2018-03-22

  • qq_深蓝的记忆_0
    -webkit chrome safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2016-03-14

  • 微积分2016
    在Web中插入内容可以通过CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
    查看全部
    0 采集 收起 来源：CSS生成内容

    2016-03-14

  • 微积分2016
    外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
    查看全部
    0 采集 收起 来源：CSS3外轮廓属性

    2016-03-14

首页上一页601602603604605606607下一页尾页

举报

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

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

查看已购买的课程