网页设计基础——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的四种引入方式详解》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. NC25136 [USACO 2006 Ope B]Cows on a Leash

    NC25136 [USACO 2006 Ope B]Cows on a Leash 题目 题目描述 给定如图所示的若干个长条.你可以在某一行的任意两个数之间作一条竖线,从而把这个长条切开,并可能切开其 ...

  2. Java之取余操作 "%"

    取模运算与取余运算两个概念有重叠的部分但又不完全一致.主要的区别在于对负整数进行除法运算时操作不同. 对于整形数a,b来说,取模运算或者求余运算的方法都是: 1.求 整数商 c = a / b: 2. ...

  3. 练习-用if语句替换三元运算符和选择结构-标准的switch语句

    if语句和三元运算符的互换 在某些简单的应用中,if语句是可以和三元运算符互换使用的 public static void main(String[] args) { int a = 10; int ...

  4. 关于 用fscanf读文件，把文件中用##分割的内容分开

    今天呀,被学弟问了一个问题 文件里存的是"123##456##0##1644444.....##" 为什么用fscanf(fp, "%s##%s......", ...

  5. 这样优化Spring Boot，启动速度快到飞起!

    微服务用到一时爽,没用好就呵呵啦,特别是对于服务拆分没有把控好业务边界.拆分粒度过大等问题,某些 Spring Boot 启动速度太慢了,可能你也会有这种体验,这里将探索一下关于 Spring Boo ...

  6. MyBatis-Plus联表查询的短板，终于有一款工具补齐了

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. mybatis-plus作为mybatis的增强工具,它的出现极大的简化了开发中的数据库操作,但是长久以来,它的 ...

  7. for循环和while循环dowhile循环

    第四章 循环语句 4.1循环概述 循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段代码被重复执行的代码被称为循环体语句,当反复执行这个循环体的时候,需要在核实的时候吧循环判断条件修改为fa ...

  8. CS内网横向移动 模拟渗透实操 超详细

    @Webkio 前言: 最近在跟朋友搞一些项目玩,所以最近没怎么更新内容接下来我将在虚拟中模拟内网多层靶场,进行内网渗透实验,超详细,适合小白.本文仅供网安学习,不可利用于未授权渗透工作中,否则后果自 ...

  9. 云存储？不依赖三方服务自己也可以搞，利用Docker来搭建分布式文件系统FastDfs

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_78 对于文件存储来说,一般情况下简单的处理就是在Django配置文件中配置存储目录,按照规则对文件进行上传或者下载. 实际上,当文 ...

  10. 技术分享 | Prometheus+Grafana监控MySQL浅析

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 简介 Prometheus 一套开源的监控&报警&时间序列数据库的组合,通常 Kubernetes 中都会 ...