CSS引入样式

最新推荐文章于 2024-03-06 19:15:00 发布
最新推荐文章于 2024-03-06 19:15:00 发布
阅读量462 收藏 1
点赞数 1
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaowang627/article/details/54694577
版权

一、内联样式，style属性

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>CSS学习</title>
</head>
<body>
	<p style="color:#FF0000; font-size:20px; text-decoration:underline;">第一段</p>
	<p style="color:#000000; font-style:italic;">第二段</p>
	<p style="color:#FF00FF; font-size:25px; font-weight:bold;">第三段</p>
</body>
</html>
二、内嵌样式，嵌入在head中 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>CSS学习</title>
<style type="text/css">
p{
	color:#FF00FF;
	text-decoration:underline;
	font-weight:bold;
	font-size:25px;
}
</style>
</head>
<body>
	<p>第一段</p>
	<p>第二段</p>
	<p>第三段</p>
</body>
</html>
三、 引入外部样式：link 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>CSS学习</title>
<link rel="stylesheet" type="text/css" href="CSS/1.css">
</head>
<body>
	<h2>CSS标题1</h2>
	<p>段落</p>
	<h2>CSS标题2</h2>
	<p>段落2</p>
</body>
</html>
通过右键->properties查看index.jsp路径为：D:\workspace\first\WebRoot\index.jsp，1.css路径为：D:\workspace\first\WebRoot\CSS\1.css

注意：CSS文件夹放在WEB-INF文件夹下识别不了，放在IMA-G文件夹下也识别不了，但是ima-g路径下能识别，难道路径不能为大写字母加-？还是电脑问题？

四、导入外部样式文件import

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>CSS学习</title>
<style type="text/css">
@import "CSS/1.css"
</style>
</head>
<body>
	<h2>CSS标题1</h2>
	<p>段落</p>
	<h2>CSS标题2</h2>
	<p>段落2</p>
</body>
</html>

五、 各种方式优先级

内联>内嵌>外部导入>外部链接





砺晗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习之一 CSS样式的引入
12-12
HTML中，我们通常使用link元素引入外部样式表，link有以下几个属性：1、rel，代表“关系”（relation），在这里，关系（即rel值）为“stylesheet”；2、type，总是设置为“text/css”，描述了使用link加载的数据类型...
css样式的三种引入方式
m0_67372185的博客
03-21 6111
第一种：行内式（也称内联） 直接将样式写在标签中，属于权重最高级别例如： 第二种：内部式 在head中写上style标签，将想要的样式写在style中，再通过id或class引用 第三种：外部式 这种也是工作中使用最多的，遇到代码很多的项目时，通常会在外面新建一个css文件，专门储存样式。看代码时会更方便。通过link标签引入，href后面填引入的css文件名 ...
认识CSS之引入方式
榕城候佳人的博客
03-09 440
样式表优点缺点适用情况控制范围行内样式表书写方便，权重高结构样式混在一起少控制一个标签内部样式表部分结构和样式分离没有彻底分离较多控制一个页面外部样式表完全分离需要引入最多控制多个页面。
css的四种引入方式
weixin_45709829的博客
03-21 1万+
css的四种引入方式 一、行内样式 别名：行间样式、内联样式 写法：在网页元素上通过style=""属性 <div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div> 二、内部样式表 写法：在网页创建嵌入的样式表，写在里面 <head> <style> p{ color:pink; border
css的三种引入方式
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 5932
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值 内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。 外链式是把css样式写入.css文件内，然后通过link标签链接。
CSS的四种引入方式
qq_58782226的博客
07-27 1621
css的四种引入方式
CSS学习之一 CSS样式引入方法
09-25
本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。 首先，外部样式表是通过`<link>`标签来引入的，这通常是推荐的最佳实践。`<link>`标签有四个关键属性： 1. `rel`属性定义了链接...
网页引入css样式的几种方法
09-25
总结起来，不同的CSS引入方式各有优缺点，适用于不同的场景。内联样式适合快速调整单个元素样式，嵌入式和外链式适用于组织复杂的页面布局和样式，而导入式则用于管理和分隔大规模项目的样式代码。在实际开发中，...
huoshanxue#Learn-bit-by-bit#1.22-css引入样式方式1
07-25
css引入的方式有哪些，link和@import的区别是什么有四种形式:1 链入外部样式表，就是把样式表保存为一个样式表文件，然后在页面中用链接这个样式表文件.
CSS样式引用（四种样式）
2301_77721393的博客
05-16 1765
CSS样式引用
【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 1076
一、CSS 引入方式 1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 ) 二、CSS 选择器 1、CSS 基础选择器 2、CSS 复合选择器 后代选择器 子元素选择器 交集选择器 并集选择器 链接伪类选择器
css的4种引入方式--内联样式（标签内style）、内部样式表（＜style＞）、外部样式表（＜link＞、@import）
heshihu2019的博客
12-07 1422
1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。
CSS入门基础之三种引用方式
wshwsh_的博客
07-19 1205
(我们可以通过各种选择器灵性的选择页面的各种元素)。CSS声明总是以分号(;)结束，声明总以大括号({})括起来。
css四种导入方式
爪哇人的博客
10-26 911
浏览器翻译如下： 浏览器翻译如下：html文件： css样式： 目录结构： 浏览器翻译如下：注意： 当三种样式同时存在时：优先级为【行内样式>页内样式>外部样式】，测试如下：如下： 浏览器翻译如下： 发现当三者同时存在时，行内样式的优先级是最高的。 目录结构和上述一致浏览器翻译如下
引入CSS样式的方式
m0_60979337的博客
10-23 1282
CSS引入样式方式
CSS的三种引入方式：外部样式、内部样式和行内样式
热门推荐
Ahua_Core的博客
03-07 2万+
CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级 外部样式 即CSS代码保存在外部，HTML文件通过链接式link或者 导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐
Web前端 | HTML引入CSS样式的三种方式
m0_61933976的博客
10-04 1万+
HTML引入CSS样式的三种方式
css导入样式三种方式
qq_65330380的博客
11-16 614
①下面写入html文件的head标签内，地址为下面括号内。先创建自己的样式存在css文件内。②第二种外部样式 link标签。2.导入外部样式有两种方式。1.内部样式和内嵌样式。
vue引入css样式
09-07
在Vue中引入CSS样式有几种方法： 1. 直接在组件的`<style>`标签中编写CSS样式。这种方法适用于只在当前组件中使用的样式。 ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <style> .my-component { /* CSS样式 */ } </style> ``` 2. 使用`import`语句引入外部的CSS文件。这种方法适用于多个组件共享的样式。 首先，在你的Vue项目的`src/assets`目录下创建一个名为`styles.css`（或其他名称）的CSS文件，并在其中编写所需的样式。 然后，在你的组件中使用`import`语句引入该CSS文件： ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <style lang="css"> /* 可以省略lang="css"，因为默认是CSS语法 */ @import "@/assets/styles.css"; </style> ``` 3. 使用CSS预处理器。如果你在Vue项目中使用了Sass、Less或Stylus等CSS预处理器，可以通过`lang`属性指定相应的预处理器，并在组件中编写对应语法的样式。 例如，使用Sass预处理器： ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <style lang="scss"> .my-component { /* Sass样式 */ } </style> ``` 以上是一些常用的Vue中引入CSS样式的方法，根据你的具体需求选择合适的方式进行样式管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值