文本样式

字形属性

常用属性：

属性 属性名称 设置值
color 字体颜色 颜色名称(英文)、十六进制、RGB码
font-family 字体样式 字形名称(楷体，宋体)
font-size 字体大小(字号) 数值+百分比(%)、数值+单位(pt,px,em,ex···)
font-style 字体斜体 normal(普通)、italic(斜体)、oblique(斜体)
font-weight 字体粗体 normal(普通)、bold(粗体)、bolder(超粗体)、lighter(细体)

1.color字体颜色

  • 格式：color:颜色名称
<style>
    h1{color: red;}
</style>

2.font-family字体样式

  • 格式：font-family:字体名称1，字体名称2······
  • 可同时列出多种字体，中间以逗号（,）分开，浏览器会按照顺序查找系统中符合的字体，找不到第一种再找第二种，依次查找，如果都没有，会使用系统默认的字体，字体名称最好用双引号（“”）括起来
<style>
    h1{font-family: "楷体","宋体";}
</style>

3.font-size字号

  • 格式：font-size:字号+单位(或%)
  • 常见的单位是cm、mm、pt、em和%，默认16px
<style>
    h1{font-size: 10px;}
</style>
font-size单位列表
单位 说明 范例
cm 以厘米为单位 font-size:1cm
mm 以毫米为单位 font-size:10mm
px 以屏幕的像素(pixel)为单位 font-size:10px
pt 以点数(point)为单位 font-size:12pt
em 以当前字号为单位，若当前字号为10pt，则1em=10pt font-size:2em
% 当前字号的百分比 font-size:80%
小知识
   pt是印刷使用的字号单位，不管屏幕分辨率是多少，打印到纸上看起来都是相同的，1pt的长度是0.01384英寸，相当于1/72英寸，我们常用的Word软件设置的字号就是以pt为单位；而px是屏幕使用的字号单位，px能够精确地表示组件在屏幕中的位置与大小，不管屏幕分辨率怎么调整，网页版面都不会变化太大，但是打印到纸面上时，就可能有差异，然而网页的目的是为了屏幕浏览，因此CSS大多会选择以px为单位。

4.font-style文字斜体

  • 格式：font-style:italic
  • font-style设置值有3种，分别是normal(普通)、italic(斜体)、oblique(斜体)，italic与oblique效果相同
  • 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本，用于没有斜体变量的特殊字体。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
<style>
    h1{font-style: italic;}
</style>

font-variant小型大写字母

normal：正常字体，默认值

small-caps：小型的大写字母

<style>
    p{font-variant: small-caps;}
</style>

6.font-weight文字粗体

  • 格式：font-weight:bold
  • font-weight设置值可以输入100~900之间的数值，数值越大，字体越粗，也可以输入上述常用的四种属性，normal数值为400，bold数值为700
<style>
    p{font-weight: bold;}
</style>

段落属性

常用属性：

属性 属性名称 设置值
text-align 文本水平对齐 left，center，right，justify
text-indent 首行缩进 数值+百分比(%)、数值+单位
letter-spacing 字符间距 normal、数值+单位(pt、px、em···)
line-height 行高 数值+单位
word-wrap 是否换行 break-word

1.text-align设置文字水平对齐方式

  • 格式：text-align:属性值
  • text-align对齐方式justify(两端对齐)是指让文字在左右边界范围内平均对齐
<style>
    p{text-align: center;}
</style>

2.text-indent设置首行缩进距离

  • 格式：text-indent:属性值
  • text-indent用来设置每一段文字首行前方要留多少空间
<style>
    p{text-indent: 2em;}
</style>

3.letter-spacing设置字符间距

  • 格式：letter-spacing:属性值
  • letter-spacing用来设置字符与字符的间距，输入负值，字符间距就会变得紧密；另外，word-spacing是用来是指英文单词的间距。
<style>
    p{letter-spacing: 5px;}
    p{word-spacing: 5px;}
</style>

4.word-spacing设置单词间距

  • 属性同字符间距
<style>
    p{word-spacing: 5px;}
</style>

5.line-height设置行高

  • 格式：line-height:属性值
  • line-height用来设置行高，如果省略会用浏览器默认的单位
<style>
    p{line-height: 5px;}
</style>

6word-wrap设置是否换行

  • 格式：word-wrap:break-word

  • 指定如果足够长得话，应该换行

    break-word：内容将在边界内换行，如果需要，单词内部允许断行

    normal：允许内容顶开或溢出指定的容器边界

<style>
    p{word-wrap:break-word;}
	p{word-wrap:normal;}
</style>

文字效果属性

属性 属性名称 设置值
vertical-align 垂直对齐 baseline(一般位置)
super(上标)
sub(下标)
top(顶端对齐)
middle(垂直居中)
bottom(底端对齐)
text-decoration 文字装饰样式 none(无)、
underline(下划线)
line-through(删除线)
overline(上划线)
text-transform 转换字母大小写 none(无)
lowercase(全部小写)
uppercase(全部大写)
capitalize(首字母大写，其余不变)
text-shadow 增加阴影效果

1.vertical-align设置组件垂直对齐方式

  • 格式如：vertical-align:属性值
<style>
    p{vertical-align:middle;}
</style>

2.text-decoration增加装饰样式

  • 格式：text-decoration:属性值
<style>
    p{text-decoration:underline;}
</style>

3.text-transform设置大小写转换方式

  • 格式：text-transform:属性值
<style>
    p{text-transform:capitalize;}
</style>

4.text-shadow设置阴影样式

  • 格式：text-shadow:属性值
  • 第一个属性值是水平方向阴影大小，第二个属性值是垂直方向阴影大小，第三个属性值是阴影的模糊程度，第一个属性是阴影颜色
  • 同一个text-shadow可以设置多种阴影，设置多种阴影在后面加逗号就可以
<style>
    /*设置一种阴影*/
    p{text-shadow:1px 1px 1px red;}
    /*设置多种阴影*/
    p{text-shadow:1px 1px 1px red,2px 2px 2px blue;}
</style>

列表属性

列表项目符号list-style-type

  • 语法：list-style-type:disc;
    • disc 实心圆 circle 空心圆 square 实心方块 decimal 阿拉伯数字 lower-roman 小写罗马数字
    • upper-roman 大写罗马数字 lower-alpha 小写英文字母 upper-alpha 大写英文字母 none 无符号
    • armenian 传统的亚美尼亚数字 cjk-ideographic 浅白的表意数字 georgian 传统的乔治数字
    • lower-greek 基本的希腊小写字母 hebrew 传统的希伯莱数字 hiragana-iroha 日文平假名序号
    • hiragana 日文平假名字符 katakana-iroha 日文片假名序号 katakana 日文片假名字符
    • lower-latin 小写拉丁字母 upper-latin 大写拉丁字母
示例：
<style>
    ul{list-style-type:disc;}
</style>

图像列表项目符号list-style-image

  • 语法：llist-style-inage:URL("");

    none：不指定图像

    url：指定列表项图像

<style>
    ul{list-style-image:URL("路飞.png");}
</style>

列表项目符号位置

  • 语法：llist-style-position: outside;

    ​ outside：默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐

    ​ inside：列表项目符号放置在文本以内，且环绕文本和项目符号对齐

示例:
<style>
    ul{list-style-position:inside;}
</style>