进击のpython

*****

前端学习——CSS基础

CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的

按照插入的形势来看，可以分为三种情况

而接下来就对这三种情况进行简单的讨论

内嵌式

CSS样式表是可以直接把代码放在现有的标签里面去的

这种方法就称为内嵌式：

  1. <p style='color:red;'>文字颜色为红色</p>

把对应的style属性，写在p标签的开始标签中

CSS样式代码要写在style=“”双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开

  1. <p style='color:red;font-size:12px;'>文字颜色为红色</p>

嵌入式

有个新的任务百因必有果！你的报应就是我！，我想把百因必有果，你，我这三个变成红色

要是用内嵌式的话，那可就太难了（每一个<span>标签加入style=”color:red;”语句，如果有多个span呢？）

那么嵌入式CSS样式的编写就能让我们很快的解决这个问题

嵌入式样式就是把CSS样式代码写在<style type='text/CSS'></style>标签之间

统一设置span标签的样式：

  1. <style type='text/CSS'>
  2.     span{
  3.         color:red;
  4.     }
  5. </style>

嵌入式的CSS样式必须写在<style></style>之间

并且一般情况下嵌入式CSS样式写在<head></head>之间

外部式

大家试想一下，如果我们做一个类似淘宝那样的商城网站

那么随着项目需求的增多，我们的CSS代码量也会更庞大，越发到了后期

我们上述的内联式和嵌入式CSS样式的方式肯定是不行的，那我们应该怎么办?

这个时候，我们可以使用将我们的CSS代码编写到另一个单独的文件中，以为了后期方便维护我们的代码

那么这就是外部式CSS样式

外部式CSS样式(也可称为外链式)就是把CSS代码写一个单独的外部文件中，这个CSS样式文件以”.CSS”为扩展名

在<head>内（不是在style标签内）使用<link>标签将样式文件链接到HTML文件内，如下代码：

  1. <link rel="stylesheet" href="index.CSS" type="text/CSS">
  • CSS样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等
  • rel=”stylesheet”
    • rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
    • stylesheet：文档的外部样式表
  • href：是指定超链接(之前学习a标签的时候)目标的URL,href属性的值为样式表文件的地址
  • <link>标签位置一般写在<head>标签之内

优先级

这么多方式，要是叠加使用，应该用谁的样式呢？？？这就是我们现在要考虑的问题

我们做个测试：

  1. 使用内联css设置”百因必有果“文字为红色。
  2. 然后使用嵌入式css设置文字为绿色
  3. 最后使用外部式设置文字为蓝色(index.css文件中设置)
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="index.css">
  7.     <style>
  8.         span {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <p><span style="color: red">百因必有果！</span>你的报应就是我！</p>
  16. </body>
  17. </html>
  1. span{
  2.     color: pink;
  3. }

我们发现，颜色是红色，为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性

内联式>嵌入式>外部式

重点来了！！嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面！

绿色：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="index.css">
  7.     <style>
  8.         span {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <p><span>百因必有果！</span>你的报应就是我！</p>
  16. </body>
  17. </html>

粉色：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         span {
  8.             color: green;
  9.         }
  10.     </style>
  11.         <link rel="stylesheet" href="index.css">
  13. </head>
  14. <body>
  15. <p><span>百因必有果！</span>你的报应就是我！</p>
  17. </body>
  18. </html>

所以根本的优先级其实是就近原则！，哪个离被修饰的元素近，用哪个样式！

这也就是为什么CSS叫层叠样式表！

*****
*****

前端学习（九）：CSS基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  3. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  4. 软件测试必备-前端知识点之css基础及ps的用法

    CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. c ...

  5. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  6. 前端学习 之 JavaScript基础

    一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...

  7. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  8. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  9. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  10. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

随机推荐

  1. 传统声学模型之HMM和GMM

    声学模型是指给定声学符号(音素)的情况下对音频特征建立的模型. 数学表达 用 \(X\) 表示音频特征向量 (观察向量),用 \(S\) 表示音素 (隐藏/内部状态),声学模型表示为 \(P(X|S) ...

  2. DOM-BOM-EVENT（6）

    6.BOM 6.1.什么是BOM? BOM(Browse Object Model),浏览器对象模型,没有相关标准,是约定俗成的东西,定义了一些操作浏览器的方法和属性,大部分方法都是通过window对 ...

  3. Nginx配置upstream并且实现负载均衡

    感谢看过这一些列博文和评论的小伙伴, 我把自己所看到的学到的拿到这里来分享是想和大家一起学习进步, 想听听园友给出的意见, 也是对自己学习过程的一个总结. 技术无止境, 我们仍需努力! 1,话不多说, ...

  4. LeetCode64. 最小路径和

    这题和62题以及63题类似,只不过dp数组的状态表示变了,这里dp数组不再表示方案数,而是到当前格子的最小路径和.可以发现:要到达第i行第j列的格子,只有从第i - 1行第j列的格子或第i行第j - ...

  5. JavaScript基础对象创建模式之单体/单例模式(Singleton)

    首先,单例模式是对象的创建模式之一,此外还包括工厂模式.单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 Java中大 ...

  6. 什么是JDK的SPI机制

    什么是SPI和API Application Programming Interface (API)? The API is the description of classes/interfaces ...

  7. 让 JavaScript 与 CSS 和 Sass 对话

    JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...

  8. 「疫期集训day13」雾天

    我们千里迢迢赶来这里支援协约国----与德军正面交锋的美国士兵 今天考试签到题都没A,失误重大,T1几周前做过的拓扑排序板子都没写,T2失误在没敢调试,对自己信心不足,30分钟写了个DP,几分钟没调出 ...

  9. 棋子游戏 51Nod - 1534 思维题

    题目描述 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从 ...

  10. 前端进阶笔记（一）---JS语言通识

    一.语言按照语法分类 1.非形式语言:中文 英文 2.形式语言:乔姆斯基谱系(四种文法 上下文包含文法) 0型 无限制文法 1型 上下文相关文法 2型 上下文无关文法 正则文法 二 产生式(BNF) ...