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. Netty核心概念(6)之Handler

    1.前言 本节介绍Netty中第三个重要的概念——Handler,这个在前两节都提到了,尤其是Channel和Handler联系紧密.handler本身的设计非常简单,但是所起到的作用却很大,Nett ...

  2. Windows 8家长控制

    不多说,直接干货! 此刻,限制小孩使用电脑时间已经完成!!! 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http ...

  3. tomcat启动(一)startup.bat|catalina.bat分析

    环境:windows X64位 Tomcat8.0.47 bootstrap.jar是tomcat的内核 开始位置 startup.bat 查看文本 具体的批处理脚本语法可以查看我整理的文章 http ...

  4. xgboost与gbdt区别

    1.基分类器的选择:传统GBDT以CART作为基分类器,XGBoost还支持线性分类器,这个时候XGBoost相当于带L1和L2正则化项的逻辑斯蒂回归(分类问题)或者线性回归(回归问题). 2.二阶泰 ...

  5. [笔记] Python 图片转字符画

    一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0  Python 图像处理库, 需要另外安装 三.原理 gray ＝ 0.21 ...

  6. TCP/IP详解学习笔记 这位仁兄写得太好了.（转载）

    TCP/IP详解学习笔记   这位仁兄写得太好了   TCP/IP详解学习笔记   这位仁兄写得太好了. http://blog.csdn.net/goodboy1881/category/20444 ...

  7. C# 获取config文件 实体转换

    随着项目的扩展,单独的key,value配置文件已经不能满足需求了 这里需要自定义配置节点,例如 <!--自定义 具体实体类配置问节点信息--> <School Name=" ...

  8. 区别js中name与id的简单方法

    举个简单的例子: <form name="form1"> 用户名:<input type=text name="username" id=&q ...

  9. 【原】spring redis 缓存注解使用

    由于最近新上的项目很多模块没有做数据缓存,大量的请求都会到数据库去查询,为了减轻数据库的压力以及提高网站响应速度,所以在这里采用了spring 提供的注解+redis实现对数据的缓存,主要针对非热点数 ...

  10. 简易HashMap实现

    为了更好的理解HashMap线程不安全的根源,这里提供了HashMap的简易实现: package map.test; import org.apache.commons.lang3.StringUt ...