这周打算学习一下CSS3和JS。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。
1. CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。
selector {declaration1; declaration2; ... declarationN }
属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
h1,h2,h3,h4,h5,h6 {
color: red;
}
2. 选择器
1、 id 选择器以 “#” 来定义。
#red {color:red;}#green {color:green;}
这两个id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色
id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
2、类选择器
在 CSS 中,类选择器以一个点号显示:`.center {text-align: center}
在这个例子中,所有拥有 center 类的 HTML 元素均为居中。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
3、和 id 一样,class 也可被用作派生选择器:
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择:
td.fancy {
color: #f60;
background: #666;
}
<html>
<head>
<style type="text/css">
[title]
{
color:green;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<html>
<head>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />