HTML|内联CSS-背景和字体
CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式。
CSS 是在 HTML4 开始使用的，是为了更好的渲染 HTML 元素而引入的。
CSS 可以通过以下方式添加到HTML中：
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
1.内联背景颜色
在标签中添加属性style，并且在style中加上background-color：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联CSStitle>
head>
<body style="background-color: yellow">
<h1 style="background-color: blue">标题h1>
<p style="background-color: red">
第一行
<br>
第二行
p>
body>
html>
2.字体、字体颜色、字体大小
可以通过style中添加如下属性来设置文字：
字体：font-family
颜色：color
大小：font-size
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联CSStitle>
head>
<body style="background-color: yellow">
<h1 style="background-color: blue">标题h1>
<p style="background-color: red">
第一行
<br>
第二行
p>
<hr>
<h1 style="color: blue">标题h1>
<p style="font-family: Arial;color: red;font-size: 40px">
第一行
p>
body>
html>
可以看到红框内的内容就是设置了字体颜色，样式和大小。
人生没有白走的路，每一步都算数！
CSS的秘密——背景和边框（上）
写在前面
有空的时候看到《CSS Secrets》这本书，觉得挺有意思的，决定按章节来将其内容整理出来，说不定以后就能用得上。
通过这本书才了解到dabblet。dabblet是一款简单的前端在线编辑器，实时查看效果非常方便。这里每个例子都可以在dabblet上在线查看效果，点击对应的小标题即可。
这篇文章整理《Backgrounds & Borders》这一章。W3C background新增属性介绍
1.背景和边框1.1 半透明的边框
需求：在有背景图片的body上，制作一个白色底版，半透明边框的div。
body {
background: url('http://csssecrets.io/images/stone-art.jpg');
}
div {
/* HSLA颜色表示法：H色调（0/360表示红色，120表示绿色，240表示蓝色）;S饱和度（0%-100%）;L亮度（0%-100%）;透明度（0-1）*/
border: 10px solid hsla(0,0%,100%,.5);
background-color: white;
/* 这句是关键，因为默认情况下，background会延伸至border的下方，如果border透明，就看不出效果。
background-clip属性默认值为border-box，即background会延伸至border的下方，padding-box表示延伸至padding的边缘，content-box表示延伸至content的边缘。 */
background-clip: padding-box;
/* styling */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
/* 100%意思是默认继承body标签设置的字体大小;1.5表示行高 */
font: 100%/1.5 sans-serif;
}1.2 多层边界
为了达到多层边界的效果，可以通过以下两种方式解决：
（1）box-shadow
box-shadow平常用得较多，但第四个参数spread radius扩展阴影半径常常被忽略。它可以使边界扩展或缩小，是制作多层边界效果的关键。
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
/* 六个参数：X轴偏移量、Y轴偏移量、阴影模糊半径、阴影扩展半径、阴影颜色、投影方式(可选inset)*/
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}（2）outline
如果只需要两层边界，可以用outline实现。
div {
width: 100px;
height: 100px;
margin: 25px;
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
}用outline的好处，一是能够制作非实线边界，二是能够通过outline-offset属性控制其到元素边界的距离。
但是，当元素设置了border-radius圆角属性后，outline不会贴合圆角，这是一个bug，今后可能会被修复。
1.3 灵活的背景定位
在CSS2.1中，可以用background-position:bottom right;来将背景图片放置在右下角，但是没办法留出空隙，即设置图片到右下角的距离。
为了达到灵活的定位效果，可以通过以下三种方式解决：
（1）extended background-position
CSS3扩展了background-position，允许指定到任何一个角落的偏移量。
div {
/* 在有些不支持extended background-position的浏览器中，定位在右下角的图片还是会出现在左上角，解决办法就是在background再设置一遍bottom right */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 30px bottom 10px;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}（2）background-origin
可以看出，如果用第一种方式，一旦需要修改偏移量，就需要修改三处地方。而用background-origin可以更方便，只需要修改padding一处即可。
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
/* background-origin默认值是padding-box*/
background-origin: content-box;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}（3）calc()
calc()可以与background-position完美结合。
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
/* 距右边框20px，下边框10px。
注意：减号两边要有空格，否则会有解析错误。根据向前兼容的规则，在未来，calc()内会允许使用关键字，关键字也可以包含连字符*/
background-position: calc(100% - 20px) calc(100% - 10px);
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}1.4 内圆角
有时候我们需要这样一种效果：一个容器，仅仅内角是圆的，外角还是方方正正的。我们可以用两个元素做出这样的效果。
I have a nice subtle inner rounding,
don’t I look pretty?
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}为了只用一个元素达到内圆角效果，可以通过以下方式解决：
div {
/* 利用outline不会贴合圆角，而box-shadow会的特性，二者结合，达到内圆角效果。
设置不同颜色时，容易发现outline在box-shadow的上层。
另外，如果将box-shadow的宽度设置为outline的宽度，会引起某些浏览器的额外渲染，因此要设置得稍微小一点。
根据勾股定理，若border-radius为r，则最小的box-shadow为根号2减1倍的r，为简化计算，可换为0.5r。
*/
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
font: 100%/1.5 sans-serif;
}
