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. (转)PLSQL Developer 12.0.7连接Oracle12c数据库

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sl1992/article/details/80489413 1.下载安装PL/SQL Develo ...

  2. javascript闭包使用 分类： JavaScript 2015-05-01 11:34 652人阅读 评论(3) 收藏

    之前看到一段代码,很是不能理解,然后就查找资料并且找网络上得大牛请教,最后弄懂了这段代码,然后就拿出来总结一下. 1.挖坑 先来看一段代码: var arrTest = []; for (var i ...

  3. 在CentOS上装Redis

    Redis官网 $ wget http://download.redis.io/releases/redis-3.2.5.tar.gz $ tar xzf redis-.tar.gz $ cd red ...

  4. win10上走网络打印机(不需找驱动包，会自动)

    不多说,直接上干货! 之前是 现在是 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http://www.cn ...

  5. 如何VMare虚拟机里安装Mac操作系统（图文详解）

    不多说,直接上干货! 大部分用户玩的是windows,现在,跟随我来玩玩Mac. 1. VMware Workstation 11 2. unlocker 206(for OS X 插件补丁),这是V ...

  6. css自动适应宽度

    .itemContent { background-color:#F0F0F0; padding:3px 11px 11px 11px; text-align:justify; text-justif ...

  7. seq2seq attention

    1.seq2seq:分为encoder和decoder a.在decoder中,第一时刻输入的是上encoder最后一时刻的状态,如果用了双向的rnn,那么一般使用逆序的最后一个时刻的输出(网上说实验 ...

  8. freeSWITCH之多平台测试通信

    开始测试使用 强烈建议在统一的局域网下进行配置,通信 本机IP:192.168.1.155 架构 freeSWITCH搭建在以Windows平台作为通信服务器.fs_cli为服务器上测试客户端. X- ...

  9. 7-nginx-keepalived配置主从双击热备

    nginx的高可用解决方案 keepalive 是 VRRP 协议的完美实现, 通过vip(虚拟ip)来实现主从双击热备, 自动切换的高可用方案, nginx的主从是通过keepalived实现的 通 ...

  10. C语言中的条件编译

    通常情况,我们想让程序选择性地执行,多会使用分支语句,比如if-else 或者switch-case 等.但有些时候,可能在程序的运行过程中,某个分支根本不会执行. 比如我们要写一个跨平台项目,要求项 ...