首页编写外部样式表，定义<div>、<span>、<ul>、<li>等标记的样式。

编写外部样式表，定义<div>、<span>、<ul>、<li>等标记的样式。

时间: 2024-10-28 07:11:47 浏览: 23

<div class="top">我的网页设计作业</div>

<div class="top">我的网页设计作业</div> <div id="MainMenu" class="ddsmoothmenu"> <ul> <li><a href="index.html" title="个人主页" id="menu_selected"><span>个人主页</span></a></li> <li><a href="jianjie.html" title="我的简介"><span>我的简介</span></a></li> <li><a href="tongxue.html" title="我的同学们"><span>我的同学们</span></a></li>

编写外部样式表主要是为了将网页的呈现样式从HTML文档中分离出来，使其更易于管理和维护。你可以创建一个`.css`文件，例如`styles.css`，然后在其中使用CSS选择器来指定 `<div>`、`<span>`、`<ul>` 和 `<li>` 等元素的样式。下面是一个基本的例子： ```css /* 外部样式表 styles.css */ /* 定义div的基本样式 */ div { font-size: 16px; line-height: 1.5; color: #333; } /* 为span设置特定样式 */ span.highlight { background-color: yellow; padding: 2px 4px; } /* 无序列表 ul 的样式 */ ul { list-style-type: disc; /* 使用圆点作为项目符号 */ margin-bottom: 10px; padding-left: 20px; } /* 有序列表 ol 的样式 */ ol { list-style-type: decimal; } /* 列表项 li 的通用样式 */ li { margin-bottom: 8px; } ``` 要在HTML文件中引用这个样式表，只需添加`<link>`标签： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>示例页面</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="content"> <p><span highlight>这是一个有样式的span。</span></p> <ul> <li>列表项一</li> <li>列表项二</li> </ul> <ol> <li>有序列表的第一项</li> </ol> </div> </body> </html> ```

阅读全文