CSS样式表基础知识、样式表的分类及选择器

一、CSS基本概念:

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

/*注释区域*/    此为注释语法

样式表的分类

1、内联样式表(和html联合显示,控制精确,但是可重用性差,冗余多)

例:<p style="font-size:14px;">内联样式表</p>

以上就是一个简单的内联样式表,用在<body>中的标签中,相当于style附在标签中,只改变该标签p中的样式和格式。

2、内嵌样式表

例:<style type="text/css">

p    //格式对p标签起作用

{ 样式;

}

</style>

这是一个内嵌样式表,就是把<style>样式单独抽出来,放在<head>中,独立控制p标签的样式和格式。

3、外部样式表(显而易见,就是独立于html的文件,但是仍然需要html调用该外部样式表才能发挥其作用)

需要新建一个CSS文件,用来单独存放样式表。当在html中调用此样式表时,需要在html文件右击---CSS样式--附加样式表。当连接成功后,在html文件<head>中会出现<link..>的类似连接路径的标签。

4、有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他样式),去除边距如下:

<style type="text/css">

*    //格式对所有标签起作用

{
  margin=0px auto;//auto表示居中,
padding
=0px; } </style>
三种方法的优先级:
        内联式 > 嵌入式 > 外部式
        就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
        以上规则适用于相同权值的情况
三、选择器

1.标签选择器。用标签名做选择器。

2.class选择器。都是以“.”开头。

3.ID选择器。以“#”开头。

<div id="样式名">

ID选择器只能在文档中使用一次,类选择器则可以使用多次
 一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 <span class="stress bigsize">三年级</span>

4.复合选择器

(1)用“,”隔开,表示并列。

(2)用空格隔开,表示后代。

(3)筛选“.”。

CSS 分组选择符
    多个标签使用逗号隔开:
        h1,span{color:red;}
    相当于:
        h1{color:red;}
        span{color:red;}

 注:选择器作用到那个标签都那个标签起作用,有的要直接做用到某个标签上,才能起到作用

 
posted @ 2015-08-03 15:04  Franky2015  阅读(1376)  评论(0编辑  收藏  举报