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. 【链表】Linked List Cycle II

    题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...

  2. 关于Class的invokeDynamic指令

    (1)java7之Special Methods (2)invokedynamic指令 https://www.cnblogs.com/wade-luffy/p/6058087.html public ...

  3. nuxt踩过的坑

    nuxt.js 简单介绍 nuxt官网:https://zh.nuxtjs.org/ 1.nuxt.js的原理图: 具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述. 2.nuxt.js的优 ...

  4. C语言中判断字符串str1是否以str2开始或结束

    #include <stdlib.h> #include <string.h> #include <stdio.h> /**判断str1是否以str2开头 * 如果 ...

  5. 转载《浅析MVC框架中View层的优雅设计及实例》

    在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...

  6. linux svn 开机启动

    在/etc/init.d中建立svnboot,内容如下: #!/bin/bash if [ ! -f "/usr/bin/svnserve" ] then echo "s ...

  7. linux之tmpfs

    1.概述 tmpfs是ramfs的衍生品,ramfs是基于RAM的文件系统,不能使用swap空间:tmpfs可以动态释放空间.可以使用swap空间.ramfs不能控制使用内存的大小容易使内存爆掉:而t ...

  8. SharePoint 2013 EventHanlder工具

    之前在07的时候使用SharePoint Event Receiver Manager (2007 & 2010)来管理SharePoint的Event Handler,但是2013后作者没有 ...

  9. Node.js文件操作二

    前面的博客 Node.js文件操作一中主要是对文件的读写操作,其实还有文件这块还有一些其他操作. 一.验证文件path是否正确(系统是如下定义的) fs.exists = function(path, ...

  10. Vertica示例数据库安装

    1.示例数据库简介: Vertica跟传统数据库一样,自带了示例数据库--VMart示例数据库,是一个多架构数据库.该数据是大型超市(VMart)中可能会用到的数据库,可用来访问产品.客户.员工以及网 ...