麦田的博客

HTML引入CSS的方法和示例

2020-01-25


HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。

网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让浏览器识别并正确调用CSS。当浏览器读取样式表时,要依照文本格式来读,而且当CSS样式表放在不同的地方,所产生的作用范围也是不同的。在HTML中,主要用四种方法引入CSS:行内式、内嵌式、导入式和链接式。

行内式

即在标记的style属性中设定CSS样式,这种方式本质上没体现出CSS的优势,因此不推荐使用。但是某些情况可以使用,比如只有少量的HTML内容需要指定特殊的CSS样式。示例如下:

这段文字颜色是红色

大号红字

这段文字的背景颜色是黄绿色

嵌入式

和行内式相似,适合单独页面使用,css内容写在之间,示例如下:

<style type=”text/css”>
    P{ color:red }
</style>

导入式

<!-- 导入外部样式:在内部样式表的<style></style>标记之间导入一个外部样式表,导入时用@import。 -->  
<style type="text/css">  
 @import "jisuan.css";  
</style>

链接式

这是最常用的引入方式,效率高,代码美观,维护方便,最能体现DIV+CSS中的内容与显示分离的思想,都是优点!示例如下:

<link href="css.css" rel=”stylesheet” type=”text/css” />

小问题:CSS括号内写到最后一个样式的时候,分号是否需要省略?

可以省略,但是注意添加样式时要加上!


相关内容

  • 网站监控宕机监控服务器监控
  • CDN详解和自建CDN的方法
  • Hugo升级方法和遇到的问题
  • CSS3利用linth-child(n)实现隔几行设置元素
  • vscode的使用经验-编辑md文件
  • 麦田收集的优秀网站
  • RAKsmart主机教程
  • OpenCart商城程序使用经验
  • Win10系统安装Jekyll详细教程
  • 详解网页段落首行缩进
  • 标签

    HTMLCSS教程网站