CSS--使用方式

创建CSS有三种方式: 外部样式表, 内部样式表和内联样式。

外部样式表

先建立外部样式表文件(.css)，然后在网页文件的<head>内使用<link>链接。这种方式将样式文件彻底与html文档分离，一批样式可以控制多份文档。
以下是一份简单的css文件和一个html：

h1 {font-size: 15px; font-weight: bold; color: red;}

<head>
     <title>title of article</title>
     <!--  这里的link元素可以使用绝对路径，也可以使用相对路径-->
     <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
</body>

内部样式表

直接在<head>标签内插入<style>...</style>块，注意是写在html的head里面，这种方式每批样式只能控制一份文档。

<html>
<head>
<style type="text/css">
   h2 {font-size: 15px; font-weight: bold; color: blue}
</style>
</head>
<body>
</body>

内联样式

在标签的style属性中定义样式。这种方式将样式内联定义到具体的html元素，这种方式通常用于精确控制一个html元素的表现。在这种方式下，没份CSS样式只控制单个的html元素。注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！

<h3 style="font-size:14px;color:green;">
	h3标签内的内容!
</h3>

各种样式设置方式的优先级，按从高到低的顺序依次为：

内联样式-->内部样式表-->外部样式表-->浏览器缺省样式。
如果不同样式的作用范围出现重叠，则高优先级样式将覆盖低优先级的设置。

其实关于CSS，我们需要牢记的是：在定义一个css样式的时候，我们需要指定2个部分，一个是选择器（selector），一个是属性（property：value）。选择器决定我们写的css对于那些html元素起作用，属性决定这些css对这些html起什么样子的作用。如果要使用内联样式，将属性直接定义在html元素的style属性里面了，所以不用指定选择器了。

CSS样式主要由三部分组成：选择器(Selector)，属性名(Property)，属性值(Value)。例如：

p {color:#aa66cc}
h2 {text-align:center; color:red}
p.mystyle1 {font-size:20px; color:blue}
p.mystyle2 {font-sytle:italic; font-size:40px; color:#00ffff; text-align:center}	
h1,h3,h4,h5,h6,p.mystyle3 {text-align:center; color:green}	
.mystyle {text-align:right; color:ff00ff}

注意事项

1、多个属性值用分号隔开,最后一个可加也可不加;

2、如下写法可读性更好些；

p {
     text-align:center;
     color:black;
     font-size:20px;
}

3、CSS对大小写不敏感，但在选择器中对class和id名称也不敏感；

4、注释符号 /* 注释内容 */

CSS注释

/*设置段落显示样式*/
p {text-align:center;   /*文本居中*/
color:red	/*字体为红色*/
}

posted on 2015-05-24 14:21 LinkinPark 阅读(180) 评论(0) 编辑收藏举报