如何使用CSS随心所欲的画图形

一、CSS基本信息

1、CSS目前最新版本是CSS3，CSS能够真正的把网页表现与内容分离开。

2、CSS能够对网页中对象的位置进行像素级的精确控制，支持几乎所有的字体字号样式。

3、定义如何显示 HTML 元素。

 

多重样式将层叠为一个

 

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

 

层叠次序

 

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

 

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

 

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

 

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

 

二、CSS id 和 class 选择器

如果要让CSS样式作用于HTML中的元素，我们需要在元素中设置"id" 和 "class"选择器。

1、id 选择器

id 选择器可以为特定id的HTML元素指定样式。
HTML元素用id属性来设置id选择器,CSS中id选择器以 "#" 来定义。
以下的样式应用于id="para1"的元素：
#para1
{
  text-align:center;
  color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2、class 选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号标识：
在以下的例子中，所有使用center 类的 HTML 元素均为居中。
实例
.center
{
  text-align:center;
}
你也可以指定特定的HTML元素使用class。
 
 
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
实例
p.center
{
  text-align:center;
}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

 

1、CSS中的盒子模型该怎么理解？

 

2、Content、Margin、Border。。。

 

3、使用样式话三角形的原理还没完全搞懂

posted @ 2014-09-13 00:52  finalstar  阅读(268)  评论(0)    收藏  举报