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

目录
相关文章
|
8天前
|
前端开发
|
8月前
|
前端开发
CSS基础
CSS基础
58 0
|
7月前
|
机器学习/深度学习 人工智能 前端开发
【CSS】CSS列表【CSS基础知识详解】
【CSS】CSS列表【CSS基础知识详解】
|
9月前
|
人工智能 前端开发 JavaScript
CSS基础(4)
为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
37 1
|
9月前
|
存储 人工智能 前端开发
CSS基础(3)
CSS 的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子Box 。 利用 CSS 设置好盒子样式,然后摆放到相应位置。 往盒子里面装内容。 网页布局的核心本质:就是利用 CSS 摆盒子。
110 1
|
前端开发 JavaScript
CSS基础理解(1)
CSS基础理解(1)
80 0
|
前端开发 Java SEO
【CSS详解】一文掌握CSS基础用法(上)
【CSS详解】一文掌握CSS基础用法(上)
150 0
|
前端开发
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
|
前端开发
CSS 基础(下)
CSS 基础(下)
61 0
CSS 基础(下)
|
缓存 前端开发 JavaScript
CSS 基础(上)
CSS 基础(上)
116 0
CSS 基础(上)

热门文章

最新文章