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

前言

持续总结输出中,今天讲的是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、属性名或者属性值单词拼错

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlJ3uQqx-1656592318805)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02e1ddd0e52c4fdc8e57fcd9dc73630c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

2、颜色常见取值

属性名:

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

属性值:

颜色表示方式表示含义属性值
关键词预定义的颜色名red、green、blur、yellow…
rgb表示法红绿蓝三原色。每项取值范围:0~155rgb(0,0,0)、 rgb(255,255,255)…
rgba表示法红绿蓝三原色+a表示透明度,取值范围是0~1rgba (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 :黑色

注意点

  1. 类似于:#ffaabc 不能改写成 #fabc
  2. 实际开发中会直接使用测量工具直接得到颜色,不需要前端自己设计颜色,直接复制粘贴即可。

3、标签水平居中方法

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

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

注意点:

  1. 如果需要让 div、p、h(大盒子) 水平居中,直接给 当前元素本身 设置即可
  2. margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

本次的分享就到这里了!!!如果觉得还不错,请不要忘记点赞✌,收藏✌,加关注✌哦 ❤️ ❤️ ❤️

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

姑老爷呀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值