CSS三种插入样式表格式

时间:2021-07-22 14:57:40

首先简单理解浏览器与网页的交互过程

CSS三种插入样式表格式

CSS样式表(stylesheet)

  cascading style sheet 级联样式表

  表现HTML或XHTML文件样式的计算机语言:包含对字体、颜色、边距、高度、背景图片、网页定位等设定

  css优势:内容于表现分离

  网页的表现统一,容易修改

  丰富的样式,使得页面布局更加灵活

  减少网页的代码量,增加网页的浏览速度,节省网络带宽

  运用独立于页面的css有利于网页被搜索引擎收录

插入CSS样式表分为三种:

外部样式表(External style sheet)

链接式与导入式的区别

<link rel=”stylesheet” type=”text/css”

href=”path”>

<style type="text/css">

@import url(path);

</style>

<link/> 标签属于XHTML,@import是属于CSS2.1

使用<link/> 链接的CSS文件先加载到网页当中再进行编译显示

使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

内部样式表(Internal style sheet)

CSS代码写在<head>的<style>标签中

<style>

h1{color:green;}

</style>

优点:方便在同页面中修改样式

缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。

内联样式(Inline style)

使用style属性引入CSS 样式

<h1 style=”color:red;”>style属性的应用</h1>

<p style=”font-size:14px;color:green;”>直接在HTML标签中设置样式</p>