CSS 引入共有三种方式:内部样式表内联样式(行内样式)表外部样式表,当然也可以使用多重样式

内联样式

<div style="color:red;font-size:20px">内联样式表</div >

内联样式 直接把样式卸载html代码行内,一般仅仅在此样式仅仅只在当前元素上应用时使用,其他情况下尽量不要使用。

内部样式表

 <style>
div {
color: blue;
font-size: 20px
}
</style>

内部样式表一般写在HTML头部,在<head>标签内用<style>标签括起来。此方式一般使用在当前页面需要使用特殊的样式。

外部样式表

 <link rel="stylesheet" href="CSS/Googlefonts.css">

外部样式表 是单独将样式写到一个css文件中,并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。

多重样式

当使用多重样式时,多重样式将会重叠为一个,一般而言多个样式表会根据下面的规则重叠为一个,其中4为最高权重

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 head 标签内部)
  4. 内联样式(在 HTML 元素内部)

多重样式优先级顺序

对于同一个元素的多个样式而言,优先级次序如下,7的优先级最高(!important 规则例外,但一般尽量不要用):

  1. 通用选择器(*)
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

CSS 小结笔记之三种样式表的更多相关文章

  1. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  2. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  3. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  4. 程序员接触新语言————hello world ^-^,web3种样式表

    我的第一个网页 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  6. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  7. CSS的三种样式表和优先级

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  8. CSS 小结笔记之选择器

    Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...

  9. 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

随机推荐

  1. (转)http://blog.csdn.net/renfufei/article/details/38474435

    原文:http://blog.csdn.net/renfufei/article/details/38474435

  2. ElasticSearch Aggs的一些使用方法

    这段代码是关于多层聚合和嵌套域的聚合,来源:https://github.com/elasticsearch/elasticsearch/blob/master/src/test/java/org/e ...

  3. PHP CURL 伪造IP和来路

    //随机IP function Rand_IP(){ $ip2id= round(rand(, ) / ); //第一种方法,直接生成 $ip3id= round(rand(, ) / ); $ip4 ...

  4. 【树】Construct Binary Tree from Inorder and Postorder Traversal

    题目: Given inorder and postorder traversal of a tree, construct the binary tree. 思路: 后序序列的最后一个元素就是树根, ...

  5. html的css选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 工具类APP

    应用名称 工具S 英文名称 未填写 应用描述 工具类APP 英文描述 未填写 应用官网 this 应用图标  

  7. Chapter 3 Phenomenon——12

    Naturally, the ambulance got a police escort to the county hospital. 自然而然的,救护车让一个警察陪护到县医院去. 自然,救护车一路 ...

  8. Behave用户自定义数据类型

    在step句子中, 所有的参数默认是string类型, 如果用户想使用复杂的或者其他数据类型, 就需要了解以下bahave中的数据类型. behave的数据类型转换器是在parse和cfparse中支 ...

  9. 本地git关联远程github

    0. 前言 我们开发的项目,均在本地开发:为了保证项目进度的一致性和公开性等,我们通常将开发过程代码或成品放置到github中,本文就讲述如何使得本地git与远程github同步! PS:以下两个名称 ...

  10. 细说setTimeout/setImmediate/process.nextTick的区别

    node.js中的非IO的异步API提供了四种方法,分别为setTimeOut(),setInterval(),setImmediate()以及process.nextTick(),四种方法实现原理相 ...