第8节 网页布局
2024-04-14
|
44页
|
120人阅读
|
0人下载
特供
内容正文：
网页布局
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.w3school.com.cn/css3/index.asp
样式表的三类应用方式
内联样式
内部样式表
内部样式表使用格式如下：
外部样式表文件
<HEAD>
<STYLE >
样式规则
</ STYLE>
</HEAD>
…
<input type=“text” style=“border-style :solid; border-width:1px;”></input>
使用LINK（链接）标签 :
<HEAD>
<LINK href="newsyle.css" rel="stylesheet">
</HEAD>
引入的样式文件
2 CSS基本语法和属性
内联样式
内联样式
样式表的基本语法
样式表的基本结构
<STYLE type="text/css">
P {color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
声明文档样式表结束
文档样式表开始，类型为CSS样式
样式规则
选择器
样式规则
P {color:red; font-size:30px; font-family:隶书;}
属性
属性的值
样式表的基本语法
CSS的定义是由3部分构成：选择符（selector），属性（properties）和属性的取值（value），其语法如下:
selector {property: value} (选择符 {属性:值})
选择符是可以是多种形式，一般是要定义样式的HTML标记，如BODY、P、TABLE等，可以通过此方法定义它的属性和值，属性和值要用冒号隔开。例如，body {color: black}，此例的效果是使页面中的文字为黑色。
样式表的基本语法
<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
P { color:red; font-family:"隶书"; font-size:24px;}
</STYLE>
</HEAD>
<BODY>
<div>
<H2>静夜思</H2>
<P>床前明月光，</P>
<P>疑是地上霜。</P>
<P>举头望明月，</P>
<P>低头思故乡。</P>
</div>
</BODY>
</HTML>
本页面中所有的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是相对于显示器屏幕
资源预览图
1
2
3
4
5
6
示范课
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。