1.使用link标签引入css文件：

<head>

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

</head>

2.使用style标签：

<head>

  <style>

    #info-bar{

      background-color: #23499E;

      /* 设置大小为0，从而实现从小到大的动画 */

      opacity: 0;

      height: 0px;

      width: 0px;

      padding: 0px;

      border-radius: 50%;

      /* 设置字体 */

      color: #31DE9F;

      font-weight: bold;

      font-size: 30pt;

      /* 定位在@+的上方，隐藏超出部分 */

      position: fixed;

      left: 50%;

      top: 68%;

      transition: All 0.6s ease-in-out;

    }

  </style>

</head>

style标签可以出现在html的任何位置，但是一般写在head标签内。

3.使用标签的style属性：

<div id="container" style="font-family: Arial, sans-serif;text-align: center;"></div>

4.使用@import引入css文件：

1)放在html的style标签内：

<style>

    @import url(style.css);

</style>

2)放在css文件中：

@import "style.css";

四者之间的比较：

要做到关注点分离尽量用第一种和第四种，但是第一种目前更常用。

CSS的四种引入方式的更多相关文章

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

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

  2. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  3. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  4. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  5. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  8. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  9. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

随机推荐

  1. linux 修改ssh端口号

    vi /etc/ssh/sshd_config 找到#Port 22一段,这里是标识默认使用22端口,修改为如下:  代码如下 复制代码 Port 22 Port 50000 然后保存退出 执行/et ...

  2. 使用NuGet Package Project快速制作NuGet包

    今天在visual studio gallery发现了一个插件NuGet Package Project,通过它可以在Visual Studio中建立Nuget Package工程,直接生成Nuget ...

  3. TIJ读书笔记08-数组的初始化和可变长参数形参

    TIJ读书笔记08-数组的初始化和可变参数形参 数组 数组的声明 数组的初始化和赋值 可变参数列表 数组 相同类型的,用一个标识符名称封装到一起的一个对象序列或者基本数据类型序列叫数组.(多么严谨的概 ...

  4. Java第一天学习笔记整理

    一.关键字 java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名.方法名.类名.包名. 常见的关键字: 用于定义数据类型的关键字 cla ...

  5. An attempt was made to load a program with an incorrect format

      用.net调用一个C++ 32位的DLL, 编译的时候选择x86, 在部署到一个64位的机器上的时候报错:"An attempt was made to load a program w ...

  6. oracle 做算法 数据为空时，默认为0

    SELECT NVL('',0) FROM DUAL 获取当前日期: SELECT SYSDATE FROM DUAL 当前日期-某个日期差的天数 SELECT  TO_NUMBER(SYSDATE  ...

  7. JavaScript valueOf() 函数详解

    valueOf()函数用于返回指定对象的原始值. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. 所有主流浏 ...

  8. "Asp.Net Web Api MediaTypeFormatter Error for x-www-formurlencoded data" 解决方法

    遇到标题中所说的问题原因是使用 jQuery AJAX 以 POST 方式调用 Asp.Net Web API .解决办法请看以下代码中有注释的部分. public static class WebA ...

  9. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  10. Linux 中write()函数的出错情况及处理

    write函数首先将进程需要发送的数据先放在进程缓冲区中,然后向socket的发送缓冲区进行拷贝,在此,可能出现这样情况,即当进程缓冲区中的数据量大于此时发送缓冲区中所能接受的数据量时,若此时处于阻塞 ...