chapter4 CSS样式表

来源：互联网发布：淘宝网客服联系打不开编辑：程序博客网时间：2024/06/05 08:03

回顾

· 表单中提交数据的方法有哪两种及其区别？

· 创建一个登录界面需要哪些表单元素？

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">

{ 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.行内样式，只作用于标签内

-----------------------------------外部样式表文件---------------------------------------------

5.链接（LINK ）外部样式表

<HEAD>

</HEAD>

6.导入（@import）外部样式表

<HEAD>

@ import newstyle.css;

</STYLE>

</HEAD>

7.按钮设置背景图片

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。表格边框线

11.文字处理

.STYLE6 {font-family: Arial, Helvetica, sans-serif; font-size: 15px; }