首页 > 软件开发 > PHP >

如何将CSS样式和HTML相结合

来源:互联网 2023-03-16 19:20:59 版权归原作者所有,如有侵权,请联系我们

我们平时浏览网页的时候看到的哪些丰富的色彩和图案都是由CSS样式和HTML相结合产生的效果,那么问题来了CSS是写在HTML的哪些地方呢?今天小编就给大家介绍下CSS 样式是如何和HTML相结合的。7fn办公区 - 实用经验教程分享!

如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

方法/步骤

  • 1

    最简单粗暴的方法就是直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=""双引号中才可以,例如:p style="color:red">这里文字是红色。/7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 2

    如果想让HTML标签和css样式区分开来,我们可以采取将css样式代码写在style type="text/css">/style>标签之间,并且这里的style>/style>可以写在head>/head>标签之间或者body>/body>标签之间,效果都是一样的。例如下面代码实现把一个标签中的文字设置为红色:7fn办公区 - 实用经验教程分享!

    style type="text/css">7fn办公区 - 实用经验教程分享!

    p{7fn办公区 - 实用经验教程分享!

    color:red;7fn办公区 - 实用经验教程分享!

    }7fn办公区 - 实用经验教程分享!

    /style>7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 3

    有些人会觉得以上两种HTML和css的结合都是在同个页面,代码量多的情况下就不好区分了,这时我们可以创建一个外部css样式文件。右键点击桌面先创建一个记事本文档,然后将文档的扩展名改为“.css”。将该css样式文件与HTML放在同个磁盘中以便调用。7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 4

    将css样式文件创建好后,使用Sublime编辑器打开css样式文件,在文件里面编写相应的css样式,例如下面代码实现把一个标签中的文字设置为红色:7fn办公区 - 实用经验教程分享!

    p{7fn办公区 - 实用经验教程分享!

    color:red;7fn办公区 - 实用经验教程分享!

    }7fn办公区 - 实用经验教程分享!

    其中在{}之前的p是“选择器”,“选择器”是用来指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 5

    准备好这个css样式文件后,回到HTML文件,在head>/head>标签内使用link>标签将css样式文件链接到HTML文件内,如下面代码:7fn办公区 - 实用经验教程分享!

    link href="save.css" rel="stylesheet" type="text/css" />7fn办公区 - 实用经验教程分享!

    其中rel="stylesheet" type="text/css" 是属于固定写法,记住即可。7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 6

    以上三种方式都可以将HTML和css相结合,那么如果三种方式同时使用的情况,哪种方式会生效呢,答案就是:就近原则(离被设置元素越近优先级别越高)。7fn办公区 - 实用经验教程分享!

    如何将CSS样式和HTML相结合?7fn办公区 - 实用经验教程分享!

  • 注意事项

    • 如果觉得本篇经验对您有所帮助,欢迎点赞,投票,收藏,关注小编。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!7fn办公区 - 实用经验教程分享!


    标签: CSSHTMLPHP

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号