html学习第二天

今天主要的学习内容如下

（1）css简介

（2）css语法

（3）样式的创建

（4）两种引入外部样式表的区别

（5）css选择器

一、css简介

英文全名：cascading style sheets ===cascading style sheet 

        层叠样式表：修饰网页信息的显示样子

二、css语法

选择符{ 属性:属性值;属性:属性值;}

        例如：h1{color:red;font-size:14px;}

其中 h1叫做选择符，color 和font-size叫做属性，red和14px 叫做属性值

说明

1）每个css样式有两部分组成，选择符和声明组成，声明包括属性和属性值

2）属性必须放在花括号中，属性与属性值之间用冒号连接。

3）每条声明必须用分号结束

4）当一个属性有多个属性值的时候，属性值之间不分先后顺序，并且，多个属性值之间用空格分开。

5）在书写样式的过程中，空格，换行等操作不影响属性显示

三、样式的创建（内部样式，外部样式，内联样式）

1）内部样式

语法：<style type="text/css">

     /* css语句*/

               </style>

2)外部样式

  语法（1）:

<link rel="stylesheet" href="css的文件路径" type="text/css"/>

    rel (relation):用于定义文档关联，表示关联样式表

    type:表示文档类型

语法（2）：

<style type="text/css">

@import url(css路径);

</style>

注意：@和import之间 ，以及url和小括号之间都没有空格，import和URL之间有空格，而且，最后一定注意用分号结尾，初学者可以不用看第二种方式，这种方式也不常用

3）内联样式（行内样式，行间样式，嵌入式样式）

语法:<标签 style="属性:属性值;属性:属性值;"></标签>

注意：css样式的创建，不管是内部样式，外部样式，虽然写在哪个位置都可以，但是最好是写在头部

四、两种引入外部样式表 link和import的 区别（此条可不看）

1）本质的区别：link属于XHTML标签，而@import 完全是css提供的一种方式

2）加载顺序的区别：当一个页面被加载的时候，link引用的css会被同时加载，而@import引用的css会等页面全部加载完之后再被加载，所以，有时候浏览器加载使用@import引用的css时，开始时会没有样式，当网速慢的时候，会比较明显

3）兼容性的差别；老的浏览器不支持@import,IE5以上的才可以支持@import，而link没有此问题

4）使用dom（document object model 文档对象模型）控制样式时的差别，当使用jsqu 控制dom去改变样式时，只能适应link标签，因为@import不是dom可以控制的

五。样式表的优先级

1)内联样式的级别最高

2）内部样式和外部样式哪个写在下面哪个优先级高，因为页面加载是从上到下，如果同一样式在内部样式和外部样式都有的话，下面的会覆盖掉上面的。

六、css选择符（选择器）

css的选择符包括四大类；标签选择符，id选择符，class 选择符，特殊选择符

常用的选择符有十种左右

类型（元素）选择符，id选择符，class选择符，群组选择符，通配符，包含选择符，伪类选择符，伪对象选择符

1）标签选择符

就是我们说的标签，给某类标签设置样式，只用将上文中的选择符换成标签即可，

注意：标签选择符一般用来清除默认样式，每个标签都会有默认的样式，我们在使用的时候，要消除默认样式，这时候，使用标签选择器就是最好的选择

另外一种就是，页面中的某类标签显示同样的样式，这是用标签选择器

2)id选择器

语法：#id名{属性:属性值;属性:属性值;}

   标签中使用<标签 id="id名"></标签>

注意：id名的使用要唯一，就像每个人的身份证号一样，不能重复

3)类选择器

语法：.类名{属性:属性值;属性:属性值;}

   标签中使用<标签 class="类名"></标签>