HTML中CSS的三种写法

红太狼 2023-09-23 17:01 142阅读 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 条评论，142人围观）

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

相关阅读

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

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

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

相关 vue中template的三种写法

第一种（使用模板字符串）早期字符串拼接年代 <div id="app"></div> new Vue({ el: "app"

浅浅的花香味﹌/ 2023年10月11日 14:37/ 0 赞/ 27 阅读

相关背景复合写法(HTML、CSS)

背景复合写法(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <me

Bertha 。/ 2023年10月03日 12:44/ 0 赞/ 5 阅读

相关 HTML中CSS的三种写法

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

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

相关 for循环的三种写法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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