首页 前端知识 【Web】 CSS引用方式

【Web】 CSS引用方式

2024-01-24 15:01:50 前端知识 前端哥 424 305 我要收藏

听人劝,吃饱饭,评论请移步置顶第一篇。

前言

想用CSS修饰网页,就需要在HTML文档中引入CSS。
CSS提供了4种引用方式,分别是行内式、内嵌式、外链式和导入式。

1. 行内式

行内式也被称为内联式,可以通过style属性设置标签的样式。行内式基本语法格式如下:

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

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

通常CSS位于头部标签中,但是行内式CSS位于根标签中。例如,下面的示例代码即为行内式CSS样式的写法。

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

在上述代码中,使用

标签的style属性设置行内式CSS样式,用于修饰一级标题的字体和颜色。行内式CSS展示效果如上图。

要注意一点,行内式是通过标签的属性来控制样式的,这样并没有做到结构与样式分离,所以不推荐使用。

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标签中,并用

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

在上述语法中,

例如:

<head>
    <meta charset="UTF-8">
    <title>CSS内嵌式的练习网站</title>
    <style type=
转载请注明出处或者链接地址:https://www.qianduange.cn//article/137.html
评论
发布的文章

Element-ui 滚动条美化

2024-02-02 09:02:04

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!