慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

凤仪

::selection选择器是指设置在网页中当鼠标选中文字时，文字的颜色和背景色 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的. 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。示例演示: 通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。 HTML代码： <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p> CSS代码： ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } 注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2018-03-22
Meelu

列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明：属性值属性值说明 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) 例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为： column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
虹之翼

颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。代码示例： background-color:rgba(100,120,60,0.5);

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-03-23
凤仪

only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。示例演示通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。 HTML代码： <div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div> CSS代码： .wrapper > div:only-of-type { background: orange; }

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2018-03-22
Meelu

列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
虹之翼

#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-03-23
凤仪

only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码： .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }

查看全部

0 采集收起来源：CSS3 only-child选择器
2018-03-22
Meelu

多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2018-03-22
凤仪

nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。 *****是指将倒数第几个某种类型的元素选出来示例演示通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。 HTML代码： <div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p> </div> CSS代码： .wrapper > p:nth-last-of-type(3){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2018-03-22
Meelu

多列布局——column-width column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length> 取值说明属性值说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length> 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2018-03-22
虹之翼

阴影 box-shadow（二） 1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; } Y轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; }

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-03-23
凤仪

last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。示例演示通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色（提示：这个段落不是“div.wrapper”容器的最后一个子元素）。 HTML代码： <div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <div>我是第一个Div元素</div> <div>我是第二个Div元素</div> <div>我是第三个Div元素</div> </div> CSS代码： .wrapper > p:last-of-type{ background: orange; }

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2018-03-22
凤仪

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
虹之翼

阴影 box-shadow（一） box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍：注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。为元素设置外阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; } 为元素设置内阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 添加多个阴影：以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-03-23
凤仪

first-of-type选择器 :first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型, 其主要用来定位一个父元素下的某个类型的第一个子元素。示例演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 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

首页上一页 1042 1043 1044 1045 1046 1047 1048 下一页尾页

0/150

提交

取消

开始学习

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

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