回顾
· 表单中提交数据的方法有哪两种及其区别?
· 创建一个登录界面需要哪些表单元素?
target属性取值可以为哪些及其含义?
预习检查
· 简述样式表的基本结构?
常用的样式属性有哪些?
本章任务
本章目标
· 会创建统一外观的字体文本
· 会创建无下划线的超连接样式
· 会创建个性化的表格
会创建个性化的表单
为什么需要CSS样式表
· HTML标签的外观样式比较单一
· 页面色彩不生动
· 样式修改不方便
样式表的作用相当于华丽的衣服
· 样式表能实现内容与样式的分离,方便团队开发
样式表的基本语法
样式表的基本结构
<STYLE type="text/css">
P {color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
样式表的基本语法
<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
P { color:red; font-family:"隶书"; font-size:24px;}
</STYLE>
</HEAD>
<BODY>
<H2>静夜思</H2>
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>
</BODY>
</HTML>
样式表的基本语法
如果希望其他的标签也能采用P标签的样式,怎么办
其他标签和P标签应该采用相同的样式,所以要为它们定义一个共享样式。
类样式(class)
<STYLE type="text/css">
.red {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
.red
{ color:red; font-family:"隶书"; }
</STYLE>
</HEAD>
<BODY>
<H2 class="red">静夜思</H2>
<P class="red">床前明月光,</P>
<P class="red">疑是地上霜。</P>
<P>我是郭德刚,</P>
<P class="red">低头思故乡。</P>
</BODY>
常用的样式属性
文本属性
<STYLE type="text/css">
P { font-size: 12px;
font-family: "宋体";
text-align:left; }
.bigFont
{ font-size: 16px;
color:red; }
</STYLE>
</HEAD>
<BODY>
【新闻】[设搜狐为首页] 9月1日
<P class="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P>
<P>·我国实施不安全食品召回制度遏制非法出口</P>
…..
<STYLE type="text/css">
……
table
{
background-image: url(images/type_back1.jpg);
background-repeat:no-repeat;
}
</STYLE>
……
方框属性
要实现下图所示的效果,该如何编写样式规则?
<STYLE type="text/css">
.tableBorder
{ border-right-width: 3px;
border-right-color:red;
border-right-style:dashed;
padding-top:20px;
padding-left:10px; }
TR { background:yellow; }
<TABLE >
<TR>
<TD class="tableBorder">手机冲值</TD>
<TD class="tableBorder">电子彩票</TD>
</TR>
……
<STYLE type="text/css">
.textBorder{
border-width:1px;
border-style:solid;
}
</STYLE>
·综合例子:制作图片按钮
要实现下图图片按钮的效果,该如何编写样式规则?
.picButton{
background-image: url(images/back.jpg);
border:0 px;
margin: 0px;
padding: 0px;
height: 23px;
width: 82px;
font-size: 14px; }
……
<INPUT name="Rt1" type="reset" class="picButton" value=" 重填">
<INPUT name="Bt1" type="submit" class="picButton" value=" 提交" >
…….
样式表的三类应用方式
· 内嵌样式表
内嵌样式表使用格式如下<HEAD>
<STYLE type="text/css">
样式规则
</ STYLE>
</HEAD>
· 行内(嵌入)样式表
· 外部样式表文件
内嵌样式表
<STYLE type="text/css">
P
{ font-family:"隶书";
font-size:18px;
color:#FF0000;
}
</STYLE>
</HEAD>
……
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>
……
行内(嵌入)样式表
如果希望某段文字和其他段落文字显示风格不一样,
该如何解决?
<P style = "color:red;font-size:30px;font-family:隶书;">
这个段落应用了样式
<P>
<P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed ">
外部样式表文件
如果希望一个网站中多个页面的样式保持一致,
如何解决?
· 根据样式文件与网页的关联方式又分为:
· 链接(LINK )外部样式表
· 导入(@import)外部样式表
使用LINK(链接)标签:
<HEAD>
<LINK href="newsyle.css" rel="stylesheet" type="text/css">
</HEAD>
使用@import导入,语法:
<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>
总结
· 方框属性有哪些常用属性?并分别说明其含义?
· 超链接样式有哪几种?
内嵌样式表、行内样式表、外部样式表文件分别适用什么场合?
样式分类
---------------------------内嵌样式表-----------------------------------
1.标签样式,可以应用于所有标签
a{text-decoration:none;
color:#0000CC;
}
2.类样式需要设置class
.STYLE3 {
color: #FF0000;
font-size: 12px;
font-weight: bold;
}
3.id样式,只作用于单个的id
#Layer1 {
position:absolute;
left:61px;
top:127px;
width:66px;
height:97px;
z-index:1;
}
-----------------------------------行内(嵌入)样式表-------------------------------
4.行内样式,只作用于标签内
<INPUT type="submit" name="submit" value="" style="background-image:url(../images/chapter4/btn.gif); border:0; width:99; height:26">
-----------------------------------外部样式表文件---------------------------------------------
5.链接(LINK )外部样式表
<HEAD>
<LINK href="newsyle.css" rel="stylesheet" type="text/css">
</HEAD>
6.导入(@import)外部样式表
<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>
7.按钮设置背景图片
<INPUT type="submit" name="submit" value="" style="background-image:url(../images/chapter4/btn.gif); border:0; width:99; height:26">
8.超链接伪类的应用
a{ text-decoration:none;color:#FFCC00;}去链接下划线
a:link {…} /* 未被访问的链接 */
a:visited {…} /* 已被访问过的链接 */
a:hover {…} /* 鼠标悬浮在上的链接*/
a:active {…} /* 鼠标点中激活链接 */
9.文本设置边框线
.input{ border:solid; border-width:1;} input{border:solid 1px blue;}
10。表格边框线
<TABLE width="381" cellpadding="0" cellspacing="0" style="border:solid 1px #00FFFF; " >
11.文字处理
.STYLE6 {font-family: Arial, Helvetica, sans-serif; font-size: 15px; }