《网页设计基础——CSS的四种引入方式详解》

2023-11-02

网页设计基础——CSS的四种引入方式详解

        

        

        

一、行内式;


规则:

1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中。

        

格式:        

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p style="color:#FF0000; font-size:66px">使用行内样式引入CSS</p>                
    </body>
</html>

        

                                        

二、内嵌式;


规则:

1. 内嵌式就是将CSS代码写在 <head></head> 之间,并用 <style></style> 标记进行声明。

        

格式:

<html>
    <head>
        <title>页面标题</title>
    <style>
        p{
            color:#FF0000;
            font-size:66px;
         }
    </style>
    </head>
    <body>
        <p>使用内嵌式引入CSS</p>
    </body>
</html>

                

        

三、链接式;


规则:

1, 链接式CSS样式表是使用频率最高,也是最实用的方法,其最大的优势在于CSS代码与HTML代码完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。

2. 链接式通过在 <head></head> 标记之间加上【<link href="链接式.css” type="text/css" rel="stylesheet">】语句,将CSS文件链接到网页中,其中“链接式.css”应为CSS文件名称。

        

HTML文件格式:

<html>
    <head>
        <title>页面标题</title>
        <link href="链接式.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p>使用链接样式导入CSS</p>
    </body>    
</html>

CSS文件格式:

p
{
    color:#FF0000;
    font-size:66px;
}

        

        

四、导入式;


规则:

1. 导入式和链接式的功能基本相同,只是语法和运行方式上略有区别。采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才已链接的方式引入。

2. 导入式CSS样式表的最大用处在于可以让一个HTML文件导入很多的样式表。

3. 常用的@import语句:@import url(导入式.css); @import url("导入式.css"); @import url('导入式.css');

@import 导入式.css @import "导入式.css"; @import '导入式.css';

4. 不单是HTML文件的 <style></style> 标记中可以导入多个样式表,在CSS文件内也可以通过@import语句导入其它的样式表。

        

HTML文件格式:

<html>
    <head>
        <title>页面标题</title>
        <style>
        @import "导入式.css";/* 此处为CSS文件名,可修改 */
        </style>
    </head>
    <body>
        <p>使用导入式引入CSS</p>
    </body>
</html>

CSS文件格式:

p
{
    color:FF0000;
    font-size:66px;
}

        

        

五、结语;


四种CSS引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

《网页设计基础——CSS的四种引入方式详解》 的相关文章

