展开

关键词

请问#f00是什么颜色?

在我以前出的前端笔试题里,第一道题就是:请问 #f00 是什么颜色? 这道题,对于知道的人来说简直就是送分题,这还用问吗?不就是红色吗?而对于不知道或者没有用心的人来说,却无从入手,怎么回答的都有。 只不过是在 css 代码中,这种两两相等的十六进制可以简写为三位,即 #f00 而已。 同理,#00ff00 就是绿色,#0000ff 就是蓝色啦。 还是举标题的例子,#f00 是最亮的红色,那么与之对应的,#d00,#900 就是越来越暗的红色了。 到这里,我想你已经知道这些代码是什么意思了,也大概了解了它们变化的奥秘。

7.1K10

sass学习入门篇(三)

三,@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;

19660
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 3.0实现会发光复选框

    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;

    17420

    CSS 1.0~3.0选择器(中)

    后代元素选择器,匹配所有属于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; }!

    45830

    CSS选择器笔记

    :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

    24320

    SpringBoot中使用Freemarker构建邮件模板

    您的入职信息如下:

    工号< /td>${workID}
    合同期限${contractTerm }年
    合同起始日期${beginContract? }
    职位${posName}

    希望在未来的日子里,携手共进!

    88960

    两行 CSS 代码实现图片任意颜色赋色技术

    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; }

    26220

    SASS学习笔记(一)

    三、基本用法 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

    33580

    10.6 border-color简写属性:如何理解四值语法?

    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

    25710

    两行 CSS 代码实现图片任意颜色赋色技术

    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; }

    78030

    一篇文章带你了解CSS3圆角知识

    <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

    22020

    【CSS】202-23个CSS垂直居中技巧汇总

    h2{ text-align: center; } .box{ width: 500px; border: 1px solid #f00; margin: auto div>
    h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00 div>
    h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00 div>
    h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00 div>
    h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00

    32830

    CSS 各种Hack手段

    [;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

    5740

    CSS基础(五):定位

    .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

    18120

    CSS 1.0~3.0选择器(下)

    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

    38830

    Web-第五天 BootStrap学习

    --居中显示,两边有留白-->

    <! --整个宽度-->
    1.3.1.2 栅格 帮助手册:全部CSS样式/栅格系统,http: /img/products/small01.jpg"/>

    电器

    ¥998

    电器

    ¥998

    电器

    ¥998

    <div class="col-md

    26250

    SASS相关

    //删除指定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) |

    42310

    原生js动态添加元素

    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;

    5420

    在CSS变量中使用SCSS变量无效

    在SCSS中定义了一个变量,但是在CSS中使用SCSS中定义的变量无效: $color: #f00; :root { --text-color: $color; /** 无效 */ } 使用#{} Interpolation插值来解决此问题: $color: #f00; :root { --text-color: #{$color}; }

    9110

    主题头像呼吸灯

    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

    9320
    点击加载更多

    相关产品

    • 云+校园特惠套餐

      校园优惠套餐升级,云服务器1核2G10元/月起购

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券