在我以前出的前端笔试题里，第一道题就是：请问 #f00 是什么颜色？ 这道题，对于知道的人来说简直就是送分题，这还用问吗？不就是红色吗？而对于不知道或者没有用心的人来说，却无从入手，怎么回答的都有。 只不过是在 css 代码中，这种两两相等的十六进制可以简写为三位，即 #f00 而已。 同理，#00ff00 就是绿色，#0000ff 就是蓝色啦。 还是举标题的例子，#f00 是最亮的红色，那么与之对应的，#d00，#900 就是越来越暗的红色了。 到这里，我想你已经知道这些代码是什么意思了，也大概了解了它们变化的奥秘。
三，@at-root是sass3.3.0版本的新增功能，用来跳出选择嵌套的 //没有跳出 .parent-1 { color:#f00; .child { width:100px; } } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent -3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width :400px; } } } 解析的css: //没有跳出 .parent-1 { color: #f00; } .parent-1 .child { width: 100px; f00; } .child1 { width: 300px; } .child2 { width: 400px;
代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿！
width: 8px; height: 8px; border-radius: 50%; background: #f00 ; transition: 0.5s; box-shadow: 0 0 5px #f00, 0 0 10px #f00, 0 0 20px #f00, 0 0 40px #f00, 0 0 80px #f00;
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔p { font-size:2em; }E > F子元素选择器，匹配所有E元素的子元素Fdiv > strong { color:#f00 ; }E + F毗邻元素选择器，匹配所有紧随E元素之后的同级元素Fp + p { color:#f00; } 3.CSS 2.1 属性选择器选择器含义示例E匹配所有具有att属性的E元素，不考虑它的值。 p { color:#f00; }E F后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔p { font-size:2em; }E > F子元素选择器，匹配所有E元素的子元素Fdiv > strong { color:#f00; }E + F毗邻元素选择器，匹配所有紧随E元素之后的同级元素Fp + p { color:#f00; }注：CSS 2.1 属性选择器还有一个特点就是使用多个选择器 ，同时满足这多个选择器：blockquote { color:#f00; }！
:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 序号 选择器 含义 9. ; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 序号 选择器 含义 13. E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 实例： p:nth-child(3) { color:#f00; } p:nth-child(odd) { color :#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color
您的入职信息如下：
希望在未来的日子里，携手共进!
url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00 , #f00); background-blend-mode: lighten; background-size: cover; } 效果如下： ? 注意，上面 CSS 这一句是关键 background-image: url($img), linear-gradient(#f00, #f00); ，这里我叠加了一层渐变层 linear-gradient (#f00, #f00) ，实现了一个纯红色背景，而不是直接使用 #f00 实现红色背景。 { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; }
三、基本用法 1）变量，所有变量以$开头，如果变量镶嵌在字符串中，用#{}包含 $red:#f00; $lside:left; div{ color:$red; border-#{$lside} margin-left:$value; } div{ @include left(10px); } 五、颜色函数，指定颜色并用颜色函数（主要是加深或者减淡）生成系列颜色 lighten(#f00,20% ) darken(#f00,20%) grayscale(#f00,20%) complete(#f00) 六、高级语法 1）插入文件，用@import命令 @import +路径 2）条件语句，@if
eeff34; 二个：上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000; 三个：上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00; 四个：上、右、下、左边框颜色：#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f
<style> #rcorners1 { border-radius: 25px; background: #f00 三个值 - border-radius: 15px 50px 30px #rcorners5 { border-radius: 15px 50px 30px; background: #f00 3.两个值 - border-radius: 15px 50px #rcorners6 { border-radius: 15px 50px; background: #f00; title>项目</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f00 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #f00
[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。 如下面这个例子： .test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0 /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */ .test:lang(zh-cn){color:#f00
.box { width: 200px; height:100px; border: 1px solid #F00 .box { width: 200px; height:100px; border: 1px solid #F00 .box { width: 200px; height:100px; border: 1px solid #F00 .box { width: 200px; height:100px; border: 1px solid #F00 .box { width: 200px; height:100px; border: 1px solid #F00
CSS 3中的结构性伪类选择器含义示例E:root匹配文档的根元素，对于HTML文档，就是HTML元素p:nth-child(3) { color:#f00; }p:nth-child(odd) { color :#f00; }p:nth-child(even) { color:#f00; }p:nth-child(3n+0) { color:#f00; }p:nth-child(3n) { color:#f00
--居中显示，两边有留白--> <! --整个宽度--> 1.3.1.2 栅格 帮助手册：全部CSS样式/栅格系统，http: /img/products/small01.jpg"/> 电器 ￥998
电器
￥998
//删除指定key返回新map（不能删除map中的map) keywords($args) //--- 根据宏的参数动态创建map（自动去除参数中的$符号） 颜色函数 RGB rgba(#f00 , 0.6) //--- 将颜色转成rgba red(#f00) //255 --- 取出R green(#f00) //0 --- 取出G blue(#f00) //0 --- color-2, 50%) //颜色混合 HSL adjust-hue(-deg|-%) //调整色相 saturate(#ccc, 30%) //增加饱和度 desaturate(#f00 , 80%) //降低饱和度 lighten(#000, 30%) //提高明度 darken(#fff, 30%) //降低明度 grayscale(#f00) //转成无彩系 ，等同于desaturate(#f00, 100%) opacity alpha($color) | opacity($color) //--- 取出A fade-in($color, .2) |
20px; border-right: 2px solid #999; } ul li:hover { color: #f00 ; border-right: 2px solid #f00; } /* .circle1 { width: 492px; height: 499px; border-radius: 50%; background: #f00;
在SCSS中定义了一个变量，但是在CSS中使用SCSS中定义的变量无效: $color: #f00; :root { --text-color: $color; /** 无效 */ } 使用#{} Interpolation插值来解决此问题: $color: #f00; :root { --text-color: #{$color}; }
avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00 #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00
校园优惠套餐升级，云服务器1核2G10元/月起购
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
云数据库 PostgreSQL
文件存储
SSL 证书