1 CSS的引入方式

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

  • 行内样式

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

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

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

common.css

  1. div{
  2.       color: white;
  3.       background-color: #369;
  4.       text-align: center
  5. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css的引入方式</title>
  7. <!--    链接式-->
  8.     <link rel="stylesheet" href="common.css">
  10. <!--    嵌入式-->
  11.     <style>
  12.         p{
  13.             color: darkseagreen;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div>故人西辞黄鹤楼</div>
  19.     <div>烟花三月下扬州</div>
  21.     <p>君不见黄河之水天上来,<br>奔流到海不复回.</p>
  23. <!--    行内样式-->
  24.     <div style="color: white;background-color: #369;text-align: center">行内设置</div>
  25. </body>
  26. </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. java面向对象之封装-继承-抽象-多态-组合五种概念及用法一网打尽

    说明 曾经在学习java面向对象时,你是否会为面向对象的封装-继承-抽象-多态-组合等各种概念搞得稀里糊涂,乃至反复阅读,背诵其相关概念,结果一段时间过后又还给了时间... 这种经历简直令人发指,让人 ...

  2. Java 使用 itext 向PDF插入数据和图片

    Java 使用 itext 向PDF插入数据和图片 一.下载Adobe Acrobat DC 二.制作模板 1.准备一个word模板,并转换成PDF格式 2.使用Adobe Acrobat DC打开P ...

  3. 如何保证消息顺序执行(Rabbitmq/kafka)

    转载: https://www.cnblogs.com/-wenli/p/13047059.html https://www.jianshu.com/p/02fdcb9e8784

  4. Centos下git pull免密码操作

    在终端输入以下指令: git config --global credential.helper store然后再次执行pull操作,还是会提示一次输入帐号与密码.断开终端链接,重连,再次进行pull ...

  5. 如何当个优秀的文档工程师？从 TC China 看技术文档工程师的自我修养

    本文系 NebulaGraph Community Academic 技术文档工程师 Abby 的参会观感,讲述了她在中国技术传播大会分享的收获以及感悟. 据说,技术内容领域.传播领域的专家和决策者们 ...

  6. 轻量级NuGet—BaGet

    1. 介绍 BaGet是一个轻量级的包管理服务.有些时候公司或者个人不希望某一些包进行公开,那么就需要使用私有的包管理服务程序,该服务是用.netcore进行编写的(感谢开发者为社区做出的共享) Gi ...

  7. linux的简单使用

    了解Linux的简单使用 Linux的安装 下载Linux Ubuntu版本和虚拟机VMware软件. 我已经提前下载好了,下载好的文件分享出来bd 这个是文件夹内的VMWare软件的注册码,安装完成 ...

  8. Asp .Net Core 系列：Asp .Net Core 集成 Newtonsoft.Json

    简介 Newtonsoft.Json是一个在.NET环境下开源的JSON格式序列化和反序列化的类库.它可以将.NET对象转换为JSON格式的字符串,也可以将JSON格式的字符串转换为.NET对象.这个 ...

  9. Codeforces Round 170 (Div. 1)A. Learning Languages并查集

    如果两个人会的语言中有共同语言那么他们之间就可以交流,并且如果a和b可以交流,b和c可以交流,那么a和c也可以交流,具有传递性,就容易联想到并查集,我们将人和语言看成元素,一个人会几种语言的话,就将这 ...

  10. spingboot打造教育平台（谷粒学院课程笔记）

    第一单fqb  申明,项目的框架技术架构,前端运行时node   后端框架spring  开发前准备:mysbatis官网随时看文档,IDEa 202编释器2  环境配置,idea配置一下mavem路 ...