html中怎么插入CSS？css插入html的四种方法介绍（附代码）

本篇文章给大家带来的内容是关于html中怎么插入CSS？css插入html的四种方法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.注释：
(1).html的注释:
(2).css的注释：/*  *

2.HTML中插入CSS（层叠样式表）的方法
(1).行内样式 (在标签后面直接写样式)

nbsp;html>


   <meta>
   <title>行内样式</title>
   
   
    <p>html中插入css样式的方法:1 行内样式；2 内部样式； <br>3 外部样式； 4 导入样式；</p>
    
    

(2)嵌入式（将样式和html语言分开写）

nbsp;html>
   <meta>
   <title>行内样式</title>
   <style>
   p{    text-decoration:underline;    text-align:center;    font-size:26px;    font-family:宋体;    font-weight:bolder;    text-transform:lowercase;    letter-spacing:4px;    color:pink;    background-color:green;   }

   </style>
    <p>HTML中插入CSS样式的方法:
        1 行内样式；2 内部样式； <br>
        3 外部样式； 4 导入样式；    </p>

3.外部样式（链接式：将CSS和HTML分开写）！！！！最常用
first.html

nbsp;html>
   <meta>
   <title>行内样式</title>
   <link>
    <p>HTML中插入CSS样式的方法:
        1 行内样式；2 内部样式； <br>
        3 外部样式； 4 导入样式；    </p>

first.css

p{    text-decoration:underline;/*加下划线*/
    text-transform:lowercase;/*大写字母全部小写*/
    text-align:center;/*居中*/
    font-size:23px;/*字体大小*/
    font-family:黑体;/*设置字体*/
    font-style:italic;/*设置字倾斜*/
    text-indent:3px;/*设置首行缩进*/
    color:red;/*设置字体颜色*/
    background-color:#ddd;/*设置背景颜色*/
    letter-spacing:4px;}

4.导入式
first.html

nbsp;html>
   <meta>
   <title>行内样式</title>

   <style>
    @import url(first.css);   </style>
    <p>HTML中插入CSS样式的方法:
        1 行内样式；2 内部样式； <br>
        3 外部样式； 4 导入样式；    </p>

first.css

p{    text-decoration:underline;/*加下划线*/
    text-transform:lowercase;/*大写字母全部小写*/
    text-align:center;/*居中*/
    font-size:33px;/*字体大小*/
    font-family:黑体;/*设置字体*/
    font-style:italic;/*设置字倾斜*/
    text-indent:3px;/*设置首行缩进*/
    color:red;/*设置字体颜色*/
    background-color:#ddd;/*设置背景颜色*/
    letter-spacing:4px;}

相关推荐：

JavaScript动态插入CSS的方法_javascript技巧

HTML中引入CSS的方法

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！