本节学习CSS风格的几种形式。 在实际应用中向HTML导入CSS风格的方法有内嵌风格、内部风格、外部风格3种。 依次学习这三种方式的优缺点和应用场景,本节首先介绍内联型式。
什么是内嵌样式? 实际上,从名字可以看出其特征。 直接在HTML标签中使用style属性设置CSS样式。 例如:
p style=’font-size: 18px;’ 通过使用内联样式/p HTML的style属性,可以更改所有HTML元素的样式,如下所示:
标签style=’样式声明1; 风格宣言2; 请记住,样式声明3’/标记在每个样式声明之间使用分号; 哟,否则风格会失效。
例如,以下代码使用CSS内联样式将第一段的字体设置为20px,并将颜色显示为红色并以粗体显示: 第二个段落的字体大小设置为16px,颜色为绿色,倾斜显示。
呃! doctypehtmlheadmetacharset=’ utf-8 ‘ title CSS学习(9xkd.com)/title/headbodypstyle=’ font-size 336020 px; 颜色:红色; 字体权重: bold;’ 欢迎来到侠岛! /p p style=’font-size: 16px; color :绿色; 字体样式: italic;’ 欢迎来到侠岛! /p /body/html浏览器中的效果演示:
总结内嵌样式既简单又方便。 直接从style属性为HTML标签设置样式就可以了。 但是,内联样式只对当前HTML标签起作用。 这意味着如果要在多个标签中使用相同的样式,则必须多次设置。
由于内嵌样式都写在HTML标签中,这种方式无法将内容和表达分离,本质上没有体现出CSS的优势。
如果在大型APP应用程序中对所有标签使用内联样式,则不建议使用这种方法设置样式,因为这不仅会导致代码冗长,而且会增加后期的维护。
链接: https://www.9xkd.com/