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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。 提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
    查看全部
  • 结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;}
    查看全部
  • background-origin 设置元素背景图片的原始起始位置。 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    查看全部
  • 文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
    查看全部
  • 1.嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 2.语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
  • 1.text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。text-overflow:clip(剪切)|ellipsis(表示显示省略标记) 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 2.word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。 word-wrap:normal(表示控制连续文本换行)|break-word(表示内容将在边界换行) normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
    查看全部
  • >是子元素选择器,空格是后代选择器,他们的区别: 后代选择器:匹配父子关系和祖先-后代关系 子元素选择器:匹配父子关系 就是>(子元素选择器)只是匹配到他下面的一层,而不是多层
    查看全部
  • 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
    查看全部
  • 1.CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial); 2.linear-gradient(to bottom, #fff, #999) 渐变类型 渐变方向(也可以用度数) 表示颜色的起始点和结束点,可以有两至多个色值 3.参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: 角度 用英文 作用 Odeg to top 从下向上 90deg to right 从左向右 180deg to bottom 从上向下 270deg to left 从右向左 to top left 从右下角到左上角 to top right 从左下角到右上角
    查看全部
  • 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、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边 缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 X轴偏移量为正时阴影在边框的右边,为负时在左边;Y轴偏移量为正时阴影在边框的下边,为负时在上边。
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 第一个参数为x轴属性,必输,如果是正数则按照元素的右边框边界向外,如果是负数则按照元素左边框向作; 第二个参数,必输,如果是正数则按照元素的下边界向下,如果是负数则按照元素上边框向上算; 第三个参数为阴影模糊的半径,不可为负数,可以调整阴影模糊的程度,如果没有第四个参数,则这个参数可省略,如果有则不可以被省略; 第四个参数,阴影的扩展半径,扩展是按照阴影中心向四周辐射拓展,如果为1px则四个方向分别阴影部分加1px,那么阴影总大小,宽度加2px,高度加2px,此项也不可为负值,可以省略; 第五个参数为阴影颜色,支持关键字如果不写默认为黑色; 第六个参数为投影方式,如果不写则为外阴影,如果为inset则为内阴影;(不知道为什么没有相对应的outset外部阴影方式)
    查看全部
  • 圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • 前缀:浏览器---- -webkit|chrome和safari -moz|firefox -ms|IE -o|opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-07-03

举报

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

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