10款RGB素选择器RGB/10/25RGB

风格继承:

我们为一个元素设置的样式也会应用到它的后代元素上,但并不是所有的样式都会被继承,比如:背景相关、布局相关……  

选择器优先级:

当我们通过不同的选择器选择同一个元素,为同一个样式选择不同的值时,就会发生样式冲突。

选择器的权重(从高到低):

内联样式:1,0,0,0;

id 选择器:0,1,0,0;

类和伪类选择器:0,0,1,0;

元素选择器:0,0,0,1;

通配符选择器:0,0,0,0;

继承样式:无优先级

比较优先级时,需要将所有选择器的优先级相加计算,最后优先显示优先级高的,分组后的选择器分别计算。选择器的累积不会超过最大数量级,也就是说无论class选择器多高,都不会超过id选择器。如果计算后优先级相等,则先使用较低的样式(选择器越具体,优先级越高)。

你可以加 ”!” 在样式之后,该样式将获得最高优先级,甚至超过内联样式。但在实际开发中谨慎使用!

长度单位:

像素px,相同的像素在不同的设备上显示不同

%,可以将属性值设置为父元素属性的百分比

em,相对于元素的字体大小计算,1em=1font-size

rem,相对于根元素 (html) 字体大小计算

图片[1]-10款RGB素选择器RGB/10/25RGB-唐朝资源网

颜色单位:

可以使用颜色名称或 RGB 值在 CSS 中设置颜色。

RGB:红、绿、蓝;每种颜色范围为 0-255 (0%-100%),语法:RGB(0,0,255) 或 RGB(10%,0%, 255%)

RGBA:在 RGB 中添加 A 表示不透明度,1 表示不透明,0 表示透明,0.5 表示半透明,语法:RGB(0,0,255,.5)

十六进制RGB值:语法#,如果是#格式css设置input背景色,可以简写为#abc

HSL: 色调(0-360), 饱和度(0%-100%), 亮度(0%-100%); 语法: HSL(30, 20%, 30%)

HSLA:将 A 添加到 HSL 以获得不透明度

文件流程:

网页是一个多层结构,可以通过 CSS 为每一层设置样式。作为用户,只能看到顶层。在这些层中,最底层称为文档流。文档流是网页的基础。我们创建的元素默认排列在文档流中。

对我们来说,一个元素有两个主要状态:

1.在文档流中:

块元素:页面中的单行(从上到下垂直排列);默认宽度是填充父元素,默认高度是被内容(子元素)拉伸

内联元素:不占一行(横向从左到右),只占自己的大小,如果一行放不下,切换到第二行继续从左到右排列(符合书写习惯);默认宽度和高度是内容传播

2.不在文档流中(文档流外)

盒子模式:

CSS 将页面中的所有元素设置为一个矩形框,页面的布局相当于放置了一个框。每个框由以下部分组成:内容区域()css设置input背景色,边框(),填充(),边距()。





	
	
	
		.box{
			/*设置内容区的高度、宽度、背景颜色*/
			height: 200px;
			width: 200px;
			background-color: #bfa;
			/*————————————————————————————————————————*/
			/*设置边框的宽度(一般默认三个像素)、颜色、样式*/
			border-width: 10px 20px 30px 40px;
			/*四个值:分别设置上、右、下、左的宽度
			  三个值:分别设置上、左右、下的宽度
			  两个值:分别设置上下、左右的宽度
			  一个值:设置上下左右的宽度
			  除了border-width外,还有一组:border-xx-width用来单独指定某一个边的宽度
			  xx:top、right、bottom、left*/

			border-color: skyblue greenyellow yellowgreen;
			/*可以指定四个边框的颜色,与border-width类似,如果省略不写则自动使color的颜色值*/
			color: red;
			border-style: solid double;
			/*可以指定四个边框的样式,与border-width类似,值有:
			  solid实线、dotted点状虚线、dashed虚线、double双线
			  默认值是none,无边框*/
			/*border:solid 10px orange;  
			  这个是border的简写属性,可以同时设置边框的所有相关样式,并且没有顺序要求
			  除此之外还有四个border-xx,用法与之相同
			  xx:top、right、bottom、left*/
			/*————————————————————————————————————————*/
			/*内边距只能设置大小,不能设置颜色和样式等
			  内边距的设置会影响盒子的大小,内容区的背景颜色会延伸到内边距上
			  内容区、内边距、边框加在一起共同构成盒子大小*/
			  padding-left: 50px;
			/*padding-xx
			  xx:top、right、bottom、left

图片[2]-10款RGB素选择器RGB/10/25RGB-唐朝资源网

简写属性padding:;*/ /*————————————————————————————————————————*/ /*外边距不会影响可见框的大小,但会影响盒子的位置和实际占用空间 margin-xx xx:top(正值,元素向下移动) right(默认情况设置不会产生任何效果) bottom(正值,下侧元素向下移动) left(正值,元素向右移动) 简写属性margin:; 如果设置负值,则元素会向相反方向移动 元素在页面中自左向右排列,默认情况下如果我们设置的左和上外边距会移动元素自身,右和下外边距会移动其他元素*/ margin-top: 60px; margin-bottom: -10px; } .inner{ width: 100%; height: 100%; background-color: pink;

图片[3]-10款RGB素选择器RGB/10/25RGB-唐朝资源网

} .box2{ background-color: yellow; width: 100px; height: 100px; margin-left: 80px; }

图片[4]-10款RGB素选择器RGB/10/25RGB-唐朝资源网

(作者观看的学习视频:哔哩哔哩还是硅谷)

© 版权声明
THE END
喜欢就支持一下吧
点赞132 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片