这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。
 border-radius

  很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:
.box {
  border-radius: 4px;
}
  稍微高端一点的是这样的:
.box {
  border-radius: 4px 6px 6px 4px;
}
  然而,终极黑科技是这样用的:
.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
  对,它可以赋8个值,没见过?不着急,具体的解释是这样的:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。
 outline-offset

  相信很多开发者在写CSS的时候对下面的语句会很熟悉:
input {
    outline : none;
}

input:focus {
    outline : none;
}
  这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样
input {
    outline-offset: 4px ;
}
  调节该属性值的大小你就可以看到outline的距离变化了。
 类的声明

  对于下面的类的声明,可能大家都很熟悉:
.col-8 {

}
  这当然没什么,但是如果你这样写呢:
.♥ {
  color: hotpink;
}

.★ {
  color: yellow;
}
  嗯,看起来怎么样,你是可以这么用的:
<div class="♥ ★"></div>
  只要是Unicode的,你都可以这么来声明你的类。
  选中连续的几个元素
ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}
  上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。
 伪类设置单标签

  html中有几个常见的单标签:<br> ,<hr>等。
  下面的示例是实现对<hr>的修饰。
hr:before {
    content: "♪♪";
}

hr:after {
    content: " This is an <hr> element";
}
  没错,关键就是使用:before和:after这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰<meta> 和 <link>,不过这个前提是,你把这两个的display属性设置为:
display: block
 属性区分大小写

  假如我们在写html的时候有类似下面的代码:
<div class="box"></div>
<input type="email">
  然后我们用属性选择器进行CSS修饰:
div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}
  这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:
div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}
  这变成了大写之后,第一个class="BOX"并不会影响到<div class="box"></div>,而第二个type="EMAIL"还是会正常修饰<input type="email">。所以在使用属性选择器的时候,注意大小写问题。

css新笔记的更多相关文章

  1. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  5. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  6. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  8. Head First HTML与CSS阅读笔记(二)

    上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. webkitTransitionEnd webkitAnimationEnd事件

    在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画,使用transition样式属性实现transition动画. 在WebKit引擎的浏览器( ...

  2. Swift 必备开发库10个

    1.CryptoSwift swift加密库, 支持md5,sha1,sha224,sha256... github地址: https://github.com/krzyzanowskim/Crypt ...

  3. 响应链和UIKit框架

    Event Delivery: The Responder Chain When you design your app, it’s likely that you want to respond t ...

  4. 另一种在WINFORM中使用XNA的方法

    之前在写化学分子模型制作程序的时候,使用一种方法,将WINFORM控件嵌入到XNA窗体中,从而实现了即使用WINFORM窗体控件又使用XNA.最近在写另一个物理运动学课件制作程序,同样使用XNA,但从 ...

  5. 用CSS3实现瀑布流布局

    以前使用瀑布流都要用js,现在有了css3,可以轻松实现了. 掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定 ...

  6. Android 基于Android的手机邮件收发(JavaMail)之一(准备工作)

    界面一共是五个界面,分别是welcomeActivity,ReceiveAndSendActivity,ReceiveListActivity,SendMailActivity,MailDetails ...

  7. Leetcode: Sort Transformed Array

    Given a sorted array of integers nums and integer values a, b and c. Apply a function of the form f( ...

  8. sql server 数据库 日期格式转换

    日期时间转字符串:Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), ...

  9. c语言的一个简单的链表

    此程序为作业题: 但不忍丢弃成果: 所以记一下: 哦,对了,有一个易错点:在链表里,字符要用字符数组,不能用单个字符. #include<stdio.h>#include<stdio ...

  10. Drawable和Bitmap区别

    Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...