《网页设计基础——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 安装并启动 ...
随机推荐
- 浏览器中的原生base64方法
在web开发中,经常涉及到对文本.文件等进行base64编码处理,在之前的开发中,使用js-base64来进行处理,但其实浏览器已经原生包含了处理方法.性能更好,兼容性也更高. atob() - AS ...
- 基于ABP实现DDD--DDD相关概念
什么是DDD呢?领域驱动设计[DDD]是一种针对复杂需求的软件开发方法.将软件实现与不断发展的模型联系起来,专注于核心领域逻辑,而不是基础设施细节.DDD适用于复杂领域和大规模应用,而不是简单的C ...
- scala WordCount案例
数据样例: java,spark,hadoop,python,datax java,spark,hadoop,spark,python,datax java,spark,hadoop,python,d ...
- Javaweb03-servlet&filter
1.什么是servlet 第一个servlet应用程序,实现servlet接口 定义:凡是实现了servlet api接口(或者继承servlet api接口的实现类)的类就是servlet应用程序: ...
- python的嵌入式开发
今天晚上注定我要玩一夜这个东西,太爽了,给力! 烧写固件成功, http://blog.csdn.net/Lingdongtianxia/article/details/78248888 要点总结:如 ...
- 选择结构——嵌套 if 控制语句
1.嵌套 if 控制语句 概念: 在 if 控制语句中又包含一个或多个 if 控制语句的简称为嵌套 if 控制语句.嵌套 if 控制语句可以通过外层语句和内层语句的协作,来增强程序的灵活性. 语法格式 ...
- 有事务冲突时节点怎么加入MGR集群
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1. 问题场景描述 2. 如何修复 2.1 找出事务差异点 2.2 决定如何处理 3. 小结 文章推荐: 关于 Gr ...
- DolphinScheduler 荣获 2021 中国开源云联盟优秀开源项目奖!
点击上方 蓝字关注我们 好消息,中国开源云联盟(China Open Source Cloud League,简称"COSCL")于近日公布 2021 杰出开源贡献者.优秀开源项目 ...
- D8调试工具——jsvu的使用细则
d8 is V8's own developer shell. D8 是一个非常有用的调试工具,你可以把它看成是 debug for V8 的缩写.我们可以使用 d8 来查看 V8 在执行 JavaS ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...