css 文本样式-CSDN博客

本文链接：https://blog.csdn.net/qq_37757277/article/details/144835506

css 文本样式

文本样式

字体尺寸

设置文本的大小。

p {
  font-size: 16px; /* 像素、em、rem等 */
}

字体

1. 系统字体

使用浏览器和操作系统默认可用的字体。

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

2. 离线字体

使用@font-face来引入本地字体文件。

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.woff2') format('woff2'),
       url('fonts/CustomFont.woff') format('woff');
}

.custom-text {
  font-family: 'CustomFont', sans-serif;
}

字体重量

控制字体的粗细。

h1 {
  font-weight: 700; /* 或者用'normal', 'bold'等 */
}

字体样式

应用斜体或其他风格。

em {
  font-style: italic; /* Italic字体样式 */
}

水平对齐方式

设置文本在容器中的水平对齐。

.text-center {
  text-align: center; /* 文本左对齐、右对齐、居中 */
}

文本行高

控制文本的行距以改善可读性。

p {
  line-height: 1.5; /* 调整行高，可使用倍数或单位 */
}

文本线型

设置文本装饰线，如下划线。

a {
  text-decoration: underline; /* 为链接增加下划线：none, line-through */
}

阴影

1. 文本阴影

为文本添加阴影效果。

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 横向偏移，纵向偏移，模糊距离，颜色 */
}

2. 盒子阴影

添加到元素边框外的阴影。

.card {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* 可选：内阴影使用'inset' */
}

溢出

1. 内容溢出

定义盒子内容溢出该盒子容器时的处理方式。

.overflow-container {
  overflow: auto; /* 自动添加滚动条：visible, hidden, scroll */
}

2. 文本溢出

处理固定宽度容器文本过长情况。

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 使用省略号替代溢出文本 */
}

3. 分词策略

控制文本如何在行中分布。

.word-break {
  word-break: break-all; /* 允许强制断行：normal, break-word */
}

.word-wrap {
  overflow-wrap: break-word; /* 允许长单词在适当位置换行,按单词断行 */
}

这些CSS属性和技术可以帮助你更精细地控制网页中的文本呈现和布局，提升用户体验和视觉美观。根据具体需求和设计要求选择适合的文本样式。

以下是关于用户界面设计相关的CSS属性和技巧的详细介绍：

用户界面

圆角【熟练】

Description: 为元素的角添加圆角效果。

Property: border-radius

.rounded-box {
  border-radius: 10px; /* 全部边角均使用10px的圆角 */
}

.circle {
  border-radius: 50%; /* 圆形效果，通常用于方块 */
}

调整尺寸【知道】

Description: 设置元素的宽高，通常与响应式设计相关。

Properties: width, height, max-width, max-height, min-width, min-height

.responsive-image {
  width: 100%;
  max-width: 600px; /* 最大宽度 */
  height: auto; /* 高度按比例自动调整 */
}

浮动

1. 开启浮动

Description: 使用浮动来布局元素，使其左右浮动。

Property: float

.float-left {
  float: left; /* 元素左浮动 */
}

.float-right {
  float: right; /* 元素右浮动 */
}

2. 关闭浮动

Description: 清除浮动，以确保后续元素不受浮动影响。

Property: clear

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* 清除左右浮动 */
}

界面呈现

Description: 控制对象的显示属性。

Property: display

.hidden {
  display: none; /* 隐藏元素 */
}

.flex-container {
  display: flex; /* 将容器设置为flex布局 */
}

.block {
  display: block; /* 将元素设为块级元素 */
}

多列

Description: 创建多列布局来增强文本和内容的展示。

Properties: column-count, column-gap, column-rule

.multi-column {
  column-count: 3; /* 三列布局 */
  column-gap: 20px; /* 列之间的间距 */
  column-rule: 1px solid #ccc; /* 列之间的分隔线 */
}

指针

Description: 改变鼠标指针的样式，以指示可点击区域或其他状态。

Property: cursor

.clickable {
  cursor: pointer; /* 鼠标悬停时显示为点击手势 */
}

.loading {
  cursor: wait; /* 等待指针，通常表示加载状态 */
}

.move {
  cursor: move; /* 移动指针，通常用于可拖动元素 */
}