CSS的三种引入方式_第2关:css样式引入方式-程序员宅基地

技术标签： css html5 html

@CSS的三种引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。
示例：

<head>
   <style type="text/css">
      h3{
      
            color:red;
         }
   </style>
</head>

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
      
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">
  @import url("css文件路径");
</style>

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

链接式和导入式的区别

<link>

1、属于XHTML
2、优先加载CSS文件到页面

@import

1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如：

行内样式和内部样式比较优先级：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式和内部样式表的优先级</title>
    <!--内部部样式表-->
  <style type="text/css">
    p{
      
      color: blue;
    }
  </style>
</head>
<body>
     <!--行内样式-->
     <p style="color: red;">我是p段落</p>
</html>

浏览器运行效果：
在这里插入图片描述

结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：

a、内部样式表在外部样式表上面

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表和外部样式表的优先级</title>
    <!--内部部样式表-->
  <style type="text/css">
    p{
      
      color: blue;
    }
  </style>
  <!--外部样式表-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
     <p>我是p段落</p>
     <div>我是div</div>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

浏览器运行效果：
在这里插入图片描述

b、外部样式表在内部样式表上面

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表和外部样式表的优先级</title>
    <!--外部样式表-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <!--内部部样式表-->
  <style type="text/css">
    p{
      
      color: blue;
    }
  </style>
</head>
<body>
     <p>我是p段落</p>
     <div>我是div</div>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

浏览器运行效果：
在这里插入图片描述

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级：ID选择器>类选择器>标签选择器

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>选择器的优先级</title>
  <style type="text/css">
    #a{
      
      color: green;
    }
    .b{
      
      color: yellow;
    }
    h2{
      
      color: red;
    }
  </style>
</head>
<body>
     <h2>111</h2> <!--红色-->
     <h2 id="a" class="b">222</h2> <!--绿色-->
     <h2 class="b">333</h2><!--黄色-->
</html>

浏览器运行效果：
在这里插入图片描述
转自：https://www.cnblogs.com/dotnet261010/p/7198892.html

本文链接：https://blog.csdn.net/Marukooo/article/details/120844154

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

macOS 14 Sonoma(苹果电脑系统) pkg完整安装包14.2.1正式版_mac os 14.2.1 下载-程序员宅基地

文章浏览阅读794次，点赞10次，收藏9次。Game mode是macOS Sonoma独有的Mac新游戏功能，在 macOS 14 中启用游戏模式后，Mac 会优先考虑运行游戏的CPU和GPU功能，不仅全面提高了游戏的流畅、稳定的帧率，也让Mac上的游戏体验更加沉浸。此外，面向开发人员，苹果还推出了新的Game Porting Toolkit游戏移植工具包，可以让开发者迅速评估自己的游戏在Mac上的运行流畅度，更轻松地从其他平台移植游戏到macOS Sonoma上。_mac os 14.2.1 下载

AntV G6中动态数据提示框的实现_antv-g6弹窗-程序员宅基地

文章浏览阅读6k次，点赞12次，收藏17次。使用坐标变换实现antvG6中自定义tooltip_antv-g6弹窗

docker 启动nexus 出现的问题_unable to update instance pid: unable to create di-程序员宅基地

文章浏览阅读1.5w次。问题1:启动nexus时，没有权限操作宿主机文件夹docker run -d -p 8082:8082 -v /home/nexus-data/:/nexus-data/ --name nexus1 sonatype/nexus3Warning: Cannot open log file: ../sonatype-work/nexus3/log/jvm.logWarning: F..._unable to update instance pid: unable to create directory /nexus-data/instan

redmine增强版工时批量修改_redmine 修改工时必填-程序员宅基地

文章浏览阅读778次。(右键在新标签中打开) - www.redmine.org.cn - Redmine中文增强版增强版工时批量修改：可以对当前用户所进行的工作进行批量的修改，对每项工作设置工时，并修改任务状态，并进行注释，便于对每日工作进行汇总记录。详细情况，请进入测试环境： http://www.redmine.org.cn/demo.html测试用户：r..._redmine 修改工时必填

java练习二、判断语句 if--else语句_输入一个整数,如果此数为0,则输出”石头”,如果此数为1,则输出”剪刀”-程序员宅基地

文章浏览阅读2.5k次。1）接java练习一、HelloWorld，地址：http://blog.csdn.net/u013871927/article/details/700576152）在src文件夹内创建IfPractice.java文件3）打开IfPractice.java，在里面编辑以下代码：public class IfPractice{public String practice(int_输入一个整数,如果此数为0,则输出”石头”,如果此数为1,则输出”剪刀”

报错：Data truncated for column 'parent_id' at row1 -程序员宅基地

文章浏览阅读1.5w次。如果在运行系统.sql脚本文件时报：Data truncated for column 'parent_id' at row1 错误。主要原因是在建表的列为特定类型，而所插入的数据类型没与其字段一一对应。比如本来建表中字段一个int类型的，而你在insert表时有个字段写成了string类型，则就报此错误了。

随便推点

做一个合格的程序猿之浅析Spring IoC源码（十一）Spring refresh()方法解析后记1_spring ioc 优化-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏3次。上次分析refresh这块spring IoC的时候，时间比较仓促，只是debug了部分源码，大家分析起来不是很好~今天我们还是先总结一下吧~spring在实例化bean的时候，根据bean实现的接口不同，bean的实例化也是有先后顺序的由于此块代码太多，贴图给大家的学习的效果不好，现在以spring 3.2.5源代码为例，大家再一份“温故”一下，然后“知新”_spring ioc 优化

Python语言—爬虫之旅_python与视觉传达-程序员宅基地

文章浏览阅读100次。还有一些标志设计、插图、展示设计、包装设计、书籍设计、广告设计、海报设计、企业形象设计等这些课程，我对于我的艺术水平还是有自知之明的，但我会不断的努力，争取早日突破极限，主要涉及到的软件有photoshop，PublicRelations，ArtificialIntelligence，CINEMA4D等等当然，你还可以涉及到一些达芬奇，AutomotiveEngineering等等范围外的软件。在大数据时代，要熟练运用数据，爬取更多的数据源，不断的磨练，爬虫的基本知识和技术。..._python与视觉传达