HTML中CSS的三种写法

红太狼 2023-09-23 17:01 79阅读 0赞

原文网址：[HTML中CSS的三种写法\_IT利刃出鞘的博客-CSDN博客][HTML_CSS_IT_-CSDN]

## 简介 ##

本文介绍在前端HTML中写CSS的三种方法。

有内联样式、内部样式、外部样式。优先级为：内联样式 > 内部样式 > 外部样式。当同一个样式在不同位置定义时，会使用优先级高的样式。

## 内联样式 ##

行内样式，又叫做标签样式，写在标签的 style 属性上。

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div style="color: green">
        这是div元素
    </div>
    
    </body>
    </html>

## 内部样式 ##

将CSS样式写到页面头部，写在<style></style>之间。

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            div {
                color: green;
            }
        </style>
    </head>
    
    <body>
    
    <div>
        这是div元素
    </div>
    
    </body>
    </html>

## 外部样式 ##

把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内。

**CSS文件（demo.css）**

div {
        color: green;
    }

**HTML文件**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <link rel="stylesheet" href="./demo.css">
    </head>
    
    <body>
    
    <div>
        这是div元素
    </div>
    
    </body>
    </html>

[HTML_CSS_IT_-CSDN]: https://knife.blog.csdn.net/article/details/128099669

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML设置标签的CSS三种方式

*第一种:用cssText** div.style.cssText='width:600px;height:250px;border:1px red solid...

迷南。/ 2024年04月17日 05:42/ 0 赞/ 11 阅读

相关 HTML中CSS的三种写法

原文网址：[HTML中CSS的三种写法\_IT利刃出鞘的博客-CSDN博客][HTML_CSS_IT_-CSDN] 简介本文介绍在前端HTML中写CSS的三种方法。

红太狼/ 2023年09月23日 17:01/ 0 赞/ 80 阅读

相关 for循环的三种写法

1、遍历循环 for (循环变量类型循环变量名称；循环条件；更新语句) 循环体 String[] arr = { "a", "b", "c", "d" };

青旅半醒/ 2022年10月11日 13:36/ 0 赞/ 242 阅读

相关 HTML引入css样式的三种方式，css选择器的三种样式

文章目录前言一. css样式的三种方式第一种：内联定义方式第二种：样式块

青旅半醒/ 2022年10月05日 00:53/ 0 赞/ 198 阅读

相关 css文件链接html的三种方式

<!--<html>

野性酷女/ 2022年08月26日 15:36/ 0 赞/ 157 阅读

相关 HTML特殊字符的html、js、css写法汇总

⇠ 箭头类 <table style="color:rgb(68,68,68);line-height:24px;font-family:'microsoft yahe

超、凢脫俗/ 2022年05月21日 08:59/ 0 赞/ 175 阅读

相关 CSS的三种写法，你知道吗？

CSS（层叠样式表）英文全称：Cascading Style Sheets CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言

深碍√TFBOYSˉ_/ 2022年02月22日 23:46/ 0 赞/ 252 阅读

相关 html/css 相对路径引用写法

/ 代表根目录，慎用 …/ 代表上一级目录 …/…/ 代表上两级目录 /… 代表下级目录 /…/… 代表下两级目录标准写法：同级直接引用文件名 <l

蔚落/ 2022年02月21日 07:54/ 0 赞/ 221 阅读

相关 CSS样式的三种写法以及优先级

1 CSS是什么层叠样式表（cascading style sheets） 2 CSS的作用是一种网页渲染技术，对标签特征属性进行渲染 3CSS的三种写法

古城微笑少年丶/ 2021年12月10日 12:07/ 0 赞/ 355 阅读

相关 HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级：方法 css的样式引用由3种方式。分别为行内样式、内部样式（嵌入式）和外部样式；行内样式： ...

朱雀/ 2021年03月26日 13:53/ 0 赞/ 791 阅读