CSS 入门

CSS文件只是以.css扩展名保存的纯文本文件。

在HTML文档中包含CSS

CSS可以作为单独的文档附加,也可以嵌入HTML文档本身。在HTML文档中包括CSS的三种方法:

  • 内联样式 -使用styleHTML开始标记中的属性。
  • 嵌入式样式 -使用<style>文档头部的元素。
  • 外部样式表 -使用<link>元素,指向外部CSS文件。

内联样式

内联样式用于通过将CSS规则直接放入开始标记中来将唯一样式规则应用于元素。可以使用style属性将其附加到元素。

style属性包括一系列CSS属性和值对。每"property: value"对之间用分号(;)分隔,就像您写入嵌入式样式表或外部样式表一样。但是它必须全部在一行中,即分号后没有换行符,如下所示:

示例

css 复制代码
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

使用内联样式通常被认为是不好的做法。由于样式规则是直接嵌入HTML标记内的,因此会导致演示与文档内容混合在一起。这使得代码难以维护,并否定了使用CSS的目的

嵌入式样式表

嵌入或内部样式表仅影响嵌入它们的文档。

嵌入式样式表在<head>HTML文档的部分中使用<style>元素定义。您可以<style>在HTML文档中定义任意数量的元素,但是它们必须出现在<head></head>标记之间。让我们看一个示例

xml 复制代码
<!DOCTYPE html><html lang="en"><head>
    <title>My HTML Document</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style></head><body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p></body></html>

外部样式表

当样式应用于网站的许多页面时,外部样式表是理想的选择。

外部样式表将所有样式规则保存在一个单独的文档中,您可以从网站上的任何HTML文件进行链接。外部样式表是最灵活的,因为有了外部样式表,您只需更改一个文件即可更改整个网站的外观。

您可以通过两种方式附加外部样式表- 链接导入

链接外部样式表

链接之前,我们需要先创建一个样式表。让我们打开您喜欢的代码编辑器并创建一个新文件。现在,在该文件中键入以下CSS代码,并将其另存为" style.css"。

css 复制代码
body {
    background: lightyellow;
    font: 18px Arial, sans-serif;}h1 {
    color: orange;}

可以使用<link>标记将外部样式表链接到HTML文档。该<link>标签进入内部<head>部分,你可以在下面的示例中看到:

示例

xml 复制代码
<!DOCTYPE html><html lang="en"><head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css"></head><body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p></body></html>

导入外部样式表

@import规则是加载外部样式表的另一种方法。该@import语句指示浏览器加载外部样式表并使用其样式。

您可以通过两种方式使用它。最简单的是在文档的标题内。注意,其他CSS规则可能仍包含在<style>元素中。这是一个示例:

xml 复制代码
<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
  </style>

同样,您可以使用@import规则在另一个样式表中导入样式表。

css 复制代码
@import url("css/layout.css");
@import url("css/color.css");body {
    color: blue;
    font-size: 14px;}

注意: 所有@import规则都必须在样式表的开头出现。样式表中定义的任何样式规则本身都会覆盖导入的样式表中的冲突规则。但是,由于性能问题,不建议在另一个样式表中导入样式表。

引用

菜鸟教程

相关推荐
袁煦丞1 分钟前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor21 分钟前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i26 分钟前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor36 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
前端Hardy1 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆1 小时前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra1 小时前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia1 小时前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Mintopia2 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
Cache技术分享2 小时前
225. Java 集合 - List接口 —— 记住顺序的集合
前端·后端