进击の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. Python 简明教程 --- 13，Python 集合

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 如果代码和注释不一致,那很可能两者都错了. -- Norm Schryer 目录 前几节我们已经介绍 ...

  2. SpringBoot项目部署到tomcat

    SpringBoot部署到tomcat 一.修改maven.xml 1.添加<.packaging>war</.packaging>,打包为war包 <packaging ...

  3. SpringBoot启动源码及自定义starter

    为什么springboot工程能够在mian方法中完成启动呢?需要大家掌握的有几个点:1.SPISPI在springboot中是去读取META-INF/spring.factories目录的配置文件内 ...

  4. python数据结构（三）

    copy 复制对象,copy模块包含了两个行数copy和deepcopy,用于复制现有的对象. 浅副本(浅复制) copy()创建的浅副本是一个新容器,其中填充了原对象内容的引用 import cop ...

  5. Netty 源码解析（二）：Netty 的 Channel

    本文首发于微信公众号[猿灯塔],转载引用请说明出处 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty源码解析(一):开始 当前:Netty 源码解析(二): Netty 的 Channel ...

  6. 每日一题 - 剑指 Offer 49. 丑数

    题目信息 时间: 2019-07-03 题目链接:Leetcode tag:动态规划 小根堆 难易程度:中等 题目描述: 我们把只包含质因子 2.3 和 5 的数称作丑数(Ugly Number).求 ...

  7. 多种CSS变量技术 带入进入老司机行业

    CSS 变量技术 具体用法 使用 -- 声明变量,使用 var() 函数获取变量. :root{ --header-height: 70px; } body { --color: white; } . ...

  8. efcore 跨表查询，实现一个接口内查询两个不同数据库里各自的表数据

    最近有efcore跨库查询的需求,研究了下colder框架里文档的分库实现,发现并不能完全实现一个接口下的跨库查询请求,只能满足一个业务层构造指定的唯一一个数据库访问接口. 先说下文档是怎么实现的 D ...

  9. day09总结

    with 上下文管理 # f = open(r"文件路径", mode="rt", encoding="utf-8")# data = f. ...

  10. pigctf期末测评

    pigctf期末测评 MISC 1 拿到图片,先binwalk一下,如下图 果然发现png图片后面跟了个ZIP,然后提取出来打开发现了一个flag.png,然后查看16进制文件没有发现什么问题,之后查 ...