CSS 的三种使用方式

144 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第7天,点击查看活动详情

1 内联样式(inline style)

内联样式(inline style),也有人翻译成行内样式。

CSS样式之间用分号 ; 隔开,建议每条CSS样式后面都加上分号 ;

  • 在原生的HTML编写过程中确实这种写法是不推荐的

  • 在Vue的template中某些动态的样式是会使用内联样式的;

    所以,内联样式的写法依然需要掌握。

2 内部样式表(internal style sheet)

将CSS放在HTML文件<head>元素里的<style>元素之中。

3 外部样式表(external style sheet)

  • 外部样式表(external style sheet) 是将css编写一个独立的文件中,并且通过<link>元素引入进来;

  • 使用外部样式表主要分成两个步骤:

    • 第一步:将css样式在一个独立的css文件中编写(后缀名为.css);

    • 第二步:通过元素引入进来;

  • @import:可以在style元素或者CSS文件中使用@import导入其他的CSS文件。如果有用到多个CSS文件,就可以在其中一个CSS文件中引入其它的CSS,那么在HTML文件中只需引入那一个CSS文件就行了