[Codecademy] HTML&CSS 第七课：CSS: An Overview
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
What CSS is（什么是CSS）
CSS（Cascading Style Sheets级联样式表）是一种描述你html的外观和格式的语言。
一个样式表（style sheet）是一个描述html页面看起来怎么样的文件。
我们说这些样式表是级联（cascading）的是因为这些表格可以应用超过一种的样式。例如，你想让所有的段落<p>的字都是蓝色的，但是只有其中某一个单词是红色的，CSS也可以做到这点。
只要这样子设置css文件：
p {
color: red;
}
span {
/*Write your CSS here!*/
color: blue;
}
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Fancy Fonts</title> </head> <body> <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p> </body> </html>
效果图：
![[Codecademy] HTML&CSS 第七课：CSS: An Overview](http://img.e-com-net.com/image/product/6b9420d020c94148a10d88b2041845ad.png)
Why sparate from function?（为什么要把功能分开？）
有两个主要原因要把form/formating（css）和content/strutrue（HTML）分开来：
1. 可以给一种标签定制格式，以后使用这个标签就再也不需要在重写代码。
2. 可以把同一种样式表应用在多个html文件中，而不要重写代码
If it's in, it's out!（引用css文件）
在之前的课程中学习了html内联样式（inline styling），例如：
<p style="color:red">Red font!</p>
如果用这种方法制作网页，那么将会很可怕：你必须要写非常多相同的代码，这样会让html文件变得很大！而且如果要改变风格，那么就需要改变所有的代码！而如果使用css文件的话，只需要修改这个文件就可以了，多么轻松！
有两种方法给html文件设置css：
1. 内置在html中，即放在在html文件的<head>标签内，把css内容放在<style>标签内。
例如：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
<title>Result</title>
</head>
<body>
<p>Check it out! I'm purple!</p>
</body>
</html>
2. 单独的css文件，然后在html链接它。这是一个更好的方法。
在head标签内增加<link>标签，然后在link标签里增加属性type = "text/css";rel="stylesheet";href="stylesheet.css"
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link type="text/css"; rel = "stylesheet"; href="stylesheet.css"></link>
</head>
<body>
<p>I want to be SIZE 44 font!</p>
</body>
</html>
PSA: Self-closing tags（自关闭标签）
自关闭标签可以让我们写代码更加方便，如果标签<xxx> </xxx>之间没有内容，那么就可以使用自关闭标签，例如：
<linktype="text/css" rel="stylesheet" href="CSS file address"/>
<imgsrc="web address"/>
大多数标签都不是自关闭的，但是知道用这个可以节省时间。
CSS语法
css语法和html不一样，但是不必担心，它很简单！大多数都是下面这种格式的：
selector {
property: value;
}
selector可以是html的任何标签，例如<p>，<img>，<table>.
property是标签内的属性，例如可以设置font-family,color,和font-size等。
value是property属性的值，例如color的值可以是red。每个属性值之后要有分号；。
One selector, many properties（一个selector，多个properties）
CSS的另一种优势就是在一个selector里面可以设置多个properties，例如，你要设置段落<p>的font-size,font-family,color属性，可以这样设置：
p {
font-family: Arial;
color: blue;
font-size: 24px;
}
记住，每个属性值之后要有一个分号。
一个css文件还可以有多个selector.
例如：
stylesheet.css
/*You can do this! Write your CSS below.*/
h3 {
color:red;
}
p {
font-family:Courier;
}
span {
background-color:yellow;
}
index.html
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>I Know Kung Fu (er, CSS)</title> </head> <body> <div> <h3>What's CSS for?</h3> <p>CSS is for styling HTML pages!</p> <h3>Why use it?</h3> <p>It makes webpages look <span>really rad</span>.</p> <h3>What do I think of it?</h3> <p>It's awesome!</p> </div> </body> </html>
效果图：
![[Codecademy] HTML&CSS 第七课：CSS: An Overview](http://img.e-com-net.com/image/product/5f9c415cb59546f4bc5007e15f766005.png)
The importance of semicolons（分号的重要性）
当你添加越来越多的property-value给CSS文件中的selector时，记住在每个值之后添加分号是非常重要的！
分号告诉css一对property-value结束了，并且进入下一个。没有分号，会让你的代码看起来很难懂。
同时，也要记住每个selector后跟着一对花括号{ }
CSS的注释
CSS的注释和C语言一样，使用/* */ 的
RGB模式颜色的十六进制值
你可能注意到了，我们使用color:red或color:blue等来设置颜色，但是世界上的颜色千千万万，如果要其它颜色呢？比如要橘黄色，淡蓝色，深蓝色等等。设置这些颜色，就需要用到十六进制值了。
在网上有很多十六进制的颜色值，用搜索引擎搜一下就可以了。这个网站就不错链接
十六进制颜色值以“#”开头，然后跟着6位的0~9和A-F的十六进制数，每两位代表RGB颜色模式的红/绿/蓝三颜色的值。 例如，#FF0000代表红色，#00FF00代表绿色，#0000FF代表蓝色。
Pixels and ems（像素）
我们经常会设置字体的大小，例如：
p{
font-size: 10px;
}
其中的10px代表10像素，一个像素就是你电脑屏幕上的一个点，用像素来标识字体的尺寸，当用户电脑屏幕规格和 你的差不多时，这个方法非常好。
如果用户电脑屏幕的差别和你的非常大呢？（例如用户使用智能手机浏览你的网页）
那么就要使用em了（注意不要和<em></em>斜体混淆）。
字体的ems尺寸是一个相对尺寸，一个em等价于用户设备的默认字体大小尺寸，那么2em就是两倍大小了，0.5em就是u一半大小
A font of knowledge(字体的小知识)
之前使用过font-family改变字体类型，那么CSS到底支持多少种字体呢？
答案是取决与具体的设备，大多数电脑都支持最常用的字体，例如Verdana, Courier, 和Garamond等，但是每台电脑可能会有安装不同的字体。
好消息是，CSS提供了一些内置的字体，这样就可以保证在任何设备和系统下都可以显示效果。
这些字体是：
serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.
sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.
cursive: A scripty font! It looks like cursive writing.
在之后我们会学习怎样导入自己的字体，这样就可以保证所有人即使是没有安装该字体的都可以显示效果。
下面显示三种字体：
stylesheet.css
/*Add your CSS below!*/
h1 {
font-family:serif;
}
h2 {
font-family:sans-serif;
}
h3 {
font-family:cursive;
}
index.html
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <h1 >I'm going to be a serif font when I grow up!</h1> <h2>I'm going to be a sans-serif font.</h2> <h3>I'm going to be in cursive!</h3> </body> </html>
效果：
![[Codecademy] HTML&CSS 第七课：CSS: An Overview](http://img.e-com-net.com/image/product/2e7db4c26f354db78281938fe0d3c423.png)
Backup values(备份值)
你不需要直接指定使用内置的默认字体，例如cursive,sans-serif。你可以告诉CSS尝试多种字体，例如：
p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS会依次按顺序尝试使用这些字体，一旦发现一个字体在用户机器上有，那么就会选择使用这个字体。
Border属性
很多html元素都支持border属性，这尤其对表格有用。
border支持多个值，例如，一个border是2px, solid, 和red:
selector {
border: 2px solid red;
}
Links and text decoration（链接和文字修饰）
链接有很多和文字相同的属性，可以改变它的颜色，尺寸等。
除此之外，链接默认会有一个下划线的属性，如果要取消下划线，就在text-decoration里设置。
这个属性允许对文本设置某种效果，如加下划线。
取消下划线：
a {
text-decoration: none;
}
text-decoration的几种属性：
h1 {text-decoration:overline} 上划线
h2 {text-decoration:line-through} 中划线
h3 {text-decoration:underline} 下划线
h4 {text-decoration:blink} 定义闪烁的文本