Rumah > hujung hadapan web > tutorial css > css文本设置主要有哪几项属性

css文本设置主要有哪几项属性

青灯夜游
Lepaskan: 2023-01-03 09:31:04
asal
6254 orang telah melayarinya

css文本设置主要的属性有:font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。

css文本设置主要有哪几项属性

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css文本各种属性集合

1、字体属性

  • font-family:‘微软雅黑’  指定字体Css属性设置样式

  • font-size:设置字体大小。

  • font-weight:设置文本的粗细

  • font-style:设置字体倾斜,可能的属性有normal、italic、oblique;

  • line-height:设置字体的行间距;

  • color 字体颜色

 2、文本属性

  • text-align:控制文本的对齐方式

  • text-indent :控制文本首行的缩进,px或%都可;

  • white-space:文档中的空白处

    属性值:

    • noraml: 默认忽略多个空格,只输出一个空格 .

    • nowrap: 强制不换行

    • pre:空格/缩进/换行 会给保留

    • pre-line:合并空表(多个空格只会输出一个空格)

    • pre-warp:保留空白/缩进,正常换行 ;

  • letter-spacing:控制字母之间的距离;

  • text-overflow:当文本溢出包含元素时发生的事情;

    • 属性值:

    • clip  修剪文本。

    • ellipsis  显示省略符号来代表被修剪的文本。

    • string  使用给定的字符串来代表被修剪的文本。

  • word-spacing :控制单词间空格的距离,以空格来区分单词,中英都OK;

3、下划线属性

text-decoration :控制文本是否有下划线,可能值有

  • none  没有下划线

  • overline  定义文本上的一条线。

  • line-through  定义穿过文本下的一条线。

  • underline  定义文本下的一条线。

4、转换大小写

text-transform:

属性值:

  • none(默认) 无转换;

  • capitalize:每个单词第一个字母为大写;

  • upercase :转换成大写;

  • lowercase:转换成小写;

【推荐教程:CSS视频教程

5、边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

6、盒子阴影

box-shadow:盒子阴影;

可以有五个值  (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color, inset/outset内外阴影 ) 

eg:

box-shadow: 10px 5px 10px red inset;
Salin selepas log masuk

7、文本超出换行

  • Word-warp:允许长单词转换到下一行

  • Word-break:允许在单词内转行(自动换行)

8、文字摆放形式

direction: 文字摆放方向

属性值:

  • ltl:从左往右

  • rtl:从右往左

9、文本超出换行

  • Word-warp:允许长单词转换到下一行

  • Word-break:允许在单词内转行(自动换行)

10、文字阴影

  • text-shadow:参考盒子阴影

11、文本单行超出显示省略号

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
Salin selepas log masuk

12、多行文本超出用省略号代替限制行数

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}
Salin selepas log masuk

更多编程相关知识,请访问:编程视频!!

Atas ialah kandungan terperinci css文本设置主要有哪几项属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan