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>
相关推荐
悦悦子a啊37 分钟前
Python之--基本知识
开发语言·前端·python
jndingxin2 小时前
OpenCV CUDA模块设备层-----高效地计算两个 uint 类型值的带权重平均值
人工智能·opencv·计算机视觉
Sweet锦2 小时前
零基础保姆级本地化部署文心大模型4.5开源系列
人工智能·语言模型·文心一言
笑稀了的野生俊2 小时前
在服务器中下载 HuggingFace 模型:终极指南
linux·服务器·python·bash·gpu算力
Naiva2 小时前
【小技巧】Python+PyCharm IDE 配置解释器出错,环境配置不完整或不兼容。(小智AI、MCP、聚合数据、实时新闻查询、NBA赛事查询)
ide·python·pycharm
hie988943 小时前
MATLAB锂离子电池伪二维(P2D)模型实现
人工智能·算法·matlab
晨同学03273 小时前
opencv的颜色通道问题 & rgb & bgr
人工智能·opencv·计算机视觉
路来了3 小时前
Python小工具之PDF合并
开发语言·windows·python
蓝婷儿3 小时前
Python 机器学习核心入门与实战进阶 Day 3 - 决策树 & 随机森林模型实战
人工智能·python·机器学习
大千AI助手3 小时前
PageRank:互联网的马尔可夫链平衡态
人工智能·机器学习·贝叶斯·mc·pagerank·条件概率·马尔科夫链