CSS引用

最新推荐文章于 2025-12-15 18:15:00 发布

转载最新推荐文章于 2025-12-15 18:15:00 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/ks2686/article/details/126843933

文章标签：

#css #前端 #html

前端开发专栏收录该内容

1 篇文章

订阅专栏

这篇文章探讨了在HTML中应用CSS样式的三种方法：通过链接外部CSS文件，使用内部样式表以及直接在元素内添加行内样式。这些技术对于网页设计和布局至关重要，影响着页面的视觉呈现和结构。

引入外部文件

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css study</title>
    <link rel="stylesheet" href="./01css.css">
</head>

使用内部 CSS 样式

<head>
    <title>Css study</title>
    <style type="text/css">
        .css1 {
            background-color: royalblue;
            height: 50px;
        }
    </style>
</head>

行内样式

 <div style="font-size: 40px;">
            a big words
        </div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哎咿呀哟嘿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Web】 CSS引用方式

Java 技术专栏，从入门到精通，熟悉企业级开发

01-08

2292

想用CSS修饰网页，就需要在HTML文档中引入CSS。CSS提供了4种引用方式，分别是行内式、内嵌式、外链式和导入式。

QT 引用css

高考我军的博客

08-07

1810

QFile qFile(":/shroverview.qss"); qFile.open(QFile::ReadOnly);//读取qss文件，设置样式 if(qFile.isOpen()) { QString qss = qFile.readAll(); this->setStyleSheet(qss); } qFile.close(); 其中":/shroverview.qss"需要提前引入项目...

参与评论您还未登录，请先登录后发表或查看评论

css 引用字体

a_靖的博客

09-23

5388

最近遇到个问题，页面使用的字体要用PingFangSC字体，引入方法如下：简单介绍下PingFangSC字体：（1）苹方-简常规体font-family: PingFangSC-Regular, sans-serif; （2）苹方-简极细体font-family: PingFangSC-Ultralight, sans-serif; （3）苹方-简 ...

Vue引用CSS

weixin_72132360的博客

08-03

1441

在中，很多时候会使用相同效果的css，这个时候我们可以写一个把该样式写入一个css文件，想要使用时就去调用就可以了，关键来了！vue如何去引用这个css文件呢?

css引用 svg图标库,svg 图标文件引入小技巧

weixin_39527487的博客

08-03

4578

今天刚刚get到的一个小技能，忍不住想和大家分享一下，万一有同学不太懂，刚好也可以学习一下(ps：知道的同学可以帮我斧正，感谢！)。惯例，先来简单介绍一下 svg，虽然相信大家都懂????:svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。简单的说就是它是一种矢量图形，体积小，高保真，放大放小都不失真。直接引入...

CSS语法基础——引用方法

2401_89406454的博客

04-13

1241

要想在浏览器中显示出样式表的效果，就要让浏览器能够识别并调用。当浏览器读取样式表时，要依照文本格式来读。这里介绍CSS样式引用的三种方法：定义行内样式，定义内部样式表和链入外部样式表。

theamleaf 引用css

T623048540的博客

12-05

1691

<link rel="stylesheet" th:href="@{/css/index/bootstrap.min.css}">  <link rel="stylesheet" th:href="@{/css/index/font-awesome.min.css}">  &l.

解决CSS引用字体跨域问题

weixin_43968658的博客

03-27

4710

**本文转载自 https://www.cnblogs.com/victorlyw/articles/9970805.html 解决方案就是将文字设置为 base64 编码字体转base64编码网址：https://transfonter.org/ 具体步骤如下：打开刚刚我们经过转换的解压出来的文件，找到stylesheet.css，复制里面内容 @font-face { font-fam...

css引用字体图标时不显示

qinguanjian_优快云的博客

02-08

6984

今天犯了一个非常傻的错误，css引用字体图标时没有显示，只有一个小方框。我第一反应是自己的路径不对，回到css开头：检查@font-face 果然，忘了在url()路径前面加上 …/ fonts/icomoon…加上，还是显示不了。找了半天，才突然发现了问题：字体文件命名时是 font 不是 fonts 和 @font-face 中的不一致，修改过后正常显示。花时间写出来这个及其 ...

html中常用的css引用和js引用，次序以及地址

草叶儿的博客

03-22

1144

关于HTML页面中，css样式和js引用次序的问题。引用各类js，css 之前是没想过这个问题，后来页面报错啦什么的，分析了一下。首先，因为浏览器生成[DOM树](Doument Objecj Model (文本对象类型))的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。 JS和css的引用，一般放在head中也可以放在body后。把引用官方的放在自己编写...

解决vuejs项目里css引用背景图片不能显示的问题

12-12

解决：build->utils.js里，修改：增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

01-19

使用vue打包，通过css引用图片资源。 .img { height: 500px; width: 100%; background: url(./assets/img/1.jpg) no-repeat; background-size: 100%; } 热更新开发环境的效果是这样但打完包出来的页面却报...

