HTML5学习笔记之二CSS基础

一般来说，CSS都存储为一个文件。然后各个html page能够指定使用哪个CSS文件。这样这些html页面就能够保持一致的风格。

通常能够通过在head中加上一行指定CSS的链接。

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<title>MyPage</title>

</head>

<body>

<!– Body Content -->

</body>

</html>

CSS盒子模型。CSS把页面弄成盒子套盒子的模式，下图非常形象的表明这样的关系。

以下我们看一下怎样通过CSS文件来配置html页面，CSS使用Selector来设置页面中不同元素的格式风格。以下，用样例来表示不同selector的作用范围。

/* Universal Selector */

* {

background-color: #E0E0E0;

margin-top: 0px;

margin-right: 0px;

}

/* Type Selector */

body {

font-family: Arial, Helvetica, sans-serif;

}

上面这段CSS就定义了<body></body>中全部元素的字体包含如上三种。

/* ID Selector */

#mainHeader {

text-decoration: underline;

}

我们再看看起作用的HTML项。

<header>

<h1 id="mainHeader">Part 2: CSS Introduction</h1>

</header>

/* Class Selector */

.topNavigation {

color: #808000;

font-weight: bold;

}

用户声明的类假设叫topNavigation。该CSS就会对该class的项起作用。如

Navigation 1

</p>

/* Descendant Selector */

footer p {

color: #008080;

font-weight: bold;

}

HTML中

<footer>

<p>

Footer

</p>

</footer>

而我们在上个selector中提到的其他p是不起作用的。

6.最后一种不是Selector。它是鼠标悬浮的一种特殊处理

/* Mousehover Effect */

p:hover {

color: #2694E8;

}

html页面中全部标记<p></p>中的文字。当鼠标悬浮在上面的时候，都会变色。

巴特西