Chapter4V1.0Css样式表

更新时间：2023-06-10 11:25:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

chapter4推荐度：
相关推荐

第四章CSS样式表

表单中提交数据方法有哪两种以及区别？表单中有哪些主要的元素？框架的作用是什么？

超链接A的Target属性的取值有哪些及其作用？

美化“淘宝网”页面

制作并美化“注册”页面

会创建统一外观的字体文本会创建无下划线的超链接的样式

会创建个性化的表格

会创建个性化的网页

重点

样式概念样式规则样式文件

难点

类样式对象样式标签样式样式文件

本章纲要为什么需要CSS样式表样式表的基本语法常用的样式属性样式表的三类应用方式如何使用在网页中使用外部样式表总结

HTML标签的外观样式比较单一

页面色彩不生动样式修改不方便

样式表的作用相当于华丽的衣服

外观不同相同内容

美工做样式

内容与样式和谐统一的完整网页

程序员写代码

样式表的基本结构

声明文档样式表结束

文档样式表开始，类型为CSS样式

样式规则

p{color:red;font-size:30px;font-family:隶书;}

……</style>

样式规则

属性

p{color:red; font-size:30px; font-family:;}

选择器

属性的值

本页面中所有的p标<html>

签都应用了此样式<head>

<title>样式表的基本语法

---Lucia制作</title><style type="text/css">

p { color:red; font-family:"隶书"; font-size:24px;}</style>

多个属性间用分号隔开</head>

<body>

如何编写此样式?

字体类型为隶书、

<p>床前明月光，</p>

大小24px

<p>疑是地上霜。</p><p>举头望明月，</p>

所有的段落都采用P<p>低头思故乡。</p>

样式，保证风格统一</body>

</html>

选择器

如果希望其他的标签也能采用P标签的样式，怎么办？其他标签和P标签应该采用相同的样式，所以要为它

们定义一个共享样式。

类样式（class)

color:red; font-family:“华文新魏"; font-size:24px;}……<style>

.类名

CLASS类

选择器<HEAD>

为类选择器定

样式规则</TITLE>

义的样式规则

.red

{ color:red; font-family:"隶书";}

.green{ color:#008866; font-family: “华文中宋”}

应用类选择器</STYLE>

class＝“类名”</HEAD>

<BODY>

<H2 class="red">静夜思</H2><P class="red">床前明月光，</P><P class="red">疑是地上霜。</P><P class=“green”>举头望明月，</P><P class="red">低头思故乡。</P></BODY>

<H2>和<P>标签要应用同一样式

如何实现这样的式效果？字体类

都为隶书

声明P标<style type="text/css">

签样式P { font-size: 12px;

font-family: "宋体";text-align:left;

声明名称为bigFont类样式,}

它可被多个标签共享.bigFont

{ font-size: 16px;

color:red; }

</style>应用类样式用</head>class＝"类名"<body>

【新闻】[月1日

<P class="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P><P>·我国实施不安全食品召回制度遏制非法出口</P>…..

设置背景图像为<STYLE type="text/css">

images文件夹下的……

type_back1.jpgtable

{

background-repeat:no-repeat;}

</STYLE>

……

设置背景图像不平铺

方框属性

margin-top上边界

margin-right右边界

margin-left左边界

margin

border

padding

padding-left左填充

border-width边框的宽度

padding-bottom

下填充

margin-bottom

下边界

方框属性

属性

边界属性

CSS名称

margin-topmargin-rightmargin-bottommargin-leftborder-style

说明

设置对象的上边距设置对象的右边距设置对象的下边距设置对象的左边距设置边框的样式设置边框的宽度设置边框的颜色

设置内容与上边框之间的距离设置内容与右边框之间的距离设置内容与下边框之间的距离设置内容与左边框之间的距离

边框属性

border-widthborder-colorpadding-top

填充属性

padding-rightpadding-bottompadding-left

bd336x280();92.83-1-0-13075-1.jpg" alt="Chapter4V1.0Css样式表" />

使用background、border-right-width、border-right-color、

border-right-style、padding-top和padding-left来实现

bd336x280();src="-1859-png_6_0_0_757_257_327_167_1263_892.83-1-0-6416-1.jpg" alt="Chapter4V1.0Css样式表" />

要实现下图细边框的效果，该如何编写样式规则？

使用border-width和border-style属性

特殊样式（超链接）

如何编写此超链接样式？ a:link {color: #FF0000} /* 未被访问的链接红色*/<style type="text/css">

a{ 绿色*/

color: blue; 橙色*/text-decoration: none;

*/}

a :hover

{

鼠标在超链接上

color: red;

悬停时，超链接

font-weight:bold

文本变为红色

}

</style>……

超链接文本的样式

bd336x280();_892.83-1-0-13783-1.jpg" alt="Chapter4V1.0Css样式表" />

要实现下图图片按钮的效果，该如何编写样式规则？

使用background-image、margin、border、padding、height、

width和font-size属性

统一样式内嵌样式表

<head>

样式规则</ style></head>

标签内（嵌入）样式表

外部样式表文件（.css)

本文来源：https://www.bwwdw.com/article/oj51.html

相关文章：

正在阅读：

Chapter4V1.0Css样式表06-10

自动控制原理与系统毕业设计论文04-19

基于虚拟技术的汽车操纵稳定性试验仿真分析毕业设计01-16

个人提高工作总结 (5)07-28

血球仪堵孔处理01-21

上海市崇明县2013年高考二模地理试题 - 图文06-26

2023年上学期幼儿园中班班务计划【优秀5篇】03-22

MAX 线号机LM-370A LM-380A键盘按键功能说明书 - 图文01-19

C语言上机题参考答案09-20

自强不息厚德载物05-26

上一篇：计算机系统的硬件和软件下一篇：记录下孩子的成长细节