首先，我们要知道CSS是什么。简单地说，CSS层叠样式表是用来表现HTML或XML等文件样式的一种语言，它可以对页面中所有元素的位置、大小、颜色等进行编辑，来静态的修饰网页，规范页面的排版布局。那么CSS如何与对应的HTML文件进行连接从而起到作用呢？这就是本篇博客的主要内容。

　　应用CSS样式表的三种方式：行内样式表、内部样式表、外部样式表

　　　　1.行内样式表：是用style属性实现，写在<body></body>内部的样式表

　　　　　　　　特点：1.讲CSS代码与HTML代码完全杂糅在一起，不符合W3C关于“内容与表现分离”的编码规则，不利于后期维护

　　　　　　　　　　　2.优先级最高，一般用的测试

 <body>

     <div style="样式；样式；">

     </div>

 </body>

　　　　2.内部样式表：是把<style type="text/css"></style>写在<head></head>头部的样式表

　　　　　　　　特点：1.将CSS与HTML文件分离，但不彻底，无法实现样式复用性

　　　　　　　　　　　2.优先级<行内样式表

<head>

        <meta charset="UTF-8">

        <title>应用CSS的三种方式</title>

        <style type="text/css">

        </style>

</head>

　　　　3.外部样式表：是重新建立一个CSS文件，命名一般与对应的HTML文件名字一样；需要在HTML文件的<head></head>头部加一个<link>标签用于连接

　　　　　　　　<link>标签的属性有：rel：声明被连接文档与当前文档的关系

　　　　　　　　　　　　　　　　　　 href：被连接文档的地址，必填！

　　　　　　　　　　　　　　　　　　 type：被连接文档的类型，可以选择是CSS或者JS或者其他

　　　　　　　　特点：1.将CSS与HTML彻底分离，方便后期复用和维护

　　　　　　　　　　　2.优先级<内部样式表

<link rel="stylesheet" type="text/css" href="D6-CSS样式表（连接方式）.css">

CSS样式之连接方式的更多相关文章

  1. CSS 样式的使用方式、选择器

    在html中使用css的三种方式: 1.行内样式:同过元素的style属性来设置 <p style="font-size:20px; color:red">hello& ...

  2. CSS样式的插入方式

    1.外部样式: 当样式需要应用于很多页面时,外部样式表将是理想的选择.<head> <link rel="stylesheet" type="text/ ...

  3. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

  4. JS设置CSS样式的集中方式

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element. ...

  5. CSS样式表引用方式

    最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式: 1.外部文件引用方式;(推荐使用) 2.使用@import引用外部CSS文件; 3.内部文档头方式也叫内嵌法调用; 4.直接插入式 ...

  6. 前端开发---css样式的使用方式

    css使用方式: 1.内联样式表: <body style="background-color:green" margin:0 ; padding:0;> 2.嵌入式样 ...

  7. CSS样式的引入方式

    test.css div{ color:yellow; } 在html中引入 <link href="test.css" type="text/css" ...

  8. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  9. web前端（7）—— 了解CSS样式，引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

随机推荐

  1. 最常用的缓存技术---redis入门

      Redis简介 Redis是基于内存,也可以基于磁盘持久化nosql数据库,使用c语言开发. 数据存储结构:key-value 安装环境准备 Redis使用c语言开发,需要使用gcc编译程序进行编 ...

  2. GO的初始简书（二）环境变量设置与说明

    安装GO后你应该做的一些事~ 将自己需要开发的项目加入环境变量中的gopath中 GOPATH其实就一个工作目录   -----正在开发的项目 1首先在本地新建目录 go_work 2 vi ~/.b ...

  3. HDU 6024（中国大学生程序设计竞赛女生专场1002）

    这是CCPC女生专场的一道dp题.大佬们都说它简单,我并没有感到它有多简单. 先说一下题意:在一条直线上,有n个教室,现在我要在这些教室里从左到右地建设一些作为糖果屋,每个教室都有自己的坐标xi 和建 ...

  4. PHP 工厂模式 实例讲解

    简单工厂模式:①抽象基类:类中定义抽象一些方法,用以在子类中实现②继承自抽象基类的子类:实现基类中的抽象方法③工厂类:用以实例化对象 看完文章再回头来看下这张图,效果会比较好 1 采用封装方式 2 3 ...

  5. 【charger battery 充電 充電器 電池】停充的種類

    Precondition : 配有 power path 功能的 BQ2589 手機. 接上 pc usb port. Origin : 今天有同事問我, 手機是否可以在接上 pc usb port ...

  6. 关于QT按键信号槽的总结（原创）

    QT界面按钮一般是必填的: 每个按钮都要 Go to slot 下面有几个都是常用的,先说一下 clicked:pressed:releaed的区别 字面意思看:click是点击一下,pressed是 ...

  7. java虚拟机学习-JVM调优总结-典型配置举例（10）

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  8. 浅析Web缓存

    在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度.其中提高网页反应速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并 ...

  9. SparkMLlib回归算法之决策树

    SparkMLlib回归算法之决策树 (一),决策树概念 1,决策树算法(ID3,C4.5 ,CART)之间的比较: 1,ID3算法在选择根节点和各内部节点中的分支属性时,采用信息增益作为评价标准.信 ...

  10. SPFA求单源最短路径

    序 求最短路径的算法有很多,各有优劣. 比如Dijkstra(及其堆(STL-priority_queue)优化),但是无法处理负环的情况: 比如O(n^3)的Floyd算法:比如Bellman-Fo ...