欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML和CSS前端教程03-CSS文本样式

程序员文章站 2023-02-20 23:19:47
[TOC] 1.CSS颜色 建议就用十六进制 2.CSS长度的度量单位 建议就用px 3.CSS文本样式 字体的大小,样式以及方位 3.1. 字体属性 | 属性名 | 说明 | 例子 | | | | | | | 字体大小 | | | | 英文字体是否转为小型字母 | `font variant: n ......

目录

1.css颜色-建议就用十六进制

p{
  color: #ff0000
}

2.css长度的度量单位-建议就用px

p{
  margin: 0;
  padding: 0;
  font-size: 20px;
  height: 50px;
}

3.css文本样式

字体的大小,样式以及方位

3.1. 字体属性

属性名 说明 例子
font-size 字体大小 font-size: 50px
font-variant 英文字体是否转为小型字母 font-variant: small-caps
font-variant: normal
font-style 字体倾斜 font-style: italic
font-style: normal
font-weight 字体加粗 font-weight: bold
font-family font字体 font-family: 微软雅黑
font 字体样式复合写法 font: italic bold small-caps 50px 楷体
@font-face 设置web字体

3.1. 文本样式

属性名 说明 参数
text-decoration z装饰文本出现各种划线 underline:底部线条
overline:头部线
line-through:中间删除线
text-transform 大写换成小写 uppercase:转成大写
lowercase:转成小写
capitalize:首字母大写
text-shadow 添加阴影 5px(水平偏移),5px(垂直偏移),3px(模糊度),black(颜色)
text-align 设置对齐方式 center:居中
left
right
justify:两端对齐
white-space 排版中的空白处理方式 normal: 空白符压缩,文本自动换行
nowrap:空白符压缩,文本不换行
pre:空白符保留,遇到换行符换行
pre-line:空白符压缩,文本排满时换行
letter-spacing 设置字母之间的间距 letter-spacing: 4px
word-spacing 设置单词之间的间距 letter-spacing: 4px
line-height 设置行高 line-height: 200%
word-wrap 控制段词,让国产的单词断开 word-wrap:break-word
text-indent 设置文本首行缩进