美文网首页视觉艺术
十、CSS引入方式

十、CSS引入方式

作者: honest涛 | 来源:发表于2021-02-03 00:12 被阅读0次

CSS的三种样式表

按照CSS样式的书写的位置(或者引入的方式),CSS样式表可以分为三类:

1.内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中。

<style>
    p {
        line-height: 26px;
        color: red;
    }
</style>
  • <style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中。
  • 通过此种方式,可以方便控制当前整个页面中的元素样式设置。
  • 代码结构清晰,但是并没有实现结构与样式完全分离。
  • 使用内部样式表设定CSS,通常也被称为\color{red}{嵌入式引入},这种方式是我们练习时常用的方式。

2.行内样式表(行内式)

行内样式(内联样式表)是\color{red}{在元素标签内部的style属性中设定CSS样式}。适合于修改简单样式。

<p style="color: red;font-size: 24px;">德玛西亚</p>
  • style其实就是标签的属性
  • 在双引号中间,写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。
  • 使用行内样式表设定CSS,通常也被称为\color{red}{行内式引入}

3.外部样式表(链接式)

实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步:

  1. 新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
  2. 在HTML页面中,使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
link标签属性.png
  • 使用外部样式表设定CSS,通常也被称为\color{red}{外链式}\color{red}{链接式引入},这种方式是开发中常用的方式。

4.CSS引入方式总结

CSS引入方式总结.png

相关文章

  • 十、CSS引入方式

    CSS的三种样式表 按照CSS样式的书写的位置(或者引入的方式),CSS样式表可以分为三类: 1.内部样式表(嵌入...

  • CSS基础(一)

    1.CSS 的引入方式有哪些? CSS 的引入方式有以下三种: 行内样式使用style属性引入CSS样式。 内部样...

  • CSS引入方式及选择器

    CSS层叠样式表 HTML结构和CSS样式如何关键到一起(CSS的引入方式) CSS的引入方式 CSS常用属性 C...

  • CSS入门的那些坑

    几种引入css的方式 分别有用style 属性、style 标签、css link、css import, 引入c...

  • CSS 引入方式

    主要内容: CSS 引入方式介绍 ,link 和 @import区别 。 CSS是什么 层叠样式表 (Cascad...

  • CSS引入方式

    1、行内引入 2、内部引入 将CSS定义在head内 3、外部引入 单独编写CSS文件 在HTML->HEAD中引...

  • CSS引入方式

    CSS的基本语法 1)CSS语法选择器{属性名称1:属性值1;属性名称2:属性值2;...} 2)CSS的引入方式...

  • CSS引入方式

    CSS引入方式 通过 标签引用,最常见也是最推荐的的方式,所有的css代码只存在单独的css文件中,所以具有良好的...

  • css引入方式

      引入css,我把它分为在html文件中引入和在css文件中引入(网上大多称这种方式为导入)两种不同的方式。 一...

  • CSS引入方式

    CSS三种引入方式:内联、页级、外联 来源:http://www.cnblogs.com/ljwk/p/71363...

网友评论

    本文标题:十、CSS引入方式

    本文链接:https://www.haomeiwen.com/subject/kqkutltx.html