03_CSS - 常见属性

coderwjl
193 阅读8分钟

CSS属性-文本

text-decoration (常用)

text-decoration用于设置文字的装饰线

decoration是装饰/装饰品的意思;

可选值说明
none无装饰线
underline下划线
line-through中划线(删除线)
overline上划线

a元素有下划线的本质是被添加了text-decoration属性

text-transform (一般)

text-transform用于设置文字的大小写转换

Transform单词是使变形/变换(形变);

可选值说明
capitalize(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写（注意是每个单词的首字母都转换为大写）
uppercase(大写字母)将每个单词的所有字符变为大写
lowercase(小写字母)将每个单词的所有字符变为小写
none没有任何影响 （默认值）

实际开发中用JavaScript代码转化的更多.

text-indent (一般)

text-indent用于设置第一行内容的缩进

单位可以是px也可以是em，一般设置为em

text-indent只会针对非行内元素生效

当text-indent的值为正数的时候，首行文本右移，当值为负数的时候，首行文本左移

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 40px;

      /* em: 相对于字体的大小 */
      text-indent: 2em;
    }
  </style>
</head>
<body>
  
  <h2>标题</h2>
  <p>
    如果说1号公路环岛之旅是行走冰岛的经典路线，与动物为伴的生态游则是深入了解冰岛的“最佳打卡方式”。在人类踏足冰岛前，这片火山地区几乎没有陆地动物存在，唯一的例外就是北极狐。这种小型哺乳动物周身包裹着厚厚的皮毛，可以在最后一个冰河时期结束前穿越冰封的海洋，抵达冰岛安家，成为这里唯一的原生陆地哺乳动物。直到后来有人类踏上冰岛，兔子、羊、马、鹿等哺乳动物才走进了冰岛的生态系统。比如冰岛马，它们在1000多年前从挪威跟随冰岛第一批定居者来到冰岛并繁衍生存下来。成年冰岛马体型矮小，会被人误会为小马驹，但实际上冰岛马步伐稳健，善于行走在崎岖地带，哪怕是初学者也可驾驭，骑着冰岛马旅游已成为当地颇受欢迎的旅游项目。
  </p>

</body>
</html>

text-align (重要)

text-align: 用于设置行内级元素和行内块级元素在其块级父容器中的对齐方式

值说明
left左对齐 --- 默认值
right右对齐
center居中对齐
justify两端对齐

letter-spacing / word-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距

默认是0，可以设置为负数

cursor

cursor可以设置鼠标指针(光标)在元素上面时的显示样式

属性值
auto浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式 默认值
default由操作系统决定，一般就是一个小箭头
pointer一只小手，鼠标指针挪动到链接上面默认就是这个样式
text一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
none没有任何指针显示在元素上面

CSS属性-字体

font-size(重要)

font-size决定文字的大小

常用的设置:

  1. 具体数值+单位

    • px
    • 浏览器默认字体大小是16px，最小是12px
  • em
  • 1em的值为当前字体大小，如果当前没有设置字体大小的时候，那么就是其从父容器那边继承过来的字体大小

  1. 百分比

    基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family (重要, 不过一般仅设置一次)

font-family用于设置文字的字体名称

  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体
  • 或者是通过 @font-face 指定的可以直接下载的字体

windows默认的字体是微软雅黑

mac和ios默认字体是 平方-简

android 默认字体是 思源黑体

但是绝大多数的android字体有自己的默认字体，如小米的默认字体就是小米兰亭

font-weight(重要)

font-weight用于设置文字的粗细(权重)

常见的取值:

  1. 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量

  2. normal:等于400

  3. bold:等于700

  4. 理论上font-weight可以取的值为1~1000中的任意一个值，可以是非整数（如124），也可以是小数(123.32)

    详见mdn , 但是当font-weight的值为非整数或为小数的时候，浏览器兼容性并不是很好，部分浏览器会将其转换为

    100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900中的某一个值后再进行解析，所以并不推荐进行设置

    strong、b、h1~h6等标签的font-weight默认就是bold

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* font-weight: bold; */
      font-weight: 700;
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>
  <div>我是div元素</div>

