CSS样式表在线视频

大家好

在前面的课程中呢

我们学习了html语言的相关概念和技巧

接下来的课程中

我们将学习辅助html语言

来实现更漂亮的网页制作的语言和方法

首先我们来接触一下CSS样式表的概念

CSS样式也叫做层叠样式表

是用来布局和美化网页使用的

在网页的html文件中

大量的使用了DIV SPAN等布局的标签

要实现漂亮的布局

我们就需要CSS样式来实现

可以设置CSS宽度

CSS高度 CSS背景

CSS字体大小等等

同样的一组DIV标签

对应CSS样式代码的不同

所得到的效果也是不同的

我们可以打个比方

把html比作骨架CSS就是衣服

相同的html骨架的结构

不同的CSS样式

会得到美化和布局都不一样的效果

接下来呢我们回到编程环境当中来

我们来学习一下CSS的写法

好 我们现在可以在这里先

新建一个html文件

做成csstest的一个测试的文件

我们在这里来带着大家

做一些css的练习

让我们更多地了解一下css的写法

css呢也叫做层叠样式表

是我们在制作精美的网页时

必须要用到的一项非常重要的技术

我们必须要灵活的掌握和应用

那么它呢的应用方法

有三种可以被引入到html页面当中来

我们下面分别来介绍一下

首先第一种

我们之前其实已经遇到了

例如我们在一个盒子当中

写了一个属性

style属性

可以设置它的宽度 高度 背景色

好 这些其实都属于CSS的样式

这个方法叫做行内属性插入法

我们看一下效果

我们插入了一个

其实已经有了css

指定一些效果的一个盒子

这种方法呢

等我们学完了另外两种嵌入方法之后

我们再回过头来再研究一下

好 我们现在介绍第二种方法

叫做嵌入式方法

这种方法呢是

我们要把css的相关语句

写在这个head元素当中

我们先来写一下

也是style

有一个type署性

在这里放一个style标签

在style标签当中插入css的相关语句

例如我们把这个盒子里边的

css语句给插进来

我们现在把之前插入的这一段去掉

先来看一下效果

好 完全一样的效果

我们可以在这里改一下颜色

这样方便看出是我们

用了另外一种方式增加的css样式

好 看它改变了

刚才呢我们介绍了两种

插入css的方法

第一种呢是行内样式法

就是这个style属性

这种形式

它能作用的范围

就只是它所描述的这个元素

这个div

我们看一下效果

好 这里有一个红色的盒子

我们现在再复制一个

改变一些属性

换一个颜色

再看一下效果

好 一个红色的盒子

一个绿色的盒子

这样的话它们互相不干扰

每一条行内的css样式

都只描述了它所在的这个元素

另一种方法呢是内嵌法

用style元素

然后写在head元素当中

这种方法呢它的作用范围

是对本页面的代码有效

它的优点呢是在我们后面

如果需要修改样式的时候

可以集中到这个区域

来查找我们所对应的样式

这样非常方便修改

那么这种嵌入法

和这种行内的插入方法

它的优先级是怎么样的呢

我们可以来试一下

例如我们先去掉行内的这两个样式

我们来看一下

在这种嵌入方法当中

给DIV增加了一个统一的样式

那么我们看一下效果

现在有两个盒子都是同样的颜色

它产生的css样式是一样的

把第一个盒子增加一个行内的样式

换一个颜色

把它变小一点

再看一下效果

现在呢第一个盒子已经实现了

它行内插入css的这种效果

第二个盒子呢仍然是刚才嵌入形式

插入的这个css效果

所以我们现在回过头来就能看明白

如果行内有css样式的时候

它会执行行内css的样式

如果没有的话

它会执行这个嵌入的形式的这个样式

所以行内的这个优先级会更高一些

据这个特性呢我们可以知道

如果重复性非常高的情况下

我们推荐使用这种嵌入的形式

如果特殊性特别高的情况下

我们也可以使用这种行内的形式

好 接下来我们再来介绍最后一种方法

外练法

这个呢也是在制作多网页网站的时候

非常常用的一种方法

也是最规范最提倡的一种写法

它的应用范围呢

可以是所有引用了

这个css文件的任何页面

我们可以用它来定义全局统一的样式规范

比如我们在这个css文件夹里

新建一个css文件

stylesheet这个就是css文件

好

我们现在就看到了一个css文件

在这里

我们现在在CSS文件里写一个样式

还是DIV这个宽度100 高度100

加一个颜色

好 现在这个文件里边

已经有了一个样式

那么我们回到刚才这个html文件当中

把这个css的页面给引入进来

我们先把它身上的样式都删掉

写一个链接语句

好 我们先来看一下效果

好 现在

这两个DIV什么样式都没有

那我们现在写上链接语句link

地址是css文件夹下的css.css

再加一个rel属性

是stylesheet这个类型

然后再加一个type属性

是txt/css这种类型的

好 现在我们就引进了

这个CSS页面

那么我们这句话大家可以背下来

可以多写几遍

因为在接下来的网页制作中

是非常常用的

我们现在来看一下效果

好 现在已经引入了这个外链式的CSS

它已经有了相应的样式

和刚才内嵌是一样

如果在某一个盒子上

增加一个行内的样式的话

仍然是会先执行行内样式

然后再执行这种全局的样式

好 我们现在再回来

讲一下CSS的语法

CSS呢首先有第一个部分是选择器

这里就是选择器

然后是一个大括号

大括号里面分别有属性

冒号 属性值 然后分号

第二个属性 冒号 属性值 分号

以此类推

那么这个选择器呢

代表的就是html页面当中的某一个元素

或者多个元素

那么前面要是什么都不加的话

这个选择器就代表的是

html当中默认标签的元素

它呢还可以是以下两种元素

一个呢是井号后面加id名

比如这个id名是header的这个元素

我们也给它加上一些样式

换一个颜色

还有一种呢就是点

后面加上的是class名

也就是一个类名

例如这个类名我们也给它叫header

也给它增加一些样式

好 现在用这三种选择器的方法

我们分别对应到html当中去

例如我们给第一个盒子增加一个id名

给第二个盒子增加一个class名

我们把这个样式都去掉

好 看一下效果

这第一个盒子就是id=header

这个对应的样式

第二个盒子是class=header对应的样式

那么class和这个id有什么区别呢

就是这种类的形式是可以重复的

这种id的形式是不可以重名的

我们可以增加多个

增加多个class=header这种类型

好 现在看 重复的是class的类型

id类型是不能重复的

那么当我们有这种重叠的

类型一样的元素的时候

我们可以用class的这种形式

来给它设定样式

好 我们现在呢回到我们的案例当中

我们首先在css文件夹中

新建一个我们针对本案例的CSS样式文件

然后把这个样式文件给链接进去

链接到我们的html这个页面当中来

还记得吗 link怎么写

这个是一个标准的链接

css样式文件的写法

所以我们大家要把它记住

好 接下来我们就可以在

这个样式文件里面

写我们本次案例当中所有的css代码了