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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • /*一般元素标签中没写readonly="readonly" 则都为非只读的,即为readwrite="readwrite"*/ /*“:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。*/ input[type="text"]:-moz-read-write{ border:2px solid red; } input[type="text"]:read-write{ border:2px solid red; } input[type="text"]:-moz-read-write{ border:3px solid green; } input[type="text"]:read-write{ border:3px solid green; }
    查看全部
  • /* "::selection"伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)*/ /*将鼠标选中的文本时的背景变成 orange,文本变成 white。*/ /* 注意: 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。 */ ::selection{ background: orange; color: white; } /*::selection在Firefox浏览器还需要添加前缀*/ ::-moz-selection{ background: orange; color: blue; }
    查看全部
  • http://img1.sycdn.imooc.com//531eba56000138aa05870197.jpg
    查看全部
  • /* #id名称:target 选择id="brand"下的p标签,改变它的背景颜色为橙色,字体颜色为白色 */ #brand:target p { background: orange; color: #fff; }
    查看全部
  • /*除页脚id="footer"之外的所有div背景颜色都设置为橙色*/ div:not([id="footer"]){ background:orange; }
    查看全部
  • /*:root是伪类选择器,就是根选择器,在HTML文档中,根元素始终是<html>*/ /* ":root"选择器等同于<html>元素 下面两个效果等同 :root{background:blue;} html{background:blue;} */ :root { background:blue; }
    查看全部
  • 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个
    查看全部
  • /*@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。*/ /*可以理解成引入字体库*/ @font-face{ font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); }
    查看全部
  • /* word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。 word-wrap:normal | break-word normal:表示控制连续文本换行 break-word:标示内容将在边界内换行 normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。 */
    查看全部
  • /* RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。 */ /* 白色的RGB值为(255,255,255) 黑色的RGB值为(0,0,0) */ background-color:rgba(0,0,0,0.5);
    查看全部
  • /* url为图片路径 15为切割图片的宽度,省略像素px 图片延伸方式有三种:round(平铺) repeat(重复) stretch(拉伸) */ border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 15 repeat;
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
  • /* x轴偏移量(正数就偏移右边,负数偏移左边) y轴偏移量 (正数就偏移下边,负数偏移上边) 阴影模糊程度 (不能为负数) 阴影颜色 */ box-shadow:4px 4px 6px #666;
    查看全部
  • /*水平偏移量 垂直偏移量 阴影模糊程度 阴影扩展大小 阴影颜色 添加inset为内部阴影 没写则为外部阴影inset 可以写在参数的第一个或最后一个,其它位置是无效的。*/ box-shadow:4px 4px 6px 6px #666 inset;
    查看全部
  • inset 可以写在参数的第一个或最后一个,其它位置是无效的。
    查看全部

举报

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

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