学点css基础

中午时间学点css，附带http://www.w3cschool.cc/css/css-tutorial.html这个链接！

中午的时间学了这些东西！如下图:

附带代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css_1</title>
 6 </head>
 7 <style>
 8 p{    
 9     /*这是设置颜色的*/
10 color: red;
11   /*这是设置对齐方式的*/
12 text-align: center;
13 
14 }
15 /*CSS Id 和 Class */
16 /*HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。*/
17 #para1
18 {
19     text-align: center;
20     color: red;
21 }
22 /*class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。*/
23 
24 /*class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：    */
25 .center
26 {
27     text-align: center;
28 
29 }
30 
31 /*-- 你也可以指定特定的HTML元素使用class。类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 */
32 p.center
33 {
34     text-align:center;
35 }
36 /*多重样式:如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。/*/
37 /*多重样式将层叠为一个:因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。*/
38 
39 </style>
40 
41 <body>
42     <!-- 调用P这个selector -->
43     <p>Hello World!</p>
44     <p id="para1">Hello World!</p>
45     <!-- 在以下两个的例子中，所有拥有 center 类的 HTML 元素均为居中。 -->
46     <h1 class="center">标题居中</h1>
47     <p class="center">段落居中</p>
48     <!-- 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中: -->
49     <p class="center">This paragraph will be center-aligned</p>
50     <p style="color: sienna;margin-left: 20px;" > This is a paragraph.</p>
51 
52 
53 
54 </body>
55 </html>

1 /*不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，
2 它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。*/
3 hr{color: sienna;}
4 p{margin-left: 20px;}
5 body{border-image: url("/images/back40.gif");}