第七章CSS入门，第八章介绍了字体。个人感觉CSS入门的一些内容比较重要，字体的话讲的属性的值太多，容易忘记。
CSS入门
CSS语句的结构包括三部分：场所（如卧室）、属性（如窗帘）、样式（如蓝色）。依据CSS语言的三个部分，写CSS语句的步骤可分为：选取元素（例如p）、选取属性（background-color :） 、选择属性样式 （如red）。
p { background-color : red ; }为了实现多个html文件对css样式的多次利用，可以新建外部样式表.css文件（stylesheet）。在需要引用css文件的html文件的<head>新增<link>来链接到css文件。type= "text/css"可省略，rel = “stylesheet” 表示链接到样式表，href可以是相对链接或者完整url。<link>为void元素。
< link type = “text/css” rel ="stylesheet" href = "xxx.css">元素可以从父元素继承样式，单独元素的指定属性可以覆盖继承，如<body>中设置字体会影响整个页面）。为HTML元素增加class属性，可以将为该元素设定该类的css样式。
< p class = "classname"> //给HTML文件选定元素增加class属性
p .classname{ color : color-name ; } //创建一个类名选择器于css文件可以指定属于classname类的p元素应用该class的CSS样式。如果省略元素名，点后面是类名， 这个规则会应用到这个类的所有成员。
.classname{ color : colorname ; } //该样式会用到所有属于该class的元素一个元素可以加入多个类，多个元素以空格分隔，该元素样式以css文件中位置顺序最后的样式规则为准，即class类名先后顺序没有影响。
< p class = "greentea raspberry blueberry " > 选择器样式选择指南： 是否有特定的选择器选择该元素 -> 继承情况 -> 默认值 。
验证css文件规范的W3C网站：http://jigsaw.w3.org/css-validator/ ，验证成功可以获得可爱的认证图标哈哈哈，放到自己的html页面里面，o(*￣▽￣*)ブ。
增加字体和颜色样式
字体的属性及属性值还比较多，如果不用的话很容易忘记，所以这部分没有花很多时间，匆匆过一边，记录一下主要字体属性，方便后期查阅。
body {
font-family : Verdana, Geneva, Arial, sans-serif; /*候选字体列表*/
color : silver;
font-weight : bold;
text -decoration:underline;
}1. web字体 ，@font-face规则指定自定义字体。
常用字体格式有： TrueType字体（.ttf）、OpenType字体（.otf）、Embedded OpenType字体（.eot）、SVG字体（.svg）、web开放字体格式（.woff）。其中web开放字体格式应用较广，老旧的浏览器多采用 TrueType字体。类似@font-face的内置规则还有@import（允许导入其他CSS文件，而不是通过一个<link>链入）、@media（允许创建特定于某些媒体类型的CSS规则）。
//定义CSS内置规则
@font-face {
font-family: "Emblema One";
src : url ("http://wickedlysmart.com/..../xxx.woff"),
url ("http://wickedlysmart.com/..../xxx.ttf");
}
//在CSS文件的选择器中使用，其中sans-serif为字体备选项
body {
font-family ："Emblema One"，sans-serif ;
}2.字体大小
body {
/* font-size : 14px ; 不建议按像素指定字体大小 */
font-size: small/medium/large;
}
h1 { font-size : 150% } //body指定字体大小的150%
h2 { font-size ： 1.2em } //body指定字体大小的1.2倍3.字体颜色（选其一）
body{
background-color : silver ; //预定义16种颜色
background-color : rgb( 80%, 40%, 0%) ; //红、绿、蓝色占比
background-color : rgb(204 , 102, 0 ) ; //0~255乘以占百分比
background-color : #cc6600 ; //十六进制表示占百分比，分别为红、绿、蓝（#cc6600可缩写为#c60）
}4.字体粗细和风格
font-weight : bold;
font-weight :normal; //还有不太常用的bolder、lighter属性值；
font-style: italic; //斜体
font-style : oblique ; //倾斜风格5.文本装饰（选其一）
em{
text-decoration : underline ; //下划线
text-decoration : line-through ; //使<em>元素的文本有中间穿过的横线
text-decoration : underline overline ; //使<em>元素的文本有一个上划线和一个下划线
text-decoration ： none； //<em>元素将没有任何装饰
}
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