unigui_css引用路径

12-10

在Unigui中，正确配置CSS引用路径对于实现美观且响应式的用户界面至关重要。 1. **基本概念** - CSS：是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。 - Unigui：一个基于...

CSS基础详解(2)--Grid网格布局详解

Coding...

12-10

1086

网格布局是一种通过水平与垂直线构成的页面排版方式，由列(column)、行(row)和沟槽(gutter)组成。通过CSS的display: grid属性可创建网格容器，使用grid-template-columns定义列宽（支持px、fr等单位），grid-gap设置间隙。repeat()函数可简化重复轨道定义，minmax()函数能灵活控制行/列尺寸范围。网格分为显式（手动定义）和隐式（自动生成）两种，通过grid-auto-rows可控制隐式行高。网格布局能实现响应式、精确的元素排列，提升页面统一性。

PaperStudio：WYSIWYG文档的Web实现——从CSS Print到客户端PDF生成的技术解析

xinyu_Jina的博客

12-15

570

通过精确控制页面布局、利用 SVG/Canvas 进行高保真渲染，并结合客户端库实现安全的 PDF 导出，这类工具成功地将传统的桌面级排版功能带到了 Web 平台。它将复杂的 CSS Print 规则和 PDF 生成逻辑，封装在了一个用户友好的交互界面中。将 CSS Print 规范、矢量渲染和客户端 PDF 生成技术结合，使得 Web 应用具备了媲美桌面级软件的文档处理能力。等客户端库，在不依赖后端服务器的情况下，将动态生成的 DOM 结构安全、高效地转换为高质量的 PDF 文档。

avue uploader图片预览拉伸变型的css处理方法

经验之谈，不做搬运工

12-10

300

摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。

CSS 文本描边最稳方案：多重 text-shadow 实现清晰黑描边

apple_70049717的博客

12-10

314

在前端页面中，当文字内容处于复杂背景（如视频画面、图片区域）之上时，白色字体很容易与背景混合导致不清晰。左上、右上、左下、右下 4 个角方向。描边厚度：由偏移量（如 2px）决定。无模糊：确保边缘硬朗，不会糊成光晕。是最有效的增强可读性的方法。上、下、左、右 4 个方向。

[Web自动化] CSS基础概念和介绍

最新发布

知智

12-15

145

CSS（层叠样式表）是控制网页样式的语言，能将网页内容与表现分离。它具有样式丰富、层叠性和继承性等特点，可通过内嵌式、外联式和行内式三种方式引入HTML文档。CSS基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器，分别用于选择HTML元素、类属性元素、ID属性元素和所有元素。这些特性使CSS成为网页美化和布局的核心技术。

CSS Grid 布局指南：构建现代 Web 二维布局的完整体系

小李同学的博客

12-09

1098

CSS Grid布局革命性地改变了Web开发范式，实现了原生二维布局能力。摘要如下：范式转变：Grid终结了依赖浮动/定位等hack布局的历史，提供了容器驱动的声明式布局方案（150字限制，此处略去部分内容）核心模型：同时定义行/列轨道支持弹性单位(fr)和智能自适应(minmax()) 严格的W3C术语体系关键特性：显式/隐式网格分离控制基于逻辑方向的国际化支持响应式布局最佳实践（auto-fit + minmax）语义化的网格线命名和区域模板技术优势：解耦HTML结构与布局减少嵌

css引用链接

09-07

CSS引用链接常见的方法有外链式和导入式，以下是相关介绍及示例： ### 外链式外链式是最常见且被推荐的引入CSS的方式，使用`<link>`标签在HTML文件的`<head>`标签中引用外部的CSS文件。所有的CSS代码只存在于单独的CSS文件中，具有良好的可维护性，且CSS文件会在第一次加载时引入，以后切换页面时只需加载HTML文件即可。其语法及示例如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用外部 CSS 示例</title> <link rel="stylesheet" href="styles.css">  </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> ``` 其中，`rel="stylesheet"` 表示这是一个样式表文件；`type="text/css"` 指定文件类型为 CSS（现在可以省略，默认就是 CSS）；`href="styles.css"` 指定外部 CSS 文件的路径，这里是相对路径，也可以使用绝对路径或 URL [^2][^5]。 ### 导入式使用`@import`规则在CSS文件中或HTML的`<style>`标签内导入其他CSS文件。不过，当一个页面被加载时，`<link>`标签引用的CSS样式表将同时被加载，而`@import`引用的CSS样式表会等页面全部下载完才被加载。因此，当用户的网速较慢时，会先显示没有CSS修饰的网页，造成不好的用户体验，所以大多数网站采用外链式CSS [^1]。在CSS文件中使用`@import`的示例： ```css /* main.css */ @import url("styles.css"); ``` 在HTML的`<style>`标签内使用`@import`的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用 @import 引用 CSS 示例</title> <style> @import url("styles.css"); </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> ```