[ 初学CSS | 青训营笔记]

80 阅读1分钟

CSS:Cacading Style Sheets

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
CSS:用于定义页面大小样式

微信图片_20230127202240.png

一、选择器

微信图片_202301272022401.png (选择器 select)h1{
(选择器 Property)color:white(属性值Value);
front-size:14px;
}
选择器的三种写入代码的方式:

  1. 外链,在样式外边
  2. 嵌入,在样式里边
  3. 内联,直接把选择器写<>里(不太推荐)
  • 通配选择器,等于选择所有
  • ID选择器:ID设置属性的时候要唯一
  • 类选择器:
  • 属性选择器:
  • 方括号,选择唯一的值
  • ^= 选中开头等于什么的值
  • $= 选中结尾等于什么的属性值 如:.jpg .doc .xls
    伪类:“伪类是基于特征(characteristics)对元素进行分类,而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。”
  • 状态伪类:处于某种状态才能选中,如 链接
  • 结构性伪类:根据位置决定是否选中
  • link用在为访问的连接上
  • visited用在已经访问过的连接上
  • hover用于鼠标光标置于其上的连接
  • active用于获得焦点(比如,被点击)的连接上

blog.csdn.net/tanga842428…

选择器组,不同的组合表示不同意思,组合分类如下:
微信图片_202301272022406.png

二、颜色

RGB 三原色,坐标rgb(a,b,c) a、b、c 表示红色绿色蓝色的数量
HSL(hue saturation lightness)
hsl(a,b,c)a=颜色 b=饱和度 c=亮度
alpha 透明度 alpha等于1时完全不透明
rgb(a,b,c,d),hsl=(a,b,c,d)

三、字体font-family

微信图片_202301272022407.png

微信图片_202301272022408.png

  • 字体族:衬线体、无衬线体、手写体、等宽字体等
  • 字体大小(font-size)
  • 关键字:small、medium、large
  • 长度:px、em
  • 百分数:相对于父元素字体大小
  • 字重,也就是字的深浅(font-weight)
  • 行高(line-height) 有默认值
  • 分散对齐,两端对齐
  • (white-space)空白格
  • 调试CSS:打开网页后右键点击“检查”check

标题:走进前端技术栈 - CSS - 掘金

网址:juejin.cn/course/byte…