慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

UFO2015

/* :target p*/ :target p{ background: orange; color: #fff; } /* :target all*/ /* :target { background: orange; color: #fff; } */

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2016-05-08
UFO2015

div:empty { display:block; border: 1px solid green; background:linear-gradient(to left bottom,red,black,green,red,blue,yellow,purple); } /*一个div中设置多个背景*/ .div_m{ width:300px; height:95px; background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg), url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg), url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg); background-position: left top, 100px 0, 200px 0; background-repeat: no-repeat, no-repeat, no-repeat; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2016-05-08
UFO2015

结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2016-05-07
UFO2015

HTML 全局属性 New : HTML5 新属性。属性描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制，移动，或链接，或删除 hiddenNew hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheckNew 检测元素是否拼写错误 style 规定元素的行内样式（inline style） tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息（可在工具提示中显示） translateNew 指定是否一个元素的值在页面载入时是否需要翻译 /* 推荐使用 : title 规定元素的额外信息（可在工具提示中显示）*/

查看全部

0 采集收起来源：CSS3选择器属性选择器
2016-05-07
UFO2015

01：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 02：根选择器 :root ==html 03：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 04：empty 选择没有内容的元素，一个空格都没有。 05：target 用法类似锚点，显示与隐藏。 06: nth-child(n) 里面的n是从1开始，但是（2n+1）表达式，n是从0开始的 07：nth-last-child(n),和上面的一样，但是从最后开始的 08: nth-of-type(n)和上面的区别是定义一个具体的子元素 09: last-of-type 选择最后一个，没有参数括号。 10 :nth-last-of-child(n)选择最后开始。 11:only-child 父元素中只有唯一的那个子元素 12：only-of-type 子元素中唯一个

查看全部

0 采集收起来源：CSS3选择器属性选择器
2018-03-22
UFO2015

<pre> 　　 <h1>CSS3 径向渐变</h1> 径向渐变由它的中心定义。<br> 为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落） <br> <h2>语法:</h2> <code> background: radial-gradient(center, shape size, start-color, ..., last-color); </code> <h2>设置形状:</h2> <code> shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。</code> <h2>不同尺寸大小关键字的使用:</h2> <code> size 参数定义了渐变的大小。它可以是以下四个值：<br> closest-side<br> farthest-side<br> closest-corner<br> farthest-corner<br> </code> <h2>重复的径向渐变:</h2> <code> repeating-radial-gradient() 函数用于重复径向渐变： </code> 　　</pre>

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2018-03-22
UFO2015

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）- 由它们的中心定义 CSS3 径向渐变径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-05-07
UFO2015

HTML 全局属性 New : HTML5 新属性。属性描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制，移动，或链接，或删除 hiddenNew hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheckNew 检测元素是否拼写错误 style 规定元素的行内样式（inline style） tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息（可在工具提示中显示） translateNew 指定是否一个元素的值在页面载入时是否需要翻译

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-05-07
UFO2015

<<css3选择器>> 01：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 02：根选择器 :root ==html 03：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 04：empty 选择没有内容的元素，一个空格都没有。 05：target 用法类似锚点，显示与隐藏。 06: nth-child(n) 里面的n是从1开始，但是（2n+1）表达式，n是从0开始的 07：nth-last-child(n),和上面的一样，但是从最后开始的 08: nth-of-type(n)和上面的区别是定义一个具体的子元素 09: last-of-type 选择最后一个，没有参数括号。 10 :nth-last-of-child(n)选择最后开始。 11:only-child 父元素中只有唯一的那个子元素 12：only-of-type 子元素中唯一个

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2018-03-22
UFO2015

文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff; /*text-shadow: 2px 2px 3px red;*/ text-shadow: 2px 2px 3px rgba(255,0,0,0.8); /*text-shadow: 2px 2px 3px rgba(255,0,0,.8);*/

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-05-07
UFO2015

嵌入字体@font-face @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ } /*font-family: name*/

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
UFO2015

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。 normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-05-07
慕尼黑2897118

出现问题，border-shadow后添加多个阴影一定要用英文的逗号隔开，否则这句话会失效，即没有阴影

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-05-07
UFO2015

结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; } 相关HTML代码： <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <label for="name">Password Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> 演示结果：

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2018-03-22
UFO2015

结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; } 相关HTML代码： <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <label for="name">Password Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> 演示结果：

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22

首页上一页 537 538 539 540 541 542 543 下一页尾页

0/150

提交

取消

开始学习

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

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