CSS基础_Day04
CSS基础
一、CSS继承
1.给 HTML 的 body 元素添加样式
每一个 HTML 页面都有一个 body 元素。
我们可以通过设置 background-color 的属性值为黑色,来证明 body 元素的存在。
<style>body {background-color: black;//将整个body设置为黑色
}
</style>
2.从 body 元素继承样式
设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样,并且其他元素也会继承 body 中所设置的样式。
<style>body {background-color: black;color:green;font-family: monospace;}
</style>
<h1>Hello World</h1>
//h1元素继承了body元素中设置的样式
3.样式中的优先级
HTML 元素的样式会跟其他样式发生冲突。
就像 h1 元素不能同时设置绿色和粉色两种颜色。
<style>body {background-color: black;font-family: monospace;color: green;}.pink-text{color:pink;}
</style>
<h1 class="pink-text">Hello World!</h1>
//pink-text class覆盖了body元素的CSS样式
4.Class 选择器的优先级高于继承样式
刚刚证明了 class 会覆盖 body 的 CSS 样式,那么要怎么样才能覆盖 pink-text class 中所定义的样式?
HTML 同时应用多个 class 属性需以空格来间隔。
class="class1 class2"
//HTML元素里应用的class的先后顺序无关紧要.
但是,在<style>
标签里面声明的class顺序十分重要,之后的声明会覆盖之前的声明。第二个声明的优先级始终高于第一个声明。由于 .blue-text 是在后面声明的,所以它的样式会覆盖.pink-text里的样式。
5.ID 选择器优先级高于 Class 选择器
刚刚证明了浏览器读取 CSS 是由上到下的。 这就意味着,如果发生冲突,浏览器将会应用最后声明的样式。
注意:如果我们在 h1 元素的类中,将 blue-text 放置在 pink-text 之前,它仍然会检查声明顺序,而不是使用顺序!
#orange-text{color:orange;
}
//在style中设置#orange-text ID选择器
<h1 id="orange-text">ID选择器</h1>
注意:无论在 pink-text class 之前或者之后声明,id 选择器的优先级总是高于 class 选择器.
6.内联样式的优先级高于 ID 选择器
id 选择器无论在 style 标签的任何位置声明,都会覆盖 class 声明的样式。
<h1 id="orange-text" class="pink-text blue-text" style="color:white;">Hello World!</h1>
//内联样式高于ID选择器
7.Important 的优先级最高
很多时候,会使用 CSS 库, CSS 库中的样式会意外覆盖你的 CSS 样式。 如果想保证你的 CSS 样式不受影响,你可以使用 !important。
(1)#orange-text {color: orange !important;
}
(2).pink-text {color: pink !important;
}
//!important可以放在class或者id后面
二、颜色
1.使用十六进制编码获得指定颜色
日常生活中,我们使用的计数方法一般是decimals,或十进制,即使用数字0到9来表示。 而Hexadecimals(或hex)基于16位数字,它包括16种不同字符。像十进制一样,0-9的符号代表0到9的值。然后,A、B、C、D、E、F代表10至15的值。总的来说,0到F在十六进制里代表数字,总共有16个值。
在 CSS 里面,我们可以使用6个十六进制的数字来代表颜色,每两个数字控制一种颜色,分别是红(R)、绿(G)、蓝(B)。例如,#000000代表黑色,同时也是最小的值。
body {color: #000000;
}
2.使用十六进制编码混合颜色
通过三原色(红、绿、蓝),我们可以创建 1600 万种不同颜色。
例如,橘色是纯红色混合一些绿色而成,其中没有蓝色。 在十六进制编码里面,它可以写成 #FFA500。
0 是十六进制里面最小的数字,表示没有颜色。
F 是十六进制里面最大的数字,有最高的亮度。
颜色 | 十六进制 |
---|---|
道奇蓝 | #1E90FF |
绿色 | #00FF00 |
橙色 | #FFA500 |
红色 | #FF0000 |
3.使用缩写的十六进制编码
许多人对超过 1600 万种颜色感到不知所措, 并且很难记住十六进制编码。 幸运的是,你可以使用缩写形式。
例如,红色的 #FF0000 十六进制编码可以缩写成 #F00。 在这种缩写形式里,三个数字分别代表着红(R)、绿(G)、蓝(B)三原色。
这样,颜色的数量减少到了大约 4000 种。 且在浏览器里 #FF0000 和 #F00 是完全相同的颜色。
颜色 | 十六进制编码缩写形式 |
---|---|
蓝绿色 | #0FF |
绿色 | #0F0 |
红色 | #F00 |
紫红色 | #F0F |
4.使用 RGB 值为元素上色
RGB 值是在 CSS 中表示颜色的另一种方法。
黑色的 RGB 值:
rgb(0, 0, 0)
白色的 RGB 值:
rgb(255, 255, 255)
RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字,而只需要指定每种颜色的亮度大小,数值范围从 0 到 255。
如果我们稍微计算一下,就不难发现这两种表示方式本质上是等价的。在十六进制编码中,我们用两个十六进制数表示一个颜色;这样,每种颜色都有 16 * 16(即 256)种可能。 所以,RGB 从零开始计算,与十六进制代码的值的数量完全相同。
body {background-color: rgb(255, 165, 0);
}
5.使用 RGB 混合颜色
就像使用十六进制编码一样,你可以通过不同值的组合,来混合得到不同的 RGB 颜色。
颜色 | RGB |
---|---|
蓝色 | rgb(0, 0, 255) |
红色 | rgb(255, 0, 0) |
淡紫色 | rgb(218, 112, 214) |
赭黄色 | rgb(160, 82, 45) |
三、CSS变量
1.使用 CSS 变量一次更改多个元素
CSS 变量可以实现仅需要更新一个值,就可以将更改应用到多个 CSS 样式属性的强大方法。
.penguin {/* 只修改这一行下面的代码 */--penguin-skin: gray;--penguin-belly: white;--penguin-beak: orange;/* 只修改这一行上面的代码 *///自定义}
2.创建一个自定义的 CSS 变量
为创建一个 CSS 变量,你只需要在变量名前添加两个连字符号,并为其赋值即可,例子如下:
--penguin-skin: gray;
//这样就会创建一个 --penguin-skin 变量,它的值为 gray。 现在,其他元素可通过该变量来使元素变成灰色。
3.使用一个自定义的 CSS 变量
创建变量后,CSS 属性可以通过调用变量名来使用它对应的值。
background: var(--penguin-skin);
//因为引用了 --penguin-skin 变量的值,使用了这个样式的元素背景颜色会是灰色。
//请注意,除非变量名称完全匹配,否则将不会应用样式。
4.给 CSS 变量设置备用值
使用变量来作为 CSS 属性值的时候,可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
注意:备用值不是用于增强浏览器的兼容性,它也不适用于 IE 浏览器。 相反,它是用来让浏览器在找不到你的变量时可以显示一种颜色。
background: var(--penguin-skin, black);
5.通过浏览器降级提高兼容性
使用 CSS 时可能会遇到浏览器兼容性问题。 提供浏览器降级方案来避免潜在的问题会显得很重要。
当浏览器解析页面的 CSS 时,会自动忽视不能识别或者不支持的属性。 举个例子,如果使用 CSS 变量来指定站点的背景色,IE 浏览器由于不支持 CSS 变量而会忽略背景色。 此时,浏览器会尝试使用其它值。 但如果没有找到其它值,则会使用默认值,也就是没有背景色。
这意味着如果想提供浏览器降级方案,在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案,新的浏览器会在后面的声明里覆盖降级方案。
.red-box {background: red;//备用属性background: var(--red-color);}
6.继承 CSS 变量
当创建一个变量时,变量会在创建变量的选择器里可用。 同时,在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的,和普通的属性一样。
CSS 变量经常会定义在 :root 元素内,这样就可被所有选择器继承。
:root 是一个伪类选择器,它是一个能够匹配文档根元素的选择器,通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用,即在任何选择器里都生效。
7.更改特定区域的变量
当你在 :root 里创建变量时,这些变量的作用域是整个页面。
如果在元素里创建相同的变量,会重写作用于整个页面的变量的值。
:root {--penguin-belly:pink;}@media (max-width: 350px) {:root {--penguin-belly:white;}//media query(媒体查询)声明的 :root 选择器里,重写了--penguin-belly的值}
8.使用媒体查询更改变量
CSS 变量可以简化媒体查询的定义方式。
例如,当屏幕小于或大于媒体查询所设置的值,只要我们更新变量的值,那么使用了此变量的元素样式就都会更改。
:root {--penguin-size: 300px;--penguin-skin: gray;}@media (max-width: 350px) {:root {--penguin-size:200px;--penguin-skin:black;//在 media query(媒体查询)声明的 :root 选择器里,重定义 --penguin-size 的值为 200px。 //同时,重新定义 --penguin-skin 的值为 black}
谢谢你的坚持阅读ovo哟,让我们一起加油吖
CSS基础_Day04相关推荐
- html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6.2 CSS样式表的使用(一) 教学目标 1.知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
- CSS基础_Day03
CSS基础 一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
- CSS基础_Day02
CSS基础 一.字体 1.更改元素的字体大小 字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
- CSS基础_Day01
CSS基础 一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
- 学习笔记(二)——CSS基础
文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- 和前端撕出逼格,撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记(w3school)
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
最新文章
- 芝麻HTTP:TensorFlow基础入门
- kali用Squid简单配置搭建http代理服务器
- 互联网协议 — OAuth2 第三方授权协议
- torch yolov3 minibatch 失败
- 【Spring注解系列07】Spring注入Bean有哪些方式总结
- linux库函数mmap()原理及用法详解
- boost::mp11::mp_replace_second相关用法的测试程序
- MySQL高级 - 存储引擎 - 选择原则
- Spring 整合 Mybatis
- RAN adjusts schedule for 2nd wave of 5G specifications
- codova添加android慢_从 0 开始学 Linux 内核之 android 内核栈溢出 ROP 利用
- 开源GIS(十七)——OGC标准
- netty 使用阻塞发送_大数据、分布式都用到了的Netty,这几大核心知识你一定要看看!...
- Java编码规范总结
- IDEA 插件开发 创建一个控制台窗口
- 奥克兰理工大学计算机学院,9月17日学术报告(新西兰奥克兰理工大学 Prof. Re
- 从使用者观点去认识软件系统
- AD936x+ZYNQ搭建OpenWIFI
- matlab特征提取之欧拉数
- 新一代安全运营中心体系
热门文章
- leetcode-寻找两个正序数组的中位数
- word2vector 讲的比较好的文章
- svn提交怎么全选_做外贸怎么精准开发国外客户?终于有答案了
- Leetcode 24.两两交换链表的节点 (每日一题 20210624)
- 最简单的贝叶斯分类器MATLAB实现
- 多变量线性回归 原理
- (详细)Hibernate框架的搭建,Hibernate的CRUD操作(一)
- idea console中文乱码_Python3的字符编码乱码问题解决思路
- LeetCode-剑指 Offer 50. 第一个只出现一次的字符
- MapReduce工作流理解