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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 背景的大小用长度值或者百分比来显示,还可以通过cover和contain来对图片进行伸缩。 语法:background-size:auto|<长度值>|<百分比>|cover|contain 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 背景background-clip用来讲背景图片做适当的裁剪以适应实际需要 语法:backgrounf-clip:border-box|padding-box|content-box|no-clip
    查看全部
  • 背景图片的原始起始位置 语法:background-origin:border-box|padding-box|content-box;
    查看全部
  • 文字与字体阴影,text-shadow:X-offset Y-offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
    查看全部
  • 文字与字体的嵌入 @font-face能够加载服务器端的字体文件,让浏览器显示用户电脑里面没有安装的文字。 语法是@font-face{font-family:字体名称;src:字体文件在服务器尚的相对或绝对路径;}
    查看全部
  • text-overflow:clip|ellipsis用来设置是否使用一个省略标记表示对象文本的溢出, clip是剪切的意思,ellipsis是表示显示的省略标记。 如果要实现溢出显示省略号的功能必须定义强制文本在一行内显示,而且要设置文本的over-flow:hidden。 word-wrap:normal|break-word是用来设置文本行为打断,当前行超过指定容器的边界时是否断开转行。 normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
    查看全部
  • stretch是拉伸
    查看全部
  • border-radius设置边框的样式。
    查看全部
  • <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li> </ul>
    查看全部
  • 切换背景图像
    查看全部
  • ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
    查看全部
  • “::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体, 有的设计要求不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。 提供友好交互 ::selection{ } ::-moz-selection{ background:colorNum; color:colorNum }
    查看全部
  • nth-child(n)
    查看全部
  • ":first-child":选择器选择的是元素的第一个子元素,不是后代元素 ":last-child":选择器选择的是元素的最后一个子元素
    查看全部
  • :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。 例如:点击链接显示隐藏的段落。 HTML代码: <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> CSS代码: .menuSection{ display: none; } #brand:target{/*这里的:target就是指id="brand"的div对象*/ display:block; }
    查看全部

举报

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

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