《网页设计基础——CSS的四种引入方式详解》
网页设计基础——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引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。
《网页设计基础——CSS的四种引入方式详解》的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- SpringBoot项目启动org.springframework.context.ApplicationContextException: Failed to start bean 'documentationPluginsBootstrapper'; nested exception is java.lang.NullPointerException解决方法
将Pom文件中的SpringBoot版本调低即可. 我的是调成了2.5.6
- sql server2016 数据库日志 清空语句
/*1.查询数据库日志文件名称*/--TC_MES_DEV为数据库名--这里的 数据库日志名,可以用以下注释的语句进行查询(_log那个)USE [TC_MES_DEV]GOSELECT file_i ...
- Codeforces Round #789 (Div. 2) A-C
Codeforces Round #789 (Div. 2) A-C A 题目 https://codeforces.com/problemset/problem/1677/A 题解 思路 知识点:模 ...
- Java ArrayList和LinkedList
目录 集合的概念 集合体系结构 常用list集合 list集合的特点 ArrayList LinkedList 创建对象 常用方法 遍历 ArrayList和LinkedList的区别 集合的概念 ...
- WannaRen来袭：螣龙安科带你盘点那些年的勒索病毒
2020年4月7日,360CERT监测发现网络上出现一款新型勒索病毒wannaRen,该勒索病毒会加密windows系统中几乎所有的文件,并且以.WannaRen作为后缀.360CERT该事件评定:危 ...
- 2022 07 13 第一小组 田龙跃 Java再学习笔记
1.类名命名规则: 只能由数字字母,下划线,美元符号组成(不能以数字开头,尽量不要用下划线开头) 2.注释(养成多写注释的好习惯) 单行注释 // ctrl+/ 多行注释 // ctrl+shirt+ ...
- macOS Monterey 12.5 (21G72) 正式版 ISO、IPSW、PKG 下载
今日(2022-07-21)凌晨,Apple 终于发布了 macOS Monterey 12.5,包括功能增强.错误修复和安全性更新.macOS Monterey 12.5 自 2022 年 5 月 ...
- “杀死” App 上的疑难崩溃
在移动应用性能方面,崩溃带来的影响是最为严重的,程序崩了可以打断用户正在进行的操作体验,造成关键业务中断.用户留存率下降.品牌口碑变差.生命周期价值下降等影响.很多公司将崩溃率作为优先级最高的技术指标 ...
- 第十六天python3 文件IO(二)
BytesIO操作 io模块中的类 from io import BytesIO 内存中,开辟的一个二进制模式的buffer,可以像文件对象一样操作它: 当close方法被调用的时候,这个buffer ...
- 多表查询_子查询概述和多表查询_子查询情况1&情况2&情况3
子查询 概念:查询中嵌套查询,称嵌套查询为子查询 -- 查询工资最高的员工信息 -- 1.查询最高的工资是多少 9000 select max(salary) from emp; -- 查询员工信息, ...