菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
61
0

怎么载入css样式?

原创
05/13 14:22
阅读数 721

1.行内式

行内式也称内联样式,是通过标记的 Istyle属性来设置标记的样式,其基本语法格式如下:

<标记名 style= ”属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>

上述语法中,style是标记的属性,实际上任何HTML标记都拥有 style属性,用来设置行内式。属性和属性值的书写规范与Cs样式规则一样,行内式只对其所在的标记及嵌套在其中的子标记起作用。

通常CSS的书写位置是在<head>头部标记中,行内式却是写在<htm>根标记中,例如下面的示例代码,即为行内式CS样式的写法。

<h1 style="font-size:20px;  color:b1ue;">使用CSS行内式修饰一级标题的字体大小和颜色</h1>

在上述代码中,使用<h1>标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。

需要注意的是,行内式是通过标记的属性来控制样式的,这样并没有做到结构与样式分离,所以一般很少使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用< style>标记定义,其基本语法格式如下:

<head>
    <style type="text/css">
        选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
    /style>
</head>

上述语法中,<style>标记一般位于<head>标记中title标记之后,也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的,把CSS代码放在头部有利于提前下载和解析,从而可以避免网页内容下载后没有样式修饰带来的尴尬。除此之外,必须设置type的属性值为“text/css”,这样浏览器才知道< style>标记包含的是CSS代码,因为< style>标记还可以包含其他代码,如 JavaScript代码。

3.外链式

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link/>标记将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<head><1ink href="css文件的路径" type="text/css" re1="stylesheet"  /></head>

上述语法中,<link> 标记需要放在<head>头部标记中,并且必须指定<link/>标记的个属性,具体介绍如下。

  • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

  • type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CS样式表。

  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

外链式是使用频率最高是最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。

4.导入式

@import(url(demo.css))

基本不使用,因为页面会先加载html,然后再去加载css,这样就会造成页面样式的延迟。

创建一个demo.css文件,写上一个css样式

//写在demo.css文件中
h2{
    color:green;
}

使用@import方式导入demo.css文件

//试验了一下,需要单独写在一个style中,
<style>
  @import url(demo.css)
</style>
//写在body标签中
<h2>导入式</h2>

发表评论

0/200
61 点赞
0 评论
收藏
为你推荐 换一批