在我以前出的前端笔试题里,第一道题就是:请问 #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元/月起购
扫码关注云+社区
领取腾讯云代金券