HTML基本理解day11 | 青训营笔记

简介: HTML基本理解day11 | 青训营笔记

1.参数是万位名词

(1)如果指定的两个值都是方位名词,则两个值前后顺序无关,比如lefttoptop left效果一致

(2)如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐 2.参数是精确单位

(1)如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标

(2)如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

background-attachment : scroll | fixed
复制代码

为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。从而节约代码量 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:

background:背景颜色 背景图片地址背景平铺 背景图像滚动背景图片位置:
复制代码

CSS3为我们提供了背景颜色半透明的效果。

background:raba(0,0,0,0.3);
复制代码

最后一个参数是alpha透明度,取值范围在0~1之间,我们习惯把0.3的0省略掉,写为

background:rgba(03);
复制代码

注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。CSS3新增属性,是IE9+版本浏览器才支持的,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

1670048897984.jpg

背景图片: 实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)


CSS的三大特性


1.1层叠性、继承性


1.1层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层委)另一个冲突的样式。层委性主要解决样式冲突的问题

层叠性原则: 样式冲突,遵循的原则是就近原则 哪个样式离结构近,就执行哪个样式。样式不冲突,不会层叠

<style type="text/css"> div{
color:red;
font-size:18px;
} 层叠掉 div .color: green; 
div{ color:green; 后来居上 div{ acolor font-size: 18px; redt 
}
</style>
复制代码

现实中的继承:我们继承了父亲的姓

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业

<style type="text/css">
div{ p标签的样式 
color:red; 继承自父元素的样式 
font-size:18px; rined from div 
元爱htm1:2
color: td: 
</style> font-size: 18px; 
(/head)<body><div>
<p>文本颜色</p</div>
复制代码

恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

相关文章
|
8天前
|
缓存 前端开发 JavaScript
HTML设计最新笔记
HTML设计最新笔记
15 1
|
18天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
23 1
|
18天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
27 0
|
18天前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
18天前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
18天前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
18天前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
18天前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
18天前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
18天前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型