[css]《css揭秘》学习笔记(一)
一、background-clip属性
<html> <head> <meta charset="utf-8"> <title>背景与边框1</title> <style type="text/css"> body{ background: url('http://csssecrets.io/images/stone-art.jpg'); } div{ border: 10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; /*如果不加上background-clip属性,则看不到边框*/ max-width:20em; padding:2em; margin:2em auto 0; font:100%/1.5 sans-serif; } </style> </head> <body> <div> Can I has semi-transparent borders? Pretty please? </div> </body> </html>
上述例子,如果不加入background-clip属性,则看不到边框;这是因为背景会侵入边框所在的范围,这里边框是半透明的,所以看不到边框;当加入了该属性后,背景不能侵入边框,因此能看到。
下面是对该代码中,其他知识点的学习:
1、rgba和hsla
css2中的颜色模式只有rgb(red, green, blue)和16进制(#RRGGBB,RR加起来就是RGB中red的值,GG和BB同)。CSS3中为了增加透明度,又增加了RGBA颜色模式(red, green, blue,alpha)。但是这些表示方式都不直观,最终的颜色是三原色的混合,并不直观,因此CSS3增加了HSL(hue-色调, saturation-饱和度, lightness-亮度)颜色模式和hsla;色调的范围是0~360;饱和度和亮度是用百分数来表示。
2、px,em和rem
px以像素为单位,是相对屏幕分辨率的大小。
em是相对当前对象内文本的大小,例如,当前字体是16px,那么1em就等与16px;
rem是相对当前文档根元素的字体大小,和em有一点区别。
3、sans-serif
css规定了5种通用的字体系列,基本上所有的普通字体都能落入这5个系列,它们是:
serif | 有衬线字体族 |
sans-serif | 无称线字体族 |
cursive | 手写字体族 |
fantasy | 梦幻字体族 |
monospace | 等宽字体族 |
由于这五个系列包含了所有的字体,因此可在css中指定这5个系列的顺序,具体采用什么字体,则由用户电脑上安装的字体而定。
[css]《css揭秘》学习笔记(一)的更多相关文章
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS权威指南学习笔记 —— HTML元素分类
HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
随机推荐
- HDU 1811 Rank of Tetris 拓补排序+并查集
Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) [ ...
- Linux下hosts、host.conf、resolv.conf
/etc/resolv.conf 该文件是DNS域名解析的配置文件,它的格式很简单,每行以一个关键字开头,后接配置参数. resolv.conf的关键字主要有四个,分别是: nameserver ...
- 基于LNMP的Zabbbix之PHP源码安装
安装一些依赖的包 wget -c ftp://xmlsoft.org/libxml2/libxml2-2.7.8.tar.gz .tar.gz -C ../source/ cd ../source/l ...
- ARM-LINUX学习笔记-(虚拟机linux串口终端以及USB程序下载,基于TQ2440)
昨天安装了ssh服务之后今天在windows上用xshell登陆发现登录不上,原因是使用了virtualbox的NAT模式,在NAT模式下,客户机可以很方便地上网,但是想要链接宿主机就需要打开网络地址 ...
- Laravel5 model create使用
1.在laravel的Eloquent ORM中,默认表会有created_at.updated_at两个字段,因此在使用create函数时若表无这两个字段会出错,可以设置 public $times ...
- js去除字符串空格
str.replace(/\s+/g,""); str.replace(/\s|\xA0/g,""); empName=empName.replace(/^\s ...
- bzoj4008: [HNOI2015]亚瑟王【期望dp】
一个特别神奇的dp,特别厉害. f(i, j) 表示 有 j 轮发动技能的牌在 [1, i] 另外的m - j轮在[i + 1, n]之间的概率. 怎么转移呢? 首先考虑i这张牌不选的情况,f(i - ...
- “&”详解
1.引用 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. &作为引用的时候,必须在定义时候就进行初始化,若不进行初始化则会编译报错. 2.取地址 &作为取地 ...
- bzoj1355——2016——3——15
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1355 题目大意: 1355: [Baltic2009]Radio Transmission ...
- spark连接mongodb
1.添加依赖 hadoop和mongodb的连接器 <dependency> <groupId>org.mongodb.mongo-hadoop</groupId> ...