前言
持续总结输出中,今天讲的是Web前端,Chrome调试工具的基础操作,使用Chrome调试工具修改调试样式,颜色的常见取值,标签水平居中方法
1、Chrome调试工具
1. 打开方式
• 1、右击→检查
• 2、看哪里
elements:显示当前页面的html结构
styles:显示当前标签的样式
2. 选择元素
• 两种常见方法
方法一:在左侧elements中点击需要调试的元素
方法二:点击左上角按钮后,直接在网页中点击需要调试的元素
3. 控制样式
• 1、修改属性值
直接点击属性值,直接修改
• 2、添加属性
在上一个属性的分号后点击一下,直接添加
• 3、控制样式生效
点击属性前的小框即可
注意点:调试工具仅仅只是当前的调试效果,需要在代码中修改才能永久保留
4. 特殊情况
• 1、出现删除线
表示样式失效
原因:
1、样式被注释了
2、样式被覆盖了
• 2、出现小三角形
表示样式报错
原因:
1、属性值后没写分号
2、出现中文标点
3、属性名或者属性值单词拼错
总结
2、颜色常见取值
属性名:
如:文字颜色:color
如:背景颜色:background-color
属性值:
颜色表示方式 | 表示含义 | 属性值 |
---|---|---|
关键词 | 预定义的颜色名 | red、green、blur、yellow… |
rgb表示法 | 红绿蓝三原色。每项取值范围:0~155 | rgb(0,0,0)、 rgb(255,255,255)… |
rgba表示法 | 红绿蓝三原色+a表示透明度,取值范围是0~1 | rgba (255,255,255,0.5)、rgba (255,0,0,0.3)… |
十六进制法 | #开头,将数字转换成十六进制表示 | #000000、#ffffff,简写:#000、#f00 |
取值类型
1、关键词
常见颜色取值:
• red:红色
• green:绿色
• blur:蓝色
• yellow:黄色
• orange:橘色
• skyblue:天蓝色
• pink:粉色
• …
2、rgb表示法
每项取值范围:0~255
常见颜色取值:
• rgb ( 255 , 0 , 0 ) :红色
• rgb (0,255,0):绿色
• rgb ( 0 , 0 , 255 ) :蓝色
• rgb ( 0 , 0 , 0 ) :黑色
• rgb ( 255 , 255 , 255 ) :白色
• …
3、rgba表示法
其实,比rgb表示法多个一个a,a表示透明度
a的取值范围:0~1
• 1:完全不透明
• 0:完全透明
省略写法:
• rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
4、十六进制表示法
取值范围:
• 两个数字为一组,每个数字的取值范围:0~9 , a , b , c , d , e , f
省略写法:
• 如果三组中,每组数字都相同,此时可以每组可以省略只写一个数字
• 正确写法:#ffaabb 改写成 #fab
常见取值:
• #fff :白色
• #000 :黑色
注意点
- 类似于:#ffaabc 不能改写成 #fabc
- 实际开发中会直接使用测量工具直接得到颜色,不需要前端自己设计颜色,直接复制粘贴即可。
3、标签水平居中方法
如果需要让div、p、h(大盒子)水平居中?
• 可以通过margin : 0 auto ; 实现
注意点:
- 如果需要让 div、p、h(大盒子) 水平居中,直接给 当前元素本身 设置即可
- margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
本次的分享就到这里了!!!感谢大家支持,大家的支持是我努力的动力💪💪💪