1 CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式

    行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。
  • 嵌入式

    嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。
  • 链接式

    链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

common.css

div{

      color: white;

      background-color: #369;

      text-align: center

}


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的引入方式</title>

<!--    链接式-->

    <link rel="stylesheet" href="common.css">

<!--    嵌入式-->

    <style>

        p{

            color: darkseagreen;

        }

    </style>

</head>

<body>

    <div>故人西辞黄鹤楼</div>

    <div>烟花三月下扬州</div>

    <p>君不见黄河之水天上来,<br>奔流到海不复回.</p>

<!--    行内样式-->

    <div style="color: white;background-color: #369;text-align: center">行内设置</div>

</body>

</html>

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

  1. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  4. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  7. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  8. css样式引入方式，及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  9. CSS 从入门到放弃系列：CSS的引入方式

    css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...

  10. 5.CSS的引入方式

    CSS的三种样式表 按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类: 1.行内样式表(行内式) <div style="color:red: font-siz ...

随机推荐

  1. win32-localtime的使用

    下面的例子用于反映本地系统的日期格式变化 // locale test #include <stdio.h> #include <locale.h> #include < ...

  2. 【Android 逆向】【攻防世界】easyjava

    1. apk 安装到手机,提示输入flag 2. jadx 打开apk看看 private static char a(String str, b bVar, a aVar) { return aVa ...

  3. SVN培训笔记（下拉项目、同步修改、添加文件、修改文件、删除文件、改名文件等）

    前言   为了方便新加入团队的员工熟悉团队协作开发.  为了将好东西整理分享给有需要的网友.  将SVN内部员工培训文档公开,以方便更多的人,提高知识获取速度,尽快熟悉协同开发.  本文档培训员工对于 ...

  4. Qt实用技巧：Qt从QtCreator更换为VS开发Qt所需要注意的坑

    前言   基本都是使用QtCreator开发,使用vs进行一下开发,记录从QtCreator换成VS所遇到的注意的坑.   VS装对应的Qt版本助手配置Qt版本        VS装番茄助手   这里 ...

  5. 代码随想录算法训练营第三十天| 51. N皇后 37. 解数独 总结

           卡哥建议:今天这三道题都非常难,那么这么难的题,为啥一天做三道? 因为 一刷 也不求大家能把这么难的问题解决,所以 大家一刷的时候,就了解一下题目的要求,了解一下解题思路,不求能直接写出 ...

  6. Effective C++ 第一章：让自己习惯C++

    Effective C++ 第一章:让自己习惯C++ 引言 最近在阅读这本<effective C++ 改善程序与设计的55个具体做法>这本书,为了以后忘记的时候回顾,写一些笔记,每次笔记 ...

  7. Java interface 接口 新特性

    1 package com.bytezreo.interfacetest; 2 3 public class SubClass2 { 4 public static void main(String[ ...

  8. Sermant运行流程学习笔记，速来抄作业

    本文分享自华为云社区<Sermant 的整体流程学习梳理>,作者:用友汽车信息科技(上海)有限公司 刘亚洲 Java研发工程师. 一.sermant架构 Sermant整体架构包括Serm ...

  9. Java面试必考题之线程的生命周期，结合源码，透彻讲解!

    写在开头 在前面的几篇博客里,我们学习了Java的多线程,包括线程的作用.创建方式.重要性等,那么今天我们就要正式踏入线程,去学习更加深层次的知识点了. 第一个需要学的就是线程的生命周期,也可以将之理 ...

  10. obsidian 日记本倒序汇总 获取标题显示 插件dataviewjs list

    obsidian 日记本倒序汇总 获取标题显示 插件dataviewjs list // dataviewjs function removeDuplicate(arr) { return arr.f ...