</body>
</html>

font-style(一般)

font-style用于设置文字的常规、斜体显示

值说明
normal常规显示 --- 默认值
italic(斜体)用字体的斜体显示 --- 在绝大多数字体库中有字体在加粗，倾斜时候的字体样式，当设置值为italic的时候，会自动去对应的字体库中应用对应字体所对应的斜体样式
oblique(倾斜)文本倾斜显示 --- 直接将字体倾斜一定的角度

em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-variant (了解)

variant是变形的意思;

font-variant可以影响小写字母的显示形式

值说明
normal常规显示 --- 默认值
small-caps将小写字母替换为缩小过的大写字母 --- 也就是将字母转换为大写但是字体大小依旧是小资字母所对应的字体大小

line-height

line-height用于设置文本的行高

为文本设置对应的行高可以避免文本和文本之间变得紧凑，有助于提升用户的阅读体验

行高可以简单理解为一行文字所占据的高度

Snipaste_2022-10-19_13-25-36.png

行高的严格定义是：两行文字基线（baseline）之间的间距 基线（baseline）：与小写字母x最底部对齐的线

Snipaste_2022-10-19_13-27-29.png

  1. 底线 距离 顶线的距离 被称之为行距

  2. 对于一行文本， 顶线距离文本最上边的距离 恒等于 底线距离文本最小边的距离 且两者之和恒等于 行距

    也就是一行文本的 上边距 恒等于 一行文本的 下边距

    因此 当line-height === height的时候，可以实现文本垂直居中对齐

当然这也是line-height实现文本垂直居中对齐的局限性

使用line-height只能实现单行文本元素的垂直居中对齐

  1. line-height ---- 元素中每一行文字所占据的高度

    height --- 元素的整体高度

  2. 在一个容器中，只有有了内容，才会存在line-height

    所以如果某一个容器，在没有任何内容的情况下，即使设置了行高，行高也不会生效

  3. 当line-height的值被设置为数值的时候，其表示的是当前font-size的倍数

font

font是一个缩写属性

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写 规则:

  1. font-style、font-variant、font-weight可以随意调换顺序，也可以省略

  2. line-height可以省略，如果不省略，必须跟在font-size后面, 且必须使用/进行分割

  3. font-size、font-family不可以调换顺序，不可以省略

    也就是如果使用font进行属性简写的时候，必须要有2个属性，也就是font-size和font-family

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 关于字体的属性 */
      font-size: 30px;
      font-weight: 700;
      font-variant: small-caps;
      font-style: italic;
      font-family: serif;
      line-height: 30px;

      /* 缩写属性 */
      /* 1.5的行高是相对于font-size的 */
      font: italic small-caps 700 30px/1.5 serif;
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

补充

溢出隐藏

单行文本溢出隐藏

.box {
  /* 给容器一个宽度, 这样文本才有可能溢出*/
  width: 300px;
  height: 300px;
  border: 1px solid red;
  /* 禁止文本换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 文本溢出使用省略号 */
  text-overflow: ellipsis;
}

多行文本溢出隐藏

.box {
  width: 300px;
  border: 1px solid red;

  /* 设置溢出隐藏 和 溢出的时候，显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;

  /*
	  将盒子的渲染方式设置为-webkit-box（弹性伸缩盒子）
  	ps: -webkit-box是flex布局的前身
  */
  display: -webkit-box;

  /* 设置需要显示多少行文本 */
  -webkit-line-clamp: 2;

  /* 容器的排列方式为 垂直排布 */
  -webkit-box-orient: vertical;
}

使用border绘制三角形

border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状

如果我们将border宽度设置成宽度的50%，并将盒子的类型设置为border-box的时候，

盒子的四条边就会变成三角形

此时如果我们将其中三边的边框设置为transparent

就可以使用border绘制出一个三角形

Snipaste_2022-10-19_21-49-11.png

所以利用border或者CSS的特性我们可以做出很多图形:  css-tricks.com/the-shapes-…

avatar
文章
阅读
粉丝