资源简介

(共44张PPT)
网页布局
8 使用CSS设计简单网页风格
学习目标
【知识目标】
了解什么是CSS；
掌握CSS样式表；
掌握CSS选择器。
【技能目标】
使用CSS选择器控制网页。
引例描述
改变搜索表单样式
任务陈述
搜索页面的目的是为用户提供一个访问数据库的界面，通过简洁美观的页面，用户能快捷的输入自己准备搜索的内容。因此，本任务要求用户操作的网页尽量简洁美观。
1 CSS简介
2 CSS基本语法和属性
的基本结构
知识准备
1 CSS简介
CSS
全称：Cascading Style Sheet层叠样式表单
作用：用于布局与美化网页。
表现形式：内嵌式(内联式)，内部样式，外部样式。
优势：方便更换页面或页面元素的形式。
CSS3
CSS3 是最新的 CSS 标准。
CSS3具备的新特性如下：
更华丽的视觉特效：圆角、阴影、透明度和渐变效果。
更酷炫的动画效果：支持盒子在2D与3D空间旋转、缩放和平移等。
新的选择器：多种新的伪类和选择器可以更方便定位并控制元素。
国际语言支持：解决跨语言书写和排版时的兼容性问题。
服务端字体：网页可以使用服务端字体，不再受用户计算机上的字体库限制。
响应不同设备：可以判断用户设备以适配，对的不同屏幕分辨率做出不同响应。
弹性盒子：盒子或元素的高度和宽度自适应。
多栏布局：可以不需要使用div或li元素就能方便地实现多栏布局。
参考资料：http://www..cn/css3/index.asp
样式表的三类应用方式
内联样式
内部样式表
内部样式表使用格式如下：
外部样式表文件


声明文档样式表结束
文档样式表开始，类型为CSS样式
样式规则
选择器
样式规则
P {color:red; font-size:30px; font-family:隶书;}
属性
属性的值
样式表的基本语法
CSS的定义是由3部分构成：选择符（selector），属性（properties）和属性的取值（value），其语法如下:
selector {property: value} (选择符 {属性:值})
选择符是可以是多种形式，一般是要定义样式的HTML标记，如BODY、P、TABLE等，可以通过此方法定义它的属性和值，属性和值要用冒号隔开。例如，body {color: black}，此例的效果是使页面中的文字为黑色。
样式表的基本语法

本页面中所有的P标签都应用了此样式
用分号隔开
选择器
如何编写此样式 字体类型为隶书、大小24px
所有的段落都采用P样式，保证风格统一
常用的文本样式属性
字体属性
常用的文本样式属性
字体属性
常用的文本样式属性
CSS颜色值
可以用以下方法来规定 CSS 中的颜色：
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器颜色名
十六进制颜色：所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
常用的文本样式属性
关于大小和距离单位
font-size:24px;也可为font-size:1.5em;
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
常用的文本样式属性
文本阴影
在 CSS3 中，text-shadow 可向文本应用阴影。
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
实例
向标题添加阴影：
h1 { text-shadow: 5px 5px 5px #FF0000; }
常用的背景属性
设置背景属性
常用的背景属性
CSS 背景属性
边框属性
设置边框样式
CSS边框距离示意图
边框属性
改变边框样式
1.边框样式基础
使用border-style:solid设置一个边框，定义边框宽度使用border- width属性即可，可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick，所以，我们可以这样设置边框的宽度：
p {border-style: solid; border-width: 5px;}或者：
p {border-style: solid; border-width: thick;}
边框属性
也可以指定4个边的宽度，按照top-right-bottom-left（上右下左）的顺序设置元素的各边边框： p {border-style: solid; border-width: 15px 5px 15px 5px;}
同理设置边框颜色使用border-color属性，它一次可以接受最多4个颜色值。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值： p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
边框属性
如果颜色值小于4个，颜色值复制功能就会起作用，将相对边框设置相同颜色。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色： p {
border-style: solid;
border-color: blue red;
}
边框属性
CSS3中新增了边框圆角border-radius，我们可以利用此方法让边框变为圆角矩形的样子。
例如：
border-radius: 4px;
圆角为4像素
边框属性
通常在边框添加阴影会取得更好的效果，我们使用CSS3 的阴影特性box-shadow，设置4 个值：水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
如下列代码：
box-shadow: 10px 10px 5px #888888;
边框属性
CSS3 中，边框border 的属性除了上述之外，还有边框图片属性，通过CSS3 的 border-image 属性，还可以使用图片来创建边框。
使用方法：border-image:url(图片地址) 边框宽度 边框高度 图片参数;
要注意，因为当前不同浏览器对CSS3 支持不同，我们在border-image 属性前加上-webkit-来支持Chrome 和Safari 浏览器，加上-o-来支持Opera 浏览器，加上-moz-来支持FireFox 浏览器。图片参数则有round（铺满）、stretch（拉伸）和repeat（平铺）。
边框属性
如下所示使用图片创建围绕div 元素的图片，示例代码如下:
div
{
border-image:url(图片地址) 30 30 round;
-moz-border-image:url(图片地址) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(图片地址) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(图片地址) 30 30 round; /* Opera */
}
CSS选择器类型
设置不同行具备不同风格
样式：
#first{ border: 4px #5e846a solid; }
.last{ border: 4px purple solid; }
HTML代码

床前明月光，

低头思故乡。

CSS选择器类型
一般选择器有如下6种类型:
（1）普通选择器，直接声明某个标签样式属性 。
（2）群选择器，几个标签样式属性一样时，可以共同调用一个声明，样式之间用“逗号”分隔。
（3）组合选择器，可以使用派生选择器给一个标签的后代标签、子标签、兄弟标签定义样式。
（4）ID选择器，可以为标有特定 id 的 某个标签指定特定的样式，如有一个