慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

荆棘王冠lily3220076

last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。示例演示通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色改变某个容器的一个元素的最后一个子元素的属性

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2016-06-12
荆棘王冠lily3220076

nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。示例演示通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码： <div class="wrapper"> <div>我是一个Div元素</div> <p>我是一个段落元素</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> </div> CSS代码： .wrapper > p:nth-of-type(2n){ background: orange; } 指定某些行数并改变其相关属性

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2018-03-22
荆棘王冠lily3220076

first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。示例演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 /*我要改变第一个段落的背景为橙色*/ .wrapper > p:first-of-type { background: orange; }改变某个div里的第一个块级或者段落元素的属性

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22
荆棘王冠lily3220076

结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。案例演示选择列表中倒数第五个列表项，将其背景设置为橙色。 html代码： <ol> <li>item</li> </ol> CSS代码： ol > li:nth-last-child(5){ background: orange; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-last-child(n)
2018-03-22
blovetu

box-sizing盒子模型 box-sizing:content-box; element width/height=border+padding+cotent width/height; box-sizing:border-box; element width/height=element width/height-border-padding; box-sizing:inherit; 继承父元素的盒模型模式

查看全部

0 采集收起来源：CSS3 盒子模型
2016-06-12
闽洛汐

::before和::after主要用来给元素的前面或后面插入内容，这两个长和"content"配合使用，使用的场景最多就是清楚浮动

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
闽洛汐

":read-write"选择器用来指定元素处于非只读状态的样式; 火狐":-moz-read-write"

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2018-03-22
闽洛汐

:-moz-read-only :read-only

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2016-06-12
闽洛汐

IE9+、Opera、Google Chrome以及Safari中支持::selection选择器； Firefox支持替代的::-moz-selection

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-06-12
snownothing

border-image:url(border.png) 70 70 70 70 repeat 图片路径切割图片的宽度图片延伸方式 round(平铺)repeat(重复)stretch(拉伸)

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-06-12
qq_我想我是太过依赖_03489450

一出文本内容用省略号显示

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-06-11
木馨66

font-family：的用法，中文字体需加引号，英文字体可以不加，如果英文字体中间有空格也要加引号，避免出现兼容性问题 -webkit：chrome和safari -moz：firefox -ms：IE -o：opera

查看全部

0 采集收起来源：什么是CSS3？
2016-06-11
慕小主

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-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; 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
慕小主

background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
慕小主

background-clip 用来将背景图片做适当的裁剪以适应实际需要。语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-06-11

首页上一页 500 501 502 503 504 505 506 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果