首页 > 其他分享 >HTML引入CSS的方式

HTML引入CSS的方式

时间:2023-08-26 21:13:49浏览次数:37  
标签:文件 外部 html HTML CSS 使用 引入 css

虽然很简单,但久了不用还是容易忘,暂且记一下:

1、html引入css文件之直接在div中使用css样式制作div+css网页

<div style="border:1px red solid;">html引入css文件</div>

说明:html引入css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势,当然如果你非常想用这种方法,在不经常更改的地方可以用一用,但是还是不推荐。

2、html引入css文件之html中使用style自带式

直接在header 里面写css

<style type="text/css">

div{margin: 0;padding: 0;border:1px red solid;}

</style>

说明:html引入css文件的这种方法适合在页面较少的情况下使用。优点:速度 快,所有的css控制都是针对本页面标签的,没有多余的css命令;再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较

<style type="text/css">

    @import"mystyle.css"; 此处要注意.css文件的路径

</style>

多改版会很麻烦,单个页 面显得臃肿,css不能被其他html引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进 行复杂的维护工作。

3、html引入css文件之使用@import引用外部CSS文件

将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,<style>标记也是写在<head>标记中,使用的语法如下:



4、html引入css文件之使用link引用外部CSS文件

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css。

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

说明:html引入css文件的这种方法就不需要style标签,而是直接通过link一个样式来引用外部样式,推荐使用link来引用外部的css样式方法。

标签:文件,外部,html,HTML,CSS,使用,引入,css
From: https://www.cnblogs.com/xkge/p/17659438.html

相关文章

  • CSS-02
    选择器选择器可以快速、方便的选择所需要使用的页面元素基本选择器基础选择分三种,分别是:标签选择器、类选择器、id选择器标签选择器标签选择器主要是根据标签的名字进行元素的选择语法:标签名{}例如:div{color:red;font-size:20px;}<divclass="div-cls">昨日头条:国家公祭日</div><d......
  • java数组、面向对象的引入
    packagecom.momo.demo;publicclassMain{publicstaticvoidmain(String[]args){int[]arr=newint[3];System.out.println(arr);System.out.println(arr[0]);System.out.println(arr[1]);System.out.println(arr[2]);arr[0]=55;arr[2]=66;System.o......
  • CSS技术详解
    1CSS特性介绍随着数据中心数据访问量的逐渐增大以及网络可靠性要求越来越高,单台交换机已经无法满足数据中心大数据量访问的要求。为了满足数据中心大数据量转发的需求和网络高可靠性需求,提出了交换机堆叠。CSS是ClusterSwitchSystem的简称,又被称为集***换机系统(简称为CSS或......
  • 列举出css所有的样式选择器
    以下是CSS中常见的各种样式选择器:1.元素选择器:通过HTML元素名称选择元素,如`p`、`div`等。2.类选择器(ClassSelector):通过`class`属性选择一个或多个具有相同类名的元素,如`.example`。3.ID选择器(IDSelector):通过`id`属性选择具有唯一标识符的元素,如`#uniqueID`。4.......
  • 记录--一个炫酷的css动画
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近有一个需求,要我实现一个动画效果,效果如下简单分析了一下效果,是一个3d的效果,首先是一个圆,接着是两段圆环,第三层是一堆小圆环,最里面是一些线上运动,有着渐变色的矩形。第一层的圆环很简单。第二层的圆环其实......
  • 如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
    描述WebCenter中的HTML53DColladaViewer(自14.1以来新增)要求在浏览器中启用WebGL。较旧的浏览器可能不支持此功能,或者要求用户首先显式启用此功能。本页介绍如何为所有主要浏览器启用此功能。WebGL3D查看器本文是以下超级用户文章的摘要:如何在浏览器中启用WebGL?程序......
  • css粘性页脚,固定一个页脚
    css粘性页脚,固定一个页脚方案一:<divclass="wrapper"><headerclass="page-header">Thisistheheader</header><articleclass="page-body"><p>Mainpagecontenthere,addmoreifyouwanttose......
  • CSS-01
    CSS样式课程目标1.css引入方式(重点)2.css选择器(重点)3.css盒子模型(重点)4.css3常见效果(重点)级联样式表css概述层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮就是表现形式)css引入方式行内样式行内样式(将样式直接写在......
  • 【转载】如何通俗地解释欧拉角?之后为何要引入四元数?
    转载自:https://www.zhihu.com/tardis/bd/ans/236284413?source_id=1001   为何要引入四元数?首先是因为欧拉角有万向节死锁的问题。3D游戏或者3D电影中,比如黑客帝国中酷炫的旋转是怎么实现的?旋转的算法有很多,这里主要介绍其中一种:欧拉角。1欧拉角1.1欧拉角的算法......
  • 使用Iconfont制作字体图标库并引入到Element项目中
    1引子1.1图标的重要性图标用来描述某种具体的功能,能够使用户更轻松的理解信息、获取信息。好的图标设计易于被发现、易于被理解,且具有美感与吸引力,能够丰富用户体验。1.2字体图标的好处字体图标是一种特殊的字体,以图像的形式展现给用户。使用字体图标的好处有:相较于图片,字体图标......