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

本文链接：https://blog.csdn.net/guagua4843/article/details/72513388

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