进击のpython

*****

前端学习——CSS基础

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

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

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

内嵌式

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

这种方法就称为内嵌式：

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

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

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

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

嵌入式

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

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

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

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

统一设置span标签的样式：

<style type='text/CSS'>

    span{

        color:red;

    }

</style>

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

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

外部式

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

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

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

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

那么这就是外部式CSS样式

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

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

<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文件中设置)
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

    <style>

        span {

            color: green;

        }

    </style>

</head>

<body>

<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>

</body>

</html>


span{

    color: pink;

}

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

内联式>嵌入式>外部式

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

绿色：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

    <style>

        span {

            color: green;

        }

    </style>

</head>

<body>

<p><span>百因必有果！</span>你的报应就是我！</p>

</body>

</html>

粉色：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span {

            color: green;

        }

    </style>

        <link rel="stylesheet" href="index.css">

</head>

<body>

<p><span>百因必有果！</span>你的报应就是我！</p>

</body>

</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. maven在idea中的配置的注意点

    1.基本的配置查看尚硅谷的文档链接在下 链接:https://pan.baidu.com/s/18gwll6gU38qNH2P01To-lQ 提取码:oq40 2.注意点: 需要将新建项目的配置也修改 ...

  2. 入门大数据---Kafka消费者详解

    一.消费者和消费者群组 在 Kafka 中,消费者通常是消费者群组的一部分,多个消费者群组共同读取同一个主题时,彼此之间互不影响.Kafka 之所以要引入消费者群组这个概念是因为 Kafka 消费者经 ...

  3. FreeSql 使用 ToTreeList/AsTreeCte 查询无限级分类表

    关于无限级分类 第一种方案: 使用递归算法,也是使用频率最多的,大部分开源程序也是这么处理,不过一般都只用到四级分类. 这种算法的数据库结构设计最为简单.category表中一个字段id,一个字段fi ...

  4. python将列表按行写入csv

    import csv rows2 = ['abc1/ab1c','N'] for n in range(10): f = open("ok.csv", 'a',newline='' ...

  5. MFC--自己优化滚动条的双缓冲绘图方法

        2010-01-09 18:45 MFC--自己优化的双缓冲绘图方法 自己通过尝试,用修改视图坐标的方法, 优化了双缓冲绘图,实现起来并不复杂. 在介绍这个方法前,重新介绍一下窗口和视口的概念 ...

  6. JQ三种提示框：提示信息框、确认框、输入文本框

    浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...

  7. sql 更新时 实现 数字字段自加1

    第一种:直接使用SQL语句,这种方式可以避免并发操作造成的数据不一致问题UPDATE 表名称 SET 列名称 = 列名称 + 1 WHERE …… 第二种:将上面的语句逻辑封装成一个存储过程,加上事务 ...

  8. 洛谷 P4017 【最大食物链计数】

    看到这种明显的有向无环图,并且等级分明,自然而然就能想到拓补排序啦.对于这道题,我们就可以利用最短路计数的那种思想(不知道也没关系),设\(j\)是\(i\)的后继,\(dis_i\)表示以\(i\) ...

  9. 使用 Egg + Vue 的第一个线上小产品——远程工作职位信息收集站点 yuancheng.works

    小插曲 开始很纠结,买了一个 yuancheng.works 域名会不会冒犯到 yuancheng.work 站长. 还在群里咨询了 @Phodal 等前辈.重新搞一个新域名,yuancheng.wo ...

  10. 最简单的博弈论——HDU - 5963 朋友 (博弈)

    OK,好的先看一下题意: B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根. ...