CSS文字样式定义与链接效果

TXT文件

下载需积分: 9 | 7KB | 更新于2024-09-16 | 142 浏览量 | 举报收藏

立即下载

本文主要介绍了CSS中用于定义文字样式的常用代码，包括链接的不同状态、自定义类别的链接样式以及页面背景和字体设置。在网页设计中，CSS（层叠样式表）是一种强大的工具，用于控制网页元素的外观和布局。在【标题】"css常用文字定义"和【描述】中提到的CSS代码片段，主要关注文字的显示方式，特别是链接（a标签）在不同状态下的样式。以下是对这些代码的详细解析： 1. 链接的四种状态： - `a:link` - 未访问的链接颜色。在这个例子中，所有未被点击过的链接颜色设为#333333。 - `a:visited` - 已访问的链接颜色。一旦用户访问过这个链接，它的颜色会变为#333333，保持一致。 - `a:hover` - 鼠标悬停时的链接颜色。当用户将鼠标指针放在链接上时，链接的颜色会变为#ff6600，提供视觉反馈。 - `a:active` - 被激活的链接颜色。当链接被点击的瞬间，其颜色会短暂地变为#333333。 2. 自定义类别链接样式： - `a.channel`, `a.channel2`, `a.bottom`, `a.class` - 这些是自定义的类名，用于区分不同类型的链接并赋予它们特定的样式。例如，`a.channel`可能用于导航菜单中的链接，`a.channel2`可能是另一种特殊用途的链接，`a.bottom`可能用于页脚链接，而`a.class`可能是一般用途的链接类。它们各自具有与上述基本链接状态相同的颜色设定。 3. 背景和字体设置： - `body` - 代表整个网页的主体部分。在示例中，`body`的字体大小设置为9pt，并设置了背景图像`background:url(images/ad_bg.gif)`。这意味着整个网页的背景将显示指定的图片。 - `text-decoration` - 控制文本的装饰，如下划线。`none`值表示取消默认的下划线，使文本看起来更简洁。这些CSS规则组合在一起，可以为网页创建出清晰、有层次的视觉效果。通过调整不同的颜色、字体大小和背景，设计师可以根据品牌风格或用户体验需求定制网页的视觉呈现。了解并熟练运用这些CSS文字定义技巧，对于创建吸引人的网页至关重要。

/* 网站链接总的css定义:可定义内容为链接字体颜色、样式等 */
a{text-decoration: none;} /* 链接无下划线,有为underline */
a:link {color: #333333;} /* 未访问的链接 */
a:visited {color: #333333;} /* 已访问的链接 */
a:hover{color: #ff6600;} /* 鼠标在链接上 */
a:active {color: #333333;} /* 点击激活链接 */
/* 顶部频道文字链接的css定义－－将顶部频道文字链接与网站链接总的css定义分开，以后可以制作深底浅字的格式，如果要保持原来的设计样式，将此定义内容删除或定义成与网站链接总的css相同即可。调用代码为<a class='channel' ***>***</a> */
a.channel:link {color: #333333;}
a.channel:visited {color: #333333;}
a.channel:hover{color: #ff6600;}
a.channel:active {color: #333333;}
/* 顶部当前频道文字链接的css定义－－调用代码为<a class='channel2' ***>***</a> */
a.channel2:link {color: #333333;}
a.channel2:visited {color: #333333;}
a.channel2:hover{color: #ff6600;}
a.channel2:active {color: #333333;}
/* 底部版权信息文字链接的css定义－－与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。调用代码为<a class='bottom' ***>***</a> */
a.bottom:link {color: #333333;}
a.bottom:visited {color: #333333;}
a.bottom:hover{color: #ff6600;}
a.bottom:active {color: #333333;}
/* 文章栏目标题文字链接的css定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。要相同可不设置。调用代码为<a class='class' ***>***</a> */
a.class:link {color: #333333;}
a.class:visited {color: #333333;}
a.class:hover{color: #ff6600;}
a.class:active {color: #333333;}

/* body的css定义:对应css中“body”，可定义内容为网页字体颜色、背景、浏览器边框等 */
body
{