CSS 的三种使用方式

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

image.png


1 内联样式(inline style)


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


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


  • 在原生的HTML编写过程中确实这种写法是不推荐的
  • 在Vue的template中某些动态的样式是会使用内联样式的;


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


image.png


2 内部样式表(internal style sheet)


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


image.png


3 外部样式表(external style sheet)


  • 外部样式表(external style sheet) 是将css编写一个独立的文件中,并且通过<link>元素引入进来;
  • 使用外部样式表主要分成两个步骤:
  • 第一步:将css样式在一个独立的css文件中编写(后缀名为.css);
  • 第二步:通过元素引入进来;


image.png


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


image.png


image.png

目录
相关文章
|
3月前
|
前端开发 UED
css基础
css基础
14 0
|
6月前
|
前端开发 UED
CSS基础讲解
CSS(层叠样式表,Cascading Style Sheets)是一种用于描述网页元素样式的标记语言。它与HTML一起使用,可以控制网页的布局、字体、颜色、大小、背景等各种外观和样式。 通过在HTML文档中引入CSS样式表,可以简化网页设计和维护过程。通过将样式应用到HTML元素上,可以更改元素的外观,而无需修改HTML本身。这种分离的结构使得样式和内容可以独立开发和管理。
63 1
|
机器学习/深度学习 人工智能 前端开发
【CSS】CSS列表【CSS基础知识详解】
【CSS】CSS列表【CSS基础知识详解】
|
人工智能 前端开发 JavaScript
CSS基础(4)
为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
56 1
|
前端开发
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
|
前端开发
CSS 基础(下)
CSS 基础(下)
76 0
CSS 基础(下)
|
前端开发
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
|
前端开发
CSS基础04
CSS基础04
110 0
CSS基础04
|
前端开发 搜索推荐
CSS基础03
CSS基础03
164 0
CSS基础03
|
前端开发 Android开发 容器
CSS基础02
CSS基础02
127 0
CSS基础02