css新笔记
这里的黑科技其实就是一些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新笔记的更多相关文章
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- css笔记 - 张鑫旭css课程笔记之 float 篇
https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...
- Head First HTML与CSS阅读笔记(二)
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
随机推荐
- webkitTransitionEnd webkitAnimationEnd事件
在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画,使用transition样式属性实现transition动画. 在WebKit引擎的浏览器( ...
- Swift 必备开发库10个
1.CryptoSwift swift加密库, 支持md5,sha1,sha224,sha256... github地址: https://github.com/krzyzanowskim/Crypt ...
- 响应链和UIKit框架
Event Delivery: The Responder Chain When you design your app, it’s likely that you want to respond t ...
- 另一种在WINFORM中使用XNA的方法
之前在写化学分子模型制作程序的时候,使用一种方法,将WINFORM控件嵌入到XNA窗体中,从而实现了即使用WINFORM窗体控件又使用XNA.最近在写另一个物理运动学课件制作程序,同样使用XNA,但从 ...
- 用CSS3实现瀑布流布局
以前使用瀑布流都要用js,现在有了css3,可以轻松实现了. 掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定 ...
- Android 基于Android的手机邮件收发(JavaMail)之一(准备工作)
界面一共是五个界面,分别是welcomeActivity,ReceiveAndSendActivity,ReceiveListActivity,SendMailActivity,MailDetails ...
- 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( ...
- sql server 数据库 日期格式转换
日期时间转字符串:Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), ...
- c语言的一个简单的链表
此程序为作业题: 但不忍丢弃成果: 所以记一下: 哦,对了,有一个易错点:在链表里,字符要用字符数组,不能用单个字符. #include<stdio.h>#include<stdio ...
- Drawable和Bitmap区别
Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...