广告
返回顶部
首页 > 资讯 > 前端开发 > html >HTML中应用CSS的三种方法分别是什么
  • 966
分享到

HTML中应用CSS的三种方法分别是什么

2024-04-02 19:04:59 966人浏览 薄情痞子
摘要

本篇文章给大家分享的是有关html中应用CSS的三种方法分别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。你对把CSS应用到HTML中去

本篇文章给大家分享的是有关html中应用CSS的三种方法分别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

你对把CSS应用到HTML中去的方法是否了解,这里和大家分享一下,主要有内联,内部和外部三种途径可以把CSS应用到Html中去,内部样式服务于整个当前页面,外部样式为整个网站的多个页面服务,而内联样式通过style属性直接套进HTML中去,相信本文介绍一定会让你有所收获。

HTML中应用CSS的三种方法

有三条途径可以把CSS应用到HTML中去。

内联

内联样式通过style属性直接套进HTML中去。

看起来像这样:

示例代码

<pstylepstyle="color:red">text</p>

这将会是指定的段落变成红色。

我们的建议是,HTML应该是独立的、样式自由的文档,所以内联样式无论在什么情况下都应该尽量避免。

内部

内部样式服务于整个当前页面。在头标签head里面,样式标签style里包含当前页面的所有样式。

看起来像这样:

示例代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSSExample</title> <styletypestyletype="text/css">p{color:red;}a{color:blue;}</style> </head> <body> </body> </head> </html>

这将使这个页面的所有段落都是红色的,所有的连接都是蓝色的。内联样式类似,你应该是HTML文档和CSS文档分离开来。

外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档,简单的一个范例如下:

示例代码

p{color:red;}a{color:blue;}

如果这个文档存为“WEB.css”的话,它可以这样跟HTML文档连接起来:

示例代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSSExample</title> <linkrellinkrel="stylesheet"type="text/css"href="web.css"/> </head> <body> </body> </head> </html>

保存HTML文档,现在已经把HTML和CSS连接起来了,在你的html中就可以运用你在css文件中定义的css标签了。

以上就是HTML中应用CSS的三种方法分别是什么,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网html频道。

--结束END--

本文标题: HTML中应用CSS的三种方法分别是什么

本文链接: https://www.lsjlt.com/news/83018.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML中应用CSS的三种方法分别是什么
    本篇文章给大家分享的是有关HTML中应用CSS的三种方法分别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。你对把CSS应用到HTML中去...
    99+
    2022-10-19
  • css3的三种使用方法分别是什么
    这篇文章给大家介绍css3的三种使用方法分别是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。css3的三种使用方法:1、内联样式,语法为“<元素 style="cs...
    99+
    2022-10-19
  • SAP Fiori应用的三种部署方式分别是什么
    本篇文章为大家展示了SAP Fiori应用的三种部署方式分别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。封面图片来自Google搜索,关键字: Fiori Deployment方式1 On ...
    99+
    2023-06-04
  • redis的三种启动方式分别是什么
    小编给大家分享一下redis的三种启动方式分别是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!redis有三种启动方式,分别是:直接启动、使用redis启动脚本设置开机自启动、通过指定...
    99+
    2022-10-18
  • CSS中解决div列高度自适应的3种常用方法分别是什么
    CSS中解决div列高度自适应的3种常用方法分别是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。向大家介绍一下解决div列高度自适的3...
    99+
    2022-10-19
  • 进入Win7安全模式的三种方法分别是什么
    这期内容当中小编将会给大家带来有关进入Win7安全模式的三种方法分别是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。方法一、开机按F8键进入1、我们在重启或者电脑开机的时候,在进入Windows系统启...
    99+
    2023-06-05
  • css颜色的4种写法分别是什么
    这篇文章将为大家详细讲解有关css颜色的4种写法分别是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css颜色有4种写法:1、使用颜色名,例red、black、gray等;2、使用十六进制数值,例“#...
    99+
    2023-06-06
  • JavaScript中创建对象的三种方式分别是什么
    JavaScript中创建对象的三种方式分别是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Javascript中的一切几乎都是对象,...
    99+
    2022-10-19
  • Spring中接口注入的三种方式分别是什么
    本篇文章为大家展示了Spring中接口注入的三种方式分别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Spring中 接口注入的三种方式,上面的代码中,ClassA依赖于Interf...
    99+
    2023-06-17
  • css设置行间距的三种方法是什么
    本篇内容主要讲解“css设置行间距的三种方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css设置行间距的三种方法是什么”吧!1、使用数值来设置行间距<!DOCTYPE ...
    99+
    2023-06-30
  • php中fpm的三种模式分别是什么
    这篇文章主要介绍“php中fpm的三种模式分别是什么”,在日常操作中,相信很多人在php中fpm的三种模式分别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php中fpm的三种模式分别是什么”的疑惑有所...
    99+
    2023-06-20
  • Linux系统更改主机名的三种方法分别是什么
    这篇文章主要为大家分析了Linux系统更改主机名的三种方法分别是什么的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Linux系统更改主机名的三种方法分别是什...
    99+
    2023-06-28
  • MySQL中有三种删除数据的方式分别是什么
    小编给大家分享一下MySQL中有三种删除数据的方式分别是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在 MySQL 中有三...
    99+
    2022-10-18
  • struts2文件上传采用的三种方式分别是什么
    本篇文章给大家分享的是有关struts2文件上传采用的三种方式分别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。文件上传几乎是每个项目实现的一个必须的模块。上传就是将信息...
    99+
    2023-06-17
  • java中的4种循环方法分别是什么
    本篇文章为大家展示了java中的4种循环方法分别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。java循环结构顺序结构的程序语句只能 被执行一次。如果你要同样的操作执行多次,就需要使用循环结构...
    99+
    2023-06-22
  • 将html与css分开的方法是什么
    这篇文章主要介绍“将html与css分开的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“将html与css分开的方法是什么”文章能帮助大家解决问题。 工...
    99+
    2022-10-19
  • JavaScript实现JS弹窗的三种方式分别是什么
    这期内容当中小编将会给大家带来有关JavaScript实现JS弹窗的三种方式分别是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、前言html和css的学习大致完成,我们进入重要的JavaScrip...
    99+
    2023-06-26
  • 使用javascript解析二维码的三种方式分别是什么
    使用javascript解析二维码的三种方式分别是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、使用javascript解析二维码1、二维码是什么二维码就是将我们能...
    99+
    2023-06-25
  • 解决Linux动态库依赖问题的三种实用方法分别是什么
    解决Linux动态库依赖问题的三种实用方法分别是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 概述平时在编译安装某个软件时,如果自定义了一些安装目录,安装后...
    99+
    2023-06-16
  • Linux Shell中三种引号的用法及区别是什么
    这篇文章主要为大家展示了“Linux Shell中三种引号的用法及区别是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux Shell中三种引号的用法及区别是什么”这篇文章吧。Linu...
    99+
    2023-06-09
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作