CSS入门学习

1 引言

• CSS指层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，而样式通常存储在外部样式表中，而外部样式表通常存储在CSS文件中。
• 因此我们要学习的就很显然了，首先是CSS的基础内容，其次如何将其保存为外部样式表，最后在HTML代码中引用。

2 CSS基础内容

2.1 CSS规则

• CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
  
  image.png
  
  选择器通常是您需要改变样式的 HTML 元素。例如p或者h1，或者使用相应的ID选择器或者类选择器。
  例子：

p       
{        
text-align:center;       
/*这是另一个注释*/        
color:black;        
font-family:arial;       
}

2.2 ID选择器与类选择器

• ID选择器
  当使用上面的p进行改变样式时，会影响整个HTML页面的p元素。但如果只想改变某一个元素时，应当使用ID选择器。
  用法：ID选择器以关键字 # 作为标识；
  下面的例子将作用于id = 'jacob'

 




Hello World!!!
This paragraph is not affected by the style.

另需要注意的是，标签放在head标签中。

• Class选择器
  用于描述某一类元素的样式，与ID选择器的区别在于其可以选择某一组元素。
  用法：以关键字 . 作为标识；

 




标题居中
段落居中。
 

此外，还可以指定特定元素的类选择器。

 
 




This heading will not be affected
This paragraph will be center-aligned.
 

2.3 样式表

插入样式表的三种方式

1. 外部样式表
   当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
下面是一个样式表文件的例子：

hr {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}   

2. 内部样式表
   当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
   3. 内联样式

   这是一个段落。
   

   • 此外需要注意的是：
     如果外部样式表、内部样式表同时对某个元素进行了样式定义，那么需要注意这里有一个继承与覆盖的过程。
     一个例子如下：
     外部样式表：

   h3            
   {            
   color:red;            
   text-align:left;            
   font-size:8pt;            
   }    
   

   内部样式表：

   h3            
   {            
   text-align:right;            
   font-size:20pt;            
   }    
   

   那么得到的结果是：

   color:red; text-align:right;           
   font-size:20pt;   
   

   需要注意的是：
   !important 关键字会覆盖所有，就比如在外部样式表中使用!important，其不会被内部样式表与内联样式覆盖。
   权重计算方式：
   

   image.png
   
   一个简单的例子如下：

       
       
       
       
       
      
   red   
   em red    
       
   red
       
       
      
   
   

   根据权重的计算结果，em显示为蓝色。

   2.4 背景

   CSS 属性定义背景效果：

   • background-color
   • background-image
   • background-repeat
   • background-attachment
   • background-position
   1. background-color 属性定义了元素的背景颜色。

   整个页面的颜色会变成蓝色。

   对应的元素背景改变。

   2. background-image 属性描述了元素的背景图像.

   该方法会使得背景图片在整个元素内平铺，若想改变平铺方式则可以利用以下几个方法。

   body 
   { 
   background-image:url('gradient2.png'); 
   //仅在x方向平铺
   background-repeat:repeat-x; 
   }
   

   body 
   { 
   background-image:url('img_tree.png'); 
   //不平铺
   background-repeat:no-repeat; 
   }
   

   可以利用 background-position 属性改变图像在背景中的位置:

   body 
   { 
   background-image:url('img_tree.png'); 
   background-repeat:no-repeat; 
   background-position:right top; 
   }
   

   body        
     {        
      background-image:url('img_tree.png');        
      background-repeat:no-repeat;        
   //水平66%处，吹制33%处
     background-position:66% 33%;        
   }
   

   body       
     {       
      background-image:url('img_tree.png');        
      background-repeat:no-repeat;        
   //相对于左上角的偏移量。
     background-position:50px 100px;        
     }
   

   2.5 文本

   • Text Color
   • 文本的对齐方式

   
   
    
    
   
   
   
   
   CSS text-align 实例
   2015 年 3 月 14 号
   “当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”
   注意： 重置浏览器窗口大小查看 "justify" 是如何工作的。
   
   
   
   

   image.png
   
   

   当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

   • 文本修饰
   文本修饰
   • 文本转换
   • 文本缩进

   p {text-indent:50px;}
   

   • 文本间隔
     改变字之间的间隔距离

   p 
   { 
   word-spacing:30px; 
   }
   

   2.6 字体