CSS 创建与使用学习笔记

一、CSS 的作用

CSS(层叠样式表)用于控制 HTML 文档的样式和布局。当浏览器读取一个样式表时,它会根据样式表中的规则来格式化 HTML 文档,从而实现页面的美化和布局调整。

二、插入样式表的方法

CSS 可以通过以下三种方式插入到 HTML 文档中:

(一)外部样式表(External style sheet)

外部样式表是将 CSS 代码保存在一个单独的 .css 文件中,然后通过 HTML 文档中的 <link> 标签引入。这种方式适用于需要在多个页面中应用相同样式的情况,便于维护和更新。

示例代码

HTML复制

复制代码
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

预览

mystyle.css 文件中,可以定义如下样式:

css复制

复制代码
hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("/images/back40.gif"); }

注意 :在属性值与单位之间不要留有空格,例如正确的写法是 margin-left: 20px,而不是 margin-left: 20 px

(二)内部样式表(Internal style sheet)

内部样式表是将 CSS 代码放在 HTML 文档的 <head> 部分的 <style> 标签中。这种方式适用于单个文档需要特殊样式的情况。

示例代码

HTML复制

复制代码
<head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

预览

(三)内联样式(Inline style)

内联样式是直接在 HTML 元素的 style 属性中定义样式。这种方式会将表现和内容混杂在一起,损失样式表的许多优势,但适用于样式仅需要在一个元素上应用一次的情况。

示例代码

HTML复制

复制代码
<p style="color: sienna; margin-left: 20px;">这是一个段落。</p>

预览

三、多重样式的优先级

当不同的样式表或样式定义冲突时,CSS 会根据以下优先级规则来决定最终应用的样式:

  1. 内联样式(Inline style)

  2. 内部样式表(Internal style sheet)

  3. 外部样式表(External style sheet)

  4. 浏览器默认样式

示例

假设外部样式表 style.css 中定义了如下样式:

css复制

复制代码
h3 {
  color: blue;
}

而内部样式表定义了如下样式:

css复制

复制代码
h3 {
  color: green;
}

那么在 HTML 文档中,<h3> 元素的样式将取决于它们的定义顺序:

  • 如果外部样式表在内部样式表之前定义,则 <h3> 元素的颜色将是绿色(内部样式表的规则覆盖外部样式表的规则)。

  • 如果外部样式表在内部样式表之后定义,则 <h3> 元素的颜色将是蓝色(外部样式表的规则覆盖内部样式表的规则)。

示例代码

HTML复制

复制代码
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    h3 { color: green; }
  </style>
</head>
<body>
  <h3>显示绿色,是内部样式</h3>
</body>

预览

如果外部样式表在内部样式表之后定义:

HTML复制

复制代码
<head>
  <style>
    h3 { color: green; }
  </style>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h3>显示蓝色,是外部样式</h3>
</body>
相关推荐
好开心啊没烦恼39 分钟前
Python 数据分析:计算,分组统计1,df.groupby()。听故事学知识点怎么这么容易?
开发语言·python·数据挖掘·数据分析·pandas
lljss20202 小时前
Python11中创建虚拟环境、安装 TensorFlow
开发语言·python·tensorflow
空中湖2 小时前
tensorflow武林志第二卷第九章:玄功九转
人工智能·python·tensorflow
lishaoan772 小时前
使用tensorflow的线性回归的例子(七)
人工智能·tensorflow·线性回归
CodeCraft Studio3 小时前
CAD文件处理控件Aspose.CAD教程:使用 Python 将绘图转换为 Photoshop
python·photoshop·cad·aspose·aspose.cad
Python×CATIA工业智造5 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
千宇宙航5 小时前
闲庭信步使用SV搭建图像测试平台:第三十一课——基于神经网络的手写数字识别
图像处理·人工智能·深度学习·神经网络·计算机视觉·fpga开发
onceco5 小时前
领域LLM九讲——第5讲 为什么选择OpenManus而不是QwenAgent(附LLM免费api邀请码)
人工智能·python·深度学习·语言模型·自然语言处理·自动化
狐凄6 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python