CSS 文本基础属性

excavate
471 阅读4分钟

CSS-文本属性

使用 CSS 可以修改文本字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式。也可以决定为文本添加下划线和删除线， 可以将文本转化为全部使用大写字母，或全部小写字母。而且通过短短几行代码就可以让这些样式英语于整片文档或整个网站。

  1. 选择字体系列：设置字体的方法：font-family 属性。
body{

      font-family: Geneva;
  }

2. 指定替代的字体

body{
       font-family: Geneva,Tahoma,sans-serif;
   }

标准字体 serif、sans-serif、cursive、fantasy、monospace 等代表首先字体最为接近的风格。

  1. 创建斜体：font-style 属性: italic（创建倾斜体文本）、oblique（创建倾斜文本）、normal(取消斜体）。
body{

    font-style: italic;
    font-style: oblique;
  }

4. 应用粗体格式：font-weight 属性:bold 或者 100~900 之间的 100 的倍数。400 代表正常粗体，700 代表粗体。bloder（更粗）、lighter（更细）、normal(取消斜体）。

    body{
    font-weight: bold;
   }

5. 设置字体大小有两种方式：font-size 属性:直接使用像素指定要使用的特定字号，或使用百分数、em 或者 rem。

   p{
   font-size: 35px;
   font-size:100%；//相当于16px
   font-size:2.1875em;
   }

多数元素是 16px，默认情况下 h1~h6 稍大。通常情况下 1em 等于 16px，可以通过一点点除法确定 em 值（或百分比）要指定的字体大小/父元素的字体大小=值。35/16=2.1875

  1. 设置行高：行高指的是段落的行距，即段落内每行之间的距离。line-height属性：n；n 是一个数字，它与元素的字体大小相乘，得出需要的行高。或者输入以em、像素为单位的值。

  2. 同时设置所有字体的值：font 属性

    body{
    font:100% Geneva;
 }

  3. 设置文本颜色：color 属性

    body{
  color:blue;
  color:#7d717c;
  color:rgb(r,g,b);
  color:rgb(r%,g%,b%);
  color:hsl(h,s,l);
}

  4. 设置背景：可以为单个元素设置背景，也可以为整个页面设置背景。

9.1 修改文本背景的颜色： background-color属性:

  body{
   background-color: #88b2d2;
}

9.2 使用背景图像作为背景：background-image属性:

body{
  background-image: url(xxx.png);
}

9.3 重复背景图像：background-repeat属性: direction，direction 可以取四个值：repeat、repeat-x、repeat-y，no-repeat。

分别代表同时横向和纵向重复图像，只横向重复图像，只纵向重复图像，不重复图像。默认为repeat。

body{
 background-repeat: direction;
}

9.4 控制背景图像是否随页面滚动： background-attachment属性:fixed 背景图像会附着在浏览器窗口上；或 scroll 访问者滚动时背景图像也会移动。

 body{
background-attachment: fixed;
 }

9.5 指定元素背景图像的位置： background-position-x y_属性:，其中 x 和 y 可以表示未距离左上角的绝对距离或百分数。也可以使用left（左对齐）、center（居中对齐）、right（右对齐）表示x，用 top（顶端）或 center（居中）或 bottom（底端对齐）表示 y。

body{
background-position-x y_: ;
 }

9.6 设置所有背景：background 属性。

  1. 控制间距可以增加或减少单词之间或字母之间的距离，前者称为字间距，后者称为字偶距。

指定字间距；word-spacing:lenght;

指定字偶距：letter-spacing:lenght; lenght如0.4em或5px；

  1. 添加缩进：text-indent属性可以指定段落第一行前面应该空出多大的空间。

    body{
text-indent: 1.5em;
text-indent: 18px;
}

12.对齐文本：text-align属性可以让文本左对齐、右对齐、居中对齐、或两端对齐。

 body{
text-align: left;
ext-align: right;
text-align: center;
text-align: justify;
}

13.修改文本的大小写：text-transform 属性可以为样式定义文本的大小写，可将文本显示为首字母大写、全部大写。全部小写。

 body{
 text-transform: capitalize;/* 每个单词首字母大写 */
 text-transform: uppercase;/* 所有字母大写 */
 text-transform: lowercase;/* 所有字母小写 */
 text-transform: none;/* 默认样式 */
 }

14.使用小型大写字母：font-variant 属性：许多字体都有对应的小写大写字母变体，其中一些字母是大写的，但缩小到了小写字母的大小。

 body{
    font-variant: small-caps;
}

15.装饰文本：text-decoration属性装饰文本，如添加下划线或者其他类型的线条。

 body{
   text-decoration: underline;/* 添加下划线 */
    text-decoration: overline;/* 添加上划线 */
    text-decoration: line-through;/* 添加删除线 */
}

16.设置空白属性：默认情况下 HTML 文字里有多个空格和回车会显示为一个空格或者被忽略。要让浏览器显示这些额外的空格，可以使用white-space属性：

    body{
    white-space: pre;/* 显示原文本中所有空格和回车 */
    white-space: nowrap;/* 确保所有空格不断行也就是文本全部显示在一行 */
    white-space: normal;/*默认  */
}
avatar
文章
阅读
粉丝