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

需积分: 9 11 浏览量更新于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层叠样式表技术参考手册

JavaScript.DOM编程艺术(第2版)附录及源码.rar

关山月》效果\n具体实现步骤如下：\n新建两个外部样式表red.css、blue.css。\n使用导入式引入CSS样式表。\n在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。

《关山月》效果\n具体实现步骤如下：\n新建两个外部样式表red.css、blue.css。\n使用导入式引入CSS样式表。\n在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。

css重置样式表reset.css

HTML如何实现双引号加粗大 字体小,【2个实例】教你怎样修改和美化blockquote双引号及css样式...

tkinter+css样式表

若要在网页中插入样式表main.css,

引入外部样式表style.c s s，

css 样式 .aaa.bbb 和 .aaa.bbb .cc 如何合并.aaa.bbb

最新资源

HTML如何实现双引号加粗大字体小,【2个实例】教你怎样修改和美化blockquote双引号及css样式...