您的位置：首页 > 其它

（个人）AR电子书系统创新实训第二周（1）

2017-05-19 00:26 81 查看

这周打算学习一下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 />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航