• 技术文章 >web前端 >前端问答

    html怎么插入css样式

    青灯夜游青灯夜游2021-09-14 16:53:34原创96

    html插入css样式的方法:1、使用style属性在特定的HTML标记内插入CSS代码;2、在文档head部分的style标签对中放入CSS代码;3、将CSS代码放入外部CSS文件中,使用link标签引入html文档中。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    一、行内式

    使用style属性在特定的HTML标记内设置CSS样式。

    建议不要使用内联CSS,因为每个HTML标记都需要单独设置样式,如果您只使用内联CSS,管理网站可能会变得十分困难。但是,它在某些情况下很有用。例如,在您无法访问CSS文件或仅需要为单个元素应用样式的情况下。带有内联CSS的HTML页面示例如下所示:

    <body style="background-color:black;">
        <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
        <p style="color:white;">Something usefull here.</p>
    </body>

    二、内嵌式

    内嵌css样式就是把css代码放在特定页面的<head>部分中。内嵌CSS需要放在<style></style>标签之间。

    类和ID可用于引用CSS代码,但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式,这样可以提高加载速度。在某些情况下使用内嵌样式表很有用,比如:向某人发送页面模板, 因为一切都在一个页面中,所以看到预览要容易得多。

    <head>
      <style type="text/css">
        p {color:white; font-size: 10px;}
        .center {display: block; margin: 0 auto;}
        #button-go, #button-back {border: solid 1px black;}
      </style>
    </head>

    三、外联式

    外联式就是使用link标签元素将外部CSS文件(.css文件)引用到HTML页面中,引用需要放在页面的<head>部分中。

    <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    对各个属性的说明:

    一般在定义 <link> 标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

    也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

    提示:在 Firefox 浏览器中可以在菜单中选择“查看 --> 页面样式”选项,然后在子菜单中会显示 title 属性值,只需选择不同的 title 属性值,可以有选择地应用需要的样式表文件。IE 浏览器不支持该功能。

    另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 <link> 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

    外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

    相关推荐:《css视频教程

    以上就是html怎么插入css样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html css样式
    上一篇:css文件更改之后不生效怎么办 下一篇:css怎么设置框线颜色
    线上培训班

    相关文章推荐

    • 如何使用HTML5+CSS3动态画一个笑脸• 使用HTML5 SVG绘制各种雪花图案• 怎么设置css文本不可选中• css隐藏元素的方式有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网