首页 > 其他分享 >CSS 颜色与字体

CSS 颜色与字体

时间:2024-03-23 21:33:37浏览次数:25  
标签:颜色 color rgb 字体 字体大小 font CSS 255

具体的可以去官方文档去查

rgb 或 rgba

color:rgb(255,255,255);
color:rgba(255,255,255,0.7);
rgba作用:具有透明效果,0完全透明,1不透明
三原色数值越大,且数值一致,表现为灰色很淡

HEX 或 HEXA 表示

p{color:rgb(#rrggbb);}
前两位 rr 表示红,gg 表示绿,bb 表示蓝,01-ff(16进制)

IE不支持 hexa ,其中透明度也是16进制表示

HSL 或 HSLA

p{color:rgb(色相,饱和度,亮度);}
p{color:rgb(0deg,100%,50%);}
ps: deg 表示度,色相值在0-360度,饱和度调节是颜色深浅,亮度是你关灯还是开灯

字体

字体族:font-family

div{font-family:"微软雅黑","黑体",sans-serif}

  • 使用英文名字兼容性会更好
  • 可以设置多个字体,通常在最后写上sans-serif(非衬线字体) 或 serif(衬线字体)
  • 如果字体名包括空格必须引号包裹
字体风格:font-style

存在以下数值:

  • normal:默认值
  • italic:斜体,主动寻找斜体字(推荐),如果没有强制倾斜
  • oblique:斜体,先找到用正常的,之后强制倾斜

字体粗细

div{font-weight:lighter/normal/bold/bolder/数值}
数值越大字体越粗,bolder 很多字体不支持

字体的复合属性

font:其他属性 字体大小 字体族
规则:字体大小与字体族必须写,其中字体大小在第二位字体族在最后一位,各个属性之间用逗号隔开

标签:颜色,color,rgb,字体,字体大小,font,CSS,255
From: https://www.cnblogs.com/BY1314/p/18088897

相关文章

  • CSS基础知识:css的尺寸是如何计算的,px和em的区别在哪里?
    讲解将以font-size为例font-size,元素内部文字的尺寸大小1.px:像素像素是什么意思呢?解释:在日常生活中不管是我们看到的电子图片,还是计算机的界面,实际上它是由很多很多的点组成的。那么如何理解呢?以咱们所用的电脑为例右键打开显示设置:                 ......
  • Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式,解决覆盖不生效
    前言如果需要Vue2版本,请访问这篇文章。本文实现了在vue3+element-plus网站开发中,完美覆盖el-select选择器样式,强力修改select下拉选择框placeholder样式,同时也支持修改文字、大小、边框、等,支持任意样式的覆盖修改!网上的教程几乎都不生效,使用本教程的方法......
  • 推荐六个常用的CSS动画库
    目录 一、Animate.css二、animista三、MagicCSS四、CSShake 五、Hover.css​六、Loaders.css  我的博客原文:推荐六个常用的CSS动画库 一、Animate.css官网地址:Animate.css|Across-browserlibraryofCSSanimations.​Animate.css是一个即用型跨浏览器动......
  • web CSS笔记
    CSS(CascadingStyleSheets)美化样式CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整......
  • vue3 + ts +element-plus + vue-router + scss + axios搭建项目
    本地环境:node版本:20.10.0目录一、搭建环境二、创建项目三、修改页面四、封装路由vue-router五、element-plus六、安装scss七、封装axios一、搭建环境1、安装vue脚手架npmi-g@vue/cli2、查看脚手架版本vue-V3、切换路径到需要创建项目的地方二、创建......
  • 363款古风书法字体下载(电脑可安装使用的)
    363款古风书法字体下载(电脑可安装使用的)字体安装方法:一,复制到系统目录C:\Windows\Fonts二,单独打开字体文件,点击左上角的安装按钮即可三,字体管家或者第三方字体管理软件注意:如果诸位要用于设计,请查明版权再商用,以免造成不必要的损失!在这个网站,可以自动检测电脑已安装的字......
  • 1000款艺术设计字体(可在安装在电脑)
    1000款艺术设计字体(可在安装在电脑)字体安装方法:一,复制到系统目录C:\Windows\Fonts二,单独打开字体文件,点击左上角的安装按钮即可三,字体管家或者第三方字体管理软件百度云盘分享:链接:https://pan.baidu.com/s/1q2X1D51D_r6THwVDc-Klkw?pwd=1i5f 提取码:1i5f 注意:如果诸位......
  • 一次性搞定!思源字体安装、使用及常见问题解答
    环境Windows11Pro23H2Microsoft365Word2402思源宋体:v2.002思源黑体:v2.0041.结论本人非专业字体工作者,个人建议,仅供参考;先说结论,链接以及详细说明见后文安装SC版本,无其余后缀HW,VF,CN等关于HW,思源宋体没有HW版本,个人实测,非HW版本,英文数字采用比例......
  • 新人学习笔记之(CSS背景和列表)
    一、CSS背景    1.background-color        1)background-color:颜色ltransparent(black)颜色值(颜色名|rgb|十六进制)背景区包括内容内边距,边框,不包括外边距.box1{background-color:red;}    2.background-image     ......
  • QToolTip字体大小导致显示不全
    QToolTip通过qss设置字体大小后,有时候显示不全,有时候可以显示全,原因不明。显示不全的时候,看着像是按照一个较小的字体大小显示显示不全的情况: 显示全的情况: qss如下QToolTip{border:0px;border-radius:4px;font-size:15ptcolor:rgb(255,255,255);backgroun......