进击の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. Zookeeper分布式过程协同技术 - 概念及基础

    Zookeeper分布式过程协同技术 - 概念及基础 Zookeeper是什么? Zookeeper是一种分布式过程协同技术,其所提供的客户端API功能强大,其中包括: 保障强一致性.有序性和持久性. ...

  2. ⚡ vue3 全家桶体验

    前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...

  3. SQL注入之常用工具sqlmap

    通常来说,验证一个页面是否存在注入漏洞比较简单,而要获取数据,扩大权限,则要输入很复杂的SQL语句,有时候我们还会对大量的URL进行测试,这时就需要用到工具来帮助我们进行注入了. 目前流行的注入工具有 ...

  4. SpringSceurity(5)---短信验证码登陆功能

    SpringSceurity(5)---短信验证码登陆功能 有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...

  5. 且谈 Apache Spark 的 API 三剑客：RDD、DataFrame 和 Dataset

    作者:Jules S. Damji 译者:足下 本文翻译自 A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets ,翻译已 ...

  6. 开发中如何让本地host和代理共存？

    开发中若遇到了需要相同域名的情况,比如利用cookie共享的sso策略,可以设置本地host映射到开发服务.设置域名,生效,正常开发. 但在公司中可能是内网,请求都需要经过代理,这时候可能会发现设置h ...

  7. Zookeeper Watcher 流程分析(结合源码)

    概述 ZK提供了分布式数据的发布/订阅功能,一个典型的发布/订阅模型系统定义了一种一对多的订阅关系,能够让多个订阅者同时监听某个主题对象,当这个主题对象自身状态发生变化时,会通知所有的订阅者.在ZK中 ...

  8. angular入门--filter搜索

    首先,列表绑定忽略 先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> < ...

  9. 自动化测试平台（Vue前端框架安装配置）

    Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...

  10. if-else和三目运算符 ? : 的对比

    今天的地铁思考让我想起一个之前学C语言的时候一直没有验证的事情:既生瑜何生亮? 平时写代码的时候,似乎并没有太多的关注我应该选用什么条件判断语句,感觉判断条件或者两条支路语句复杂就本能地if-else ...