专栏首页编程在HTML中如何使用CSS?

在HTML中如何使用CSS?

一、前言

在 HTML 中使用 CSS,包括内联式内嵌式链接式导入式

二、分类

2.1 内联式

内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记使用 属性,将 CSS 代码直接写在其中。

内联式是最简单、直接的 CSS 使用方法,但它的针对性很明显,只能作用于当前标记,造成代码冗余,维护比较困难。

2.2 内嵌式

内嵌式与内联式使用方法不同,它将 CSS 代码写在 标记之间,并需要采用 标记进行声明。

使用内嵌式 CSS 用法时 CSS 代码将被集中放在 标记中,这样方便查找,对后期维护比较方便,页面代码也会减少。但是,如果一个网站有很多页面,如果多个网页的某个标记要使用相同的样式效果,内嵌式也会 出现代码冗余和维护困难的问题,所以,内嵌式比较适合个别风格特殊的页面效果设置。

2.3 链接式

在实际的网页设计中,链接式 CSS 用法是最常用的,也是效果最好的。链接式特点是将 CSS 代码单独放在一个或多个 文件中,实现了 CSS 代码和 HTML 代码的分离,这样使前期设计和后期维护都很方便,也有助于实现前台美工设计与后台程序设计人员的合理分工。

链接式 CSS 使用时需要在 标记中使用 标记,通过 标记的相关属性指明外部 CSS 文件的路径,以方便找到其中定义的 CSS 样式并运用在当前网页元素上。

链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离,这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS,可以在设计整个网站时,将多个页面都会用到的 CSS 样式定义在一个或多个 文件中,然后在需要用到该样式的 HTML 网页中通过 标记链接这些 文件,通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。

2.4 导入式

导入式和链接式的用法基本相同,区别在于语法和使用方式上略有不同。导入式通过在 标记的 标记中使用 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时,会将该 CSS 文件导入 HTML 文件中,作为此 HTML 文件的一部分,类似于内嵌式的效果,而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。

不只是 HTML 文件的 标记可以导入 CSS 文件,在 CSS 文件内也可以导入其他的 CSS 文件。例如,可以在 文件中不写任何 CSS 代码,只写 ,这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 中定义的所有样式效果。

三、提醒

如果你网页中使用多种方式,样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则:

内联式 > 内嵌式 > 外部样式;

在多个样式中,后出现的样式的优先级高于先出现的样式;

在样式中,选择器的优先级: 样式 > 样式 > 标记样式。

为了避免 CSS 冲突,建议你不要混合使用多种,强力推荐使用链接式。

原文:https://segmentfault.com/a/1190000004656895

本文来自企鹅号 - 网页设计自学平台媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2017年最佳的20款css工具

    1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

    企鹅号小编
  • 快手为何能成为现象级产品?还原2017年最火短视频背后的商业逻辑

    在移动互联网迅猛发展的背景下,近年来短视频也呈现了欣欣向荣之势,随着市场需求的井喷,这一领域规模不断扩大,并开始出现“独角兽”,以快手为例,这款短视频APP在流...

    企鹅号小编
  • 小白必知HTML+CSS编写规范

    一、文档规范 1.HTML和CSS文档必须采用UTF-8(不包括Unicode签名BOM)编码格式; 2.HTML和CSS文档换行符必须采用UNIX/LINUX...

    企鹅号小编
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431
  • 7 个开放式 CSS 面试题及回答策略 [每日前端夜话0x2E]

    这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。

    疯狂的技术宅
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • CSS模块化的演进

    ? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

    腾讯NEXT学位
  • 学习前端 大纲(Beta)

    Joel
  • 什么是CSS预处理器

    小胖
  • awesome-css-cn命名习惯和方式参考其他资源原文链接

    CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

    琯琯

扫码关注云+社区

领取腾讯云代金券