引入css的方式

最新推荐文章于 2024-03-26 10:30:10 发布
最新推荐文章于 2024-03-26 10:30:10 发布
阅读量113 收藏
点赞数
分类专栏： html&css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duyujian706709149/article/details/84839472
版权

1.行内样式

可以直接将css代码写到标签的开始标签中

<div style="background:yellow;"></div>

2.内嵌样式

可以在一对header标签中写上一对style标签，在其中书写css代码

 

<html>

    <head>

        <style>

             ..// 此处添加css代码

        </style>           

    </head>

</html>

3.外链样式  ---->  企业开发一般都使用此样式

单独新建一个.css的文件，把css代码写入其中，然后通过link标签把这个文件和html文件关联起来

<link rel="stylesheet" href="style.css">

4.导入样式

单独新建一个.css的文件，把css代码写入其中，然后通过

<style>

@import "style.css";

</style>

把这个文件和html文件关联起来

 

 

外链样式 导入样式区别：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

doc-DJJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础笔记一（三种引入方式，三种特征，多个选择器，网页常见布局css+div实现）
qq_55006020的博客
06-27 849
选择器的优先级
CSS引入方式
weixin_45976564的博客
09-09 414
CSS引入方式 一.行内样式表（行内式） 行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式 <div style="color:red; font-size:12px;">青春不常在，学习是正道</div> style其实就是标签的属性 在双引入中间，写法要符合CSS规范 可以控制当前的标签设置样式 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。 使.
css的四种引入方式
weixin_45709829的博客
03-21 1万+
css的四种引入方式 一、行内样式 别名：行间样式、内联样式 写法：在网页元素上通过style=""属性 <div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div> 二、内部样式表 写法：在网页创建嵌入的样式表，写在里面 <head> <style> p{ color:pink; border
CSS的四种引入方式
qq_58782226的博客
07-27 1639
css的四种引入方式
CSS之四种引用方式【详细、全面】
Carroll的博客
10-23 7809
目录 css的四种引入方式 1.行内样式 2.内嵌样式 3.外部样式 3.1.链接样式（推荐） 3.2.导入样式（不建议使用） 4. 链接式和导入式的区别 5.四种CSS引入方式的优先级 css的四种引入方式 1.行内样式 最简单的一种，直接对HTML标签使用 style=" " 例如： <p style="color:#F00; "><...
网页设计必学：CSS四种样式引入方式及常用样式
最新发布
云端源想的博客
03-26 1824
在Web开发的世界中，CSS（层叠样式表）是构建视觉吸引力和定义网页布局的不可或缺的工具。掌握如何恰当地引入CSS样式以及理解它们的优先级规则，对于前端开发者来说至关重要。今天，我们就来深入探讨CSS的四种引入方式，以及选择器的优先级之谜，了解常用的CSS样式及使用方法！
CSS基础-02-CSS引入方式
weixin_63562705的博客
12-04 251
2.1 CSS引入方式 ★内嵌式:CSS写在style标签中 ·提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view..
Css基本概念及其引入方式介绍
09-25
1. **链接引入（外部引用）** 这种方式是将CSS代码放在一个单独的`.css`文件中，然后在HTML文档的`<head>`部分通过`<link>`标签将其链接进来。例如： ```html <link rel="stylesheet" type="text/css" href=...
react-react面试题之引入css的方式.zip
03-20
本文将深入探讨React中引入CSS的各种方式及其特点。 1. **内联样式** 内联样式是最基础的CSS引入方式，通过在组件的`style`属性中定义CSS规则。这种方式方便快捷，但不适用于大型项目，因为样式复用性差，不利于...
详解CSS文件的三种引入方式
01-19
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例： <h1 xss=removed>style属性的应用 直接在HTML标签中设置的样式 实际在写页面时不提倡使用，在测试的...
css外部文件的引用方式有哪几种
12-13
css外部文件的引用可分为两种，一种是通过在<head></head>里面的link来引用，另外一种是直接通过import来引用。例子如下所示 第一种引用 复制代码代码如下: <link rel=”stylesheet” href=”/css/...
CSS中的四种引用方式
09-22
导入样式允许开发者在HTML文档中使用`<style>`标签内的`@import`语句来引入外部CSS文件。这种方式类似于链接样式，但存在一定的差异。 **示例：** ```html <!DOCTYPE html> <style type="text/css"> @import ...
css的三种引入方式
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 5970
css的三种引入方式,行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值 内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。 外链式是把css样式写入.css文件内，然后通过link标签链接。
引入CSS的四种方式
......的博客
10-25 750
行内式行内式通过直接设置元素的style属性来引入css<div style="width: 100px; height: 100px;">行内式</div>优点：元素的样式简单明了 缺点：代码不易维护内嵌式通过在head标签中加入如下的代码来引入CSS<head> <style type="text/css"> /*样式*/ </style> </head>缺点：
【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 1107
一、CSS 引入方式 1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 ) 二、CSS 选择器 1、CSS 基础选择器 2、CSS 复合选择器 后代选择器 子元素选择器 交集选择器 并集选择器 链接伪类选择器
CSS的三种引入方式：外部样式、内部样式和行内样式
热门推荐
Ahua_Core的博客
03-07 2万+
CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级 外部样式 即CSS代码保存在外部，HTML文件通过链接式link或者 导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐
引入css的方法有哪几种
hdxx2022的博客
11-11 4016
使用链接式时与导入式不同的是它会以网页文件主体装载前装载css文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。导入式会在整个网页装载完后再装载css文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。嵌入式是将css样式集中写在网页的标签对的标签对中。行内式是在标记的style属性中设定css样式。
CSS四种引入方式
Henry_Lv的博客
05-01 1092
CSS概述css是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。一、CSS的四种引入方式1、行内式行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用&lt;p style="background-color: aqua;font-family: 'Arial Narrow'"&...
a标签target属性
AC总有一天的博客
03-08 6326
html中特殊的目标（注意事项） 有 4 个保留的目标名称用作特殊的文档重定向操作： _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 &lt;a&gt; 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 &lt;base&gt; 标签中的 target 属性一...
引用外部css
05-30
在 HTML 页面中，可以使用以下方式引用外部 CSS 文件： 1. 在 <head> 标签中使用 <link> 标签引用外部 CSS 文件。例如： ```html <html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>My Heading</h1> <p>My paragraph.</p> </body> </html> ``` 其中，style.css 是存储 CSS 样式的外部文件。href 属性指定了 CSS 文件的路径和文件名。 2. 在 HTML 页面的 <style> 标签中写入 CSS 样式。例如： ```html <html> <head> <title>My Page</title> <style> h1 { color: red; } p { font-size: 16px; } </style> </head> <body> <h1>My Heading</h1> <p>My paragraph.</p> </body> </html> ``` 其中，<style> 标签用于定义 CSS 样式。在 <style> 标签中可以写入 CSS 代码。 请注意，为了保证 CSS 样式能够正确地引用和执行，需要确保 CSS 文件的文件路径和文件名正确。另外，还需要遵循浏览器的安全策略，如同源策略等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值