css 引入样式

于 2024-07-18 16:24:32 发布
阅读量168 收藏
点赞数 5
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan52/article/details/140525792
版权

内联样式（行内样式）

953a5e66ac3243edacef0549748e1b62.jpg

 缺点：缺乏整体性和规划性，不利于维护 ，维护成本高。

内部样式：

5b0964c73474424f9027536c18b55392.jpg

 6921dabb3154451c83d0837bda12a9f2.jpg

 外部样式：

c5ba66727da0489ea2cae3ad3efa0ca4.jpg

ba4e3810f66141ac851869889811e8c6.jpg

a6cfb665ad2c43a2810cd2fb042a1067.jpg 

在外部新建一个新的文件名.CSS，后面在所需的文件中，在 head 部分，添加 link 标签，引入文件名.CSS 。

重零学编程
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS学习之一 CSS样式引入方法
09-25
本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。 首先，外部样式表是通过`<link>`标签来引入的，这通常是推荐的最佳实践。`<link>`标签有四个关键属性： 1. `rel`属性定义了链接...
网页引入css样式的几种方法
09-25
总结起来，不同的CSS引入方式各有优缺点，适用于不同的场景。内联样式适合快速调整单个元素样式，嵌入式和外链式适用于组织复杂的页面布局和样式，而导入式则用于管理和分隔大规模项目的样式代码。在实际开发中，...
css样式文件的引入方式
m0_71939262的博客
01-09 670
link和@import 引入样式文件
CSS样式的引入方式
c3029971364的博客
03-05 435
一般地，由于每个网站都不可能只有一个页面，若干个页面中相同的HTML标记都要求有相同的样式，此时使用内嵌式就显得比较笨重，而使用链接式可以很好地解决这一问题。链接式引入CSS样式文件时通过link标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，该属性用于指定需要引入的CSS文件的路径。内嵌式的形式没有行内式表现得直接，但是内嵌式可以同时为多个标签设置样式，并且只需要修改一处即可全部改变，比起行内式更加方便。众所周知CSS样式有四种方式：行内式、内嵌式、链接式和导入式。
css样式的三种引入方式
m0_67372185的博客
03-21 6104
第一种：行内式（也称内联） 直接将样式写在标签中，属于权重最高级别例如： 第二种：内部式 在head中写上style标签，将想要的样式写在style中，再通过id或class引用 第三种：外部式 这种也是工作中使用最多的，遇到代码很多的项目时，通常会在外面新建一个css文件，专门储存样式。看代码时会更方便。通过link标签引入，href后面填引入的css文件名 ...
全局引入css样式
LH2HA3的博客
07-01 1338
vue中使用全局css演示提升开发效率
引入CSS样式的方式
m0_60979337的博客
10-23 1279
CSS引入样式方式
css引入
RzhenDwo的博客
11-12 926
css引入
CSS引入样式的三种方式
qq_41884544的博客
02-02 1078
一、行内样式 <div style="width:100px; height:200px"></div> 注：行内样式一般用于测试，不用于实际开发 二、内部样式表 在style标签中写css样式，在head标签中写style标签 <style> div{ width:100px; height:200px; } </style> 三、外部样式表 css代码写在外部css文件中，在HTML文件中引入css文件有两种方式：link，@im
CSS的四种引入方式
qq_58782226的博客
07-27 1617
css的四种引入方式
CSS样式引入方式
qq_51194826的博客
06-06 1479
2.引入方式 一般的方式有4种 行内样式 内嵌样式 外链样式 导入样式 2.1行内样式
react css样式引入
沉淀，积累、进步
04-10 236
react 样式简单引用
CSS学习之一 CSS样式的引入
12-12
HTML中，我们通常使用link元素引入外部样式表，link有以下几个属性：1、rel，代表“关系”（relation），在这里，关系（即rel值）为“stylesheet”；2、type，总是设置为“text/css”，描述了使用link加载的数据类型...
huoshanxue#Learn-bit-by-bit#1.22-css引入样式方式1
07-25
css引入的方式有哪些，link和@import的区别是什么有四种形式:1 链入外部样式表，就是把样式表保存为一个样式表文件，然后在页面中用链接这个样式表文件.
基于CSS两种菜单创建方式
sunbeacher的博客
07-13 950
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 498
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1125
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 402
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 534
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
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、付费专栏及课程。

余额充值