随机推荐

  • ChatGLM-6B的安装和使用最全面细节讲解

    ChatGLM 6B是一个基于General Language Model GLM 架构的开源对话语言模型 支持中英双语 该模型使用了和ChatGPT类似的技术进行优化 经过1T标识符的中英双语训练 同时辅以监督微调 反馈自助和人类反馈强化
  • 【Solidity】Storage和memory关键字的区别和用法

    在 Solidity 中 有两个地方可以存储变量 storage以及memory Storage 变量是指永久存储在区块链中的变量 Memory 变量则是临时的 当外部函数对某合约调用完成时 内存型变量即被移除 状态变量 在函数之外声明的变
  • Work Tips

    目录 IAR环境下 使用Live Watch实时监控变量值 IAR替换mcu库 Linux中删除swp文件 使用J Link通过SWD接口直接下载 hex文件和 bin文件到MCU 下载J Flash软件 linux设置时间命令 Jlink
  • chatgpt综述和报告

    ChatGPT究竟强在哪 复旦大学邱锡鹏教授 大型语言模型的能力分析与应用 哔哩哔哩 bilibili2022年底 美国OpenA1公司发布了ChatGPT 一个可以与人类对话交互的千亿规模参数的大型语言模型 它可以根据用户输入的指令完成各
  • Cocos Creator 华容道

    环境 cocos creator 2 0 10 Mac环境 TypeScript 文末附源码链接 本文提供了游戏玩法的逻辑 支持关卡配置 可以自由配置关卡 先看一下效果 首先 我们看一下我们要处理的问题 1 区域划分 2 角色摆放 即 关卡
  • openWRT添加模块(四)

    http blog chinaunix net uid 10429687 id 3374873 html OpenWrt是一个比较完善的嵌入式Linux开发平台 在无线路由器应用上已有100多个软件包 人们可以在其基础上增加软件包 以扩大其
  • PID怎么应用到实际控制系统

    早就想写篇PID应用的文章 可是一直以来受限于自己的知识水平和能力 未能如愿 整个暑假在做一个激光电源的控制程序 核心思想又是PID控制 看来在整个控制领域 PID 的市场可是无处不在啊 关于PID的理论分析这里不在赘述 可以在一般的资料上
  • 判断这个数能被4整除,但是不能被100整除

    需求 用户输入一个 判断这个数能被4整除 但是不能被100整除 分析 1 用户输入 2 控制台 是否能被4整除并且100整除 let num prompt 请输入一个数 num num 0 防止用户输入空字符若是空字符就为0 let re
  • kdj超卖_kdj超卖是什么意思?kdj超买超卖区别是什么

    kdj超卖是什么意思 kdj超买超卖区别是什么 对于大多数股民来说 指标应用是股市投资必不可少的操作系统 指标的主要作用就是用来作参考 辅助自己进行股票投资 今天 在这里我们所要谈论的是kdj指标 kdj超卖是什么意思 如何判断kdj超买超
  • angular4学习指南,环境搭建,基础概念解析(一)

    一 Angular是什么 Angular是由google开发维护的一个开发跨平台应用的框架 同时适应PC端和移动端 两个大版本 1 5 和4 0 4 0完全重写 1 5之前的叫angularJS 4 0叫angular 二 Angular开
  • Netty02-入门

    二 Netty 入门 1 概述 1 1 Netty 是什么 Netty is an asynchronous event driven network application framework for rapid development
  • dlna 斐讯r1怎么用_斐讯R1智能(蓝牙)音箱固件升级教程

    斐讯R1智能 蓝牙 音箱固件升级教程 2019 07 05 17 46 00 55点赞 459收藏 112评论 儿子现在突然爱上听歌写作业 难得是听歌品味居然跟我8分像 书桌空间有限 看来一圈蓝牙音箱 发现斐讯遗产R1 哈曼认证单元 但据说
  • Python 频繁请求问题: [Errno 104] Connection reset by peer

    记遇到的一个问题 Errno 104 Connection reset by peer 今天工作上有个需求 数据库有个表有将近3万条url记录 每条记录都是一个图片 我需要请求他们拿到每个图片存到本地 一开始我是这么写的 伪代码 impor
  • Java学习笔记16——抽象类

    抽象类 抽象类 什么是抽象类 抽象的关键字 抽象类的特点 抽象类的成员特点 抽象类 什么是抽象类 在Java中 一个没有方法体的方法 应该被定义为抽象方法 而类中如果有抽象方法 该类被定义为抽象类 抽象的关键字 abstract 抽象类的特
  • Spring 的基本用法之另外一种装配方式

    一 目的 了解 Spring 环境配置 掌握定义应用程序类 掌握编辑配置文件创建 bean 实例实现依赖注入 掌握编辑测试类创建 IoC 容器 通过容器获取 bean 实例 二 内容 创建一个Spring项目 完成主题为 订单信息通知 项目
  • 一些比较不错的资源网站

    阮一峰日志地址 Github上值得推荐的开源电子书
  • QT 5.15 源码windows下 msvc编译

    目录 1 下载 Qt 源代码 2 安装依赖项 3 配置命令行环境变量 4 构建 5 使用 1 下载 Qt 源代码 Index of archive qt 5 15 5 15 8 singlehttps download qt io arch
  • STM32F4XX/APM32F4XX USB OTA升级

    近期在研究USB CDC协议 使用USB Virtual Port Com功能与上位机通讯做了OTA功能 开发平台 MDK529开发硬件 APM32F411首先介绍一下程序执行逻辑 程序由两部分组成 Boot APP Flash由三部分组成
  • 485串口服务器协议,10/100M TCP/IP转1口RS-232/485/422串口服务器 - 宇泰(UTEK) - 全球领先智能通讯解决方案提供商!...

    gt gt 硬件特性 菜单配置界面 操作模式丰富 满足不同行业的应用 提供Windows 虚拟COM 驱动软件 灵活合理的UNIX 下Fixedtty 工作机制 具有1个串行端口 可以连接终端 Modem 条码机 收款机 ISDN 终端适配
  • 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础 CSS的四种引入方式详解 一 行内式 规则 1 行内式是所有样式方法中最为直接的一种 它直接对HTML的标记使用style属性 然后将CSS代码直接写在其中 格式 p style color FF0000 font size