CSS样式表：外部、导入、行内与内嵌使用示例

需积分: 9 138 浏览量更新于2024-09-06 收藏 4KB TXT 举报

本资源主要介绍了CSS样式表的四种应用方式，包括链接外部样式、导入样式、行内样式和内嵌样式，并展示了相关的HTML代码示例。此外，还提到了CSS中的浮动（左浮动和右浮动）以及列表样式的设置。在网页设计中，CSS（Cascading Style Sheets）是一种用于定义网页元素外观和布局的语言。本资源重点讲解了CSS的四种应用方法： 1. 链接外部样式：通过`<link>`标签将CSS样式表文件链接到HTML文档中，如： ```html <link href="css/waibu.css" type="text/css" rel="stylesheet"/> ``` 这行代码将名为`waibu.css`的外部样式表文件引入到HTML页面中，使页面的元素可以根据该样式表进行样式化。 2. 导入样式：使用`@import`规则在内部样式表中导入外部样式表，如： ```html <style type="text/css"> @import url("css/waibu.css"); </style> ``` 这行代码在HTML的`<head>`部分创建了一个内部样式表，并导入了`waibu.css`文件。 3. 行内样式：直接在HTML元素的`style`属性中定义样式，如： ```html <p style="font-size:60;color:cornflowerblue;font-style:italic;">˭</p> ``` 这里的`style`属性定义了段落`<p>`的字体大小、颜色和斜体样式。 4. 内嵌样式：在`<head>`部分的`<style>`标签内定义CSS样式，应用于整个HTML文档，如： ```html <style type="text/css"> h1 { font-size: 100px; color: deepskyblue; font-weight: 200; font-style: italic; } </style> ``` 这段代码设置了所有`<h1>`标题的字体大小、颜色、字体粗细和斜体样式。此外，资源中还提到了CSS中的浮动和列表样式。浮动（float）是用于创建多列布局的一种技术，`float: left`和`float: right`分别使元素向左或向右浮动。列表样式（list-style）包括列表项的类型（例如实心圆圈、空心圆圈、方框等）和图像，可以使用`list-style-type`和`list-style-image`属性来设置。例如： ```css list-style-type: disc; // 实心圆圈 list-style-type: none; // 关闭默认列表样式 list-style-image: url("image.jpg"); // 使用指定图片作为列表样式 ``` 这个资源对于初学者理解CSS的基础用法非常有帮助，通过实例展示了如何应用和控制网页元素的样式。

链接外部样式
css
h1{
color: aquamarine;
font-size: 120;
font-weight: 150;
font-style: italic;
}

外部html 注释 rel很重要

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<link href="css/waibu.css" type="text/css" rel="stylesheet"/>
<h1>我的天啊</h1>
</body>
</html>

导入样式
注释：style 写在head 里面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

剩余8页未读，继续阅读

天使的魔鬼脸

粉丝: 3
资源: 2

CSS样式表：外部、导入、行内与内嵌使用示例

使用CSS样式表美化网页与实现内容样式分离

全功能CSS样式表文档与手册下载

网页设计基础教程：深入理解CSS样式表

CSS层叠样式表技术参考手册

sarissa-full-0.9.9.4

CSS语法速查表（CSS语法一览表）

《CSS全程指南》随书光盘

[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part3.rar

[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar

[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part2.rar

最新资源