前端开发学习笔记–CSS 文本样式

发布于 2018-04-17  226 次阅读


CSS 可以通过文本样式的设置,更改字体大小、样式及文本的方位。

一、通过 CSS 文本样式来修改字体的大小、样式以及形态。

例:

1:font-style 设置形态,有三个值,①normal 表示让倾斜状态恢复到正常状态。②italic 表示使用斜体。③oblique 表示让文字倾斜。区别在没有斜体时使用。

p {
   font-style:oblique;
}
//设置字体是否倾斜。

2:font-weight 可设置粗体,常见五个值,①normal 表示让加粗的字体恢复正常;②bold 粗体;③bolder 更粗的字体;④lighter 轻细的字体;⑤100 ~ 900 之间的数字,600 及之后是加粗,之前不加粗

p {
   font-weight: bolder;
}
//设置字体是否加粗。

3:font-size 可设置字体大小,常见值如下 x-small、small、medium、large、xx-large、数字+px 等

也可以设置相对父元素的字体大小的状态

body {
      font-size: 50px;
}
//先设置父元素字体大小

div {
     font-size: 50%;
}
//再设置相对父元素字体小 50%的字体

4:font-family 设置字体样式,即使用指定字体名称

p {
   font-family: 楷体,微软雅黑,宋体;
}
//设置系统字体,可多选几个自适应备用

5:font-variant 设置字体是否以小型大写字母显示,有两个值:①normal 表示如果以小型大写状态,让它恢复小写状态;②small-caps 让小写字母以小型大写字母显示。

body {
      font-variant: small-caps;
}
//让父元素设置小型大写

div {
    font-size: 20px;
    font-variant: normal;
}
//让子元素设置恢复小写

字体设置简写组合方式:是否倾斜、是否加粗、是否转小型大写、字体大小,字体名称;

二、CSS 文本样式中可以对文本进行访问、形态进行控制的样式。

例:

1:white-space 处理空白排版方式,值如下:normal 默认值,空白符被压缩,文本自动换行;nowrap 空白符被压缩,文本不换行;pre 空白符被保留,遇到换行符则换行;

p {
   white-space: pre-line;
}
//空白符被压缩,文本会在排满或遇换行符换行

2:word-spacing 设置英文单词之间的间距,值可以是’数字+px‘

p {
   word-spacing: 5px;
}
//设置英文单词之间的间距为 5px

3:letter-spacing 设置文本之间的间距,值可以是’数字+px‘

p {
   letter-spacing: 5px;
}
//设置文本之间的间距为 5px

4:text-align 设置文本的对齐方式,center(居中对齐)、right(靠右对齐)、left(靠左对齐,默认)、start(让文本处于开始的边界)、end(让文本处于结束的边界)、justify(内容两端对齐)

p {
   text-align: justify;
}
//设置文本两端对齐

5:line-height 设置段落行高,值可以是’数字+px‘,也可以设置百分比,数值等

p {
   line-height: 50px;
}
//设置段落行高 50px

6:text-indent 设置文本首行的缩进,值可以是’数字+px‘

p {
   text-indent: 50px;
}
//设置文本首行缩进 50px

7:word-wrap 设置过长英文单词断开,值可以是 break-word(断开单词)

p {
    word-wrap: break-word;
}
//将过长英文单词断开

三、文本样式类型

例:

1:text-shadow 添加文本阴影部分

p {
    text-shadow : 3px 4px 5px red;
}
//水平偏移 3px,垂直偏移 4px,阴影模糊度 5px,阴影颜色为红色

2:text-transform 设置英文文本转换为大小写。capitalize(英文单词首字母大写)、uppercase

p {
   text-transform: capitalize;
}
//设置英文单词首字母大写

3:text-decoration 设置文本出现下划线,none(让本身有划线装饰的文本取消)、underline(让文本的底部出现一条下划线)、line-through(让文本的中部出现一条删除划线)、overline(让文本的头部出现一条上划线)

a {
   text-decoration: none;
}
//设置取消超链接的下划线