2017年2月1日
CSS相关
一.可以这样写规则（一个h1,h2{}相关样式设置可以称为一个规则）
p {
background-color: red;
}
或者
p { background-color: red; }
其中p是选择器， background-color: red;是样式 ，而整个又是一个规则
1.以下也是一个规则（多个元素用间隔）
h1, h2 {
color: gray;
}
其中h1, h2是选择器，color: gray;是样式，而整个又是一个规则
2.一般原则
2.1把公有的放在一个规则里面，私有放在单独规则里面
2.2元素一般会继承父元素的样式（但也不是所有的，如链接就不会;也不是所有的属性都可以继承，如边框一般就不会继承）
2.3继承覆盖
如果父元素已经制定字体样式，但是子元素又想用自己的字体样式
body {
font-family: sans-serif;/*父元素公有的字体*/
}
em {
font-family: serif;/*子元素特有的字体*/
}
效果：
2.4给元素添加class类属性
2.4.1只有p元素下的greentea类才起作用【其中p.greentea 叫类选择器】
<!-- html5 -->
<p class="greentea">
</p>
<blockquote class="greentea">
Passing cars,
<br> When you can't see,
<br> May get you,
<br> A glimpse,
<br> Of eternity.
<br>
</blockquote>
/*css*/
p.greentea {
color: green;
}
2.4.2所有元素是greentea类的都起左右
/*css*/
.greentea {
color: green;
}
或者
/*css*/
p.greentea , blockquote.greentea{
color: green;
}
2.4.3如果多个选择器设定一定元素，更特定的规则（优先级更高）起作用，如果优先级一样css文件最后面的那个规则起作用
<!-- html5 -->
<p class=“greentea blueberry purpleberry">
/*css*/
p { color: black; } 1级
.greentea { color : green; } 2级
p.greentea { color : green ; } 3级
p.purpleberry { color : purple; } 3级
p.blueberry { color : blue; } 3级
由于3级有3个，css最后一个是blueberry,所以p字体是blue.
3.补充
3.1一个属性两个值用法，一定要写在一个规则里面，写在多个规则里面会被覆盖的
em {
text-decoration: underline overline;
/*文本下划线 和 上划线*/
}
3.2css检查工具
二.样式创建
1.内联模式（要放在head里面）
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<style type="text/css">
p {
background-color: red;
}
</style>
</head>
2.外联模式（推荐）
第一步，将规则单独创建到css文件里
第二步使用的页面，链接到这个文件既可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<!-- type="text/css" h5中其实不需要这个属性；rel="stylesheet" 说明文件与链接文件css的关系是一个样式表 -->
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
2017年2月2日
一.字体样式
1.5个字体系列
sans-serif : 一般当默认用，没有小而细的衬线【Verdana Geneva Arial】
serif:当默认用,新闻报纸字体，有衬线 【Times】
monospace: 用于显示代码软件用，所有字母水平所在宽度一样，如i和m 【"Courier New"】
cursive: 类似于手写 【”Comic Sans"】
fantasy: 类似某种装饰线字体 【Impact】
2.字体的使用
2.1一般用用户自带的字体集，使用字体（大小写要一直，工作原理是先读第一个，有就停止，没有就一个一个往下试）
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
2.2也可以用web字体为用户提供指定的字体（一般新的浏览器都支持了）
第一步下载web字体
woff: web开发字体格式，推荐用（web open font format）
ttf:TrueType字体
eot：Embedded OpenType字体 （仅IE支持）
svg:SVG字体
第二步：上传到你的web服务器
eg 比如这个目录下
http://www.yourHost.com/journal/
第三步：使用（css 文件添加 @font-face格式，一般放在顶部）
@font-face {
font-family: "Emblema One";
src: url("http://www.yourHost.com/journal/EmblemaOne-Regular.woff"),
url("http://www.yourHost.com/journal/journal/EmblemaOne-Regular.ttf");
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
补充：
内置css规则:@font-face @import @media
3.字体大小调整
3.1px像素（一个字体高度为14像素）
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
}
3.2%倍数 父类元素的百分之多少倍
eg：h1字体是另一个字体150%
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 150%;/*1.5*14px=21px*/
}
3.4关键字 x-small small medium large x-large
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
3.5经验：一般先用关键字指定body, 接下来用%指定body里面的元素大小。
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1 {
font-size: 150%;/*1.5*14px=21px*/
}
4.字体粗细 和 倾斜
h2 {
font-weight: normal; /*正常*/
/*font-weight: bold;*/ /*粗体*/
}
blockquote {
font-style: italic;/*倾斜*/
}
5.下划线（推荐用整行下划线）
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888; /*整行下滑线*/
}
文本下滑线 （
underline下划线 line-through删除线 overline上划线）
二.颜色样式
1.用法
1.1颜色名 https://en.wikipedia.org/wiki/Web_colors
body {
background-color: silver;
}
1.2 rgb函数
body {
background-color: rgb(80%, 40%, 0%);
}
或
body {
background-color: rgb(255, 0, 100);
}
1.3 16进制（推荐）
h2 {
color: #cc6600;
}
如果您发现本文对你有所帮助，如果您认为其他人也可能受益，请把它分享出去。
