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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • :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; }
    查看全部
  • :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
    查看全部
  • a[class^=col]{ background-color:red; } a[href$=doc]{ background-color:green; } a[title*=box]{ background-color:blue; } /* ^以xxx元素开头的 $以xxx元素结尾的 *包含任意xxx元素的 */
    查看全部
  • background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
  • 设置背景图片的大小,以长度值或百分比显示,还可以通过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 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • background-origin<br> 设置元素背景图片的原始起始位置。<br> <br> 语法: background-origin : border-box | padding-box | content-box;<br> 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
    查看全部
  • 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
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。
    查看全部
  • text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
    查看全部
  • 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
    查看全部
  • background-image:linear-gradient(to top left,red,blue,yellow,pink,green);
    查看全部
  • 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之间,不可为负值。
    查看全部
  • 1.设置背景颜色的属性是background-color:rgba(255,255,255,0.5); 其中第4个参数范围0-1,透明度与值成反比,即值越大透明度越低
    查看全部
  • 1.为边框加图片背景的属性是border-image,参数:url(图片路径) 切割图片的宽度 图片延伸方式 2.图片延伸方式,当为repeat时,重复中间的图片,切割图片的宽度<70时,多余的部分被切掉;为round时,重复中间的图片,切割图片的宽度<70时,多余的部分不会被切割,但会被挤压;为stretch时,图片不重复,中间的图片会拉伸
    查看全部

举报

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

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