当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （6）CSS样式表 > 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代码了
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
