Web前端，Chrome调试工具的基础操作，使用Chrome调试工具修改调试样式，颜色的常见取值，标签水平居中方法

前言

持续总结输出中，今天讲的是Web前端，Chrome调试工具的基础操作，使用Chrome调试工具修改调试样式，颜色的常见取值，标签水平居中方法

1、Chrome调试工具

1. 打开方式

• 1、右击→检查
• 2、看哪里
elements：显示当前页面的html结构
styles：显示当前标签的样式

2. 选择元素

• 两种常见方法
方法一：在左侧elements中点击需要调试的元素
方法二：点击左上角按钮后，直接在网页中点击需要调试的元素

3. 控制样式

• 1、修改属性值
直接点击属性值，直接修改

• 2、添加属性
在上一个属性的分号后点击一下，直接添加

• 3、控制样式生效
点击属性前的小框即可

4. 特殊情况

• 1、出现删除线
表示样式失效

• 2、出现小三角形
表示样式报错

总结

2、颜色常见取值

属性名:

如:文字颜色:color
如:背景颜色:background-color

属性值:

取值类型

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 :黑色

注意点

3、标签水平居中方法

如果需要让div、p、h(大盒子)水平居中?

• 可以通过margin : 0 auto ; 实现

注意点:

本次的分享就到这里了！！！感谢大家支持，大家的支持是我努力的动力💪💪💪