前端-CSS文本字体与背景样式

CSS文本字体与背景样式

1. 字体样式

• **字体大小：**font-size: px / % / em / rem;

  • 设置的是字体的高度

  • 单位：

    • px 像素 相对于显示屏分辨率而言的，浏览器默认的字体大小都是16px

    • em，根据的是父元素的字体大小计算的

    • 百分比：根据的是父元素的字体大小计算的

    • rem：根据的是根元素的字体大小计算的

    • <style>
          html {
                  
                  
              font-size: 18px;
          }
          div {
                  
                  
              font-size: 20px;
          }
      
          p {
                  
                  
              /*font-size: 2em;*/
              /*font-size: 300%;*/
              font-size: 2rem;
          }
      </style>
      
      
      <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consectetur cupiditate dolore laboriosam non odit quae totam veniam. Alias blanditiis earum est eveniet, iste quia sapiente sequi! Culpa, nostrum nulla.</p>
      </div>
      

• **字体颜色：**color:英文单词 / 十六进制 / rgb ;

  • 设置的是字体的颜色
  • 默认情况下文字渲染的是黑色，链接除外（链接默认是蓝色）
  • 颜色的英文单词：
    • red
    • green
    • blue
    • yellow
    • pink
    • skyblue
  • rgb函数表示法：
    • r red
    • g green
    • b blue
    • 三原色
  • 十六进制值 #rrggbb #rbg

• **字体类型：**font-family: 字体名称 ;

  • 用来设置字体的：宋体 微软雅黑

• **字体粗细：**font-weight: 值; 值可以为：

  | 值 | 说明 |
  | :-----: | :----------------: |
  | bold | 定义粗的字体 |
  | bolder | 定义更粗的字体 |
  | lighter | 定义更细的字体 |
  | normal | 定义正常的字体大小 |

  扫描二维码关注公众号，回复： 15390354 查看本文章

100-900的整百数数值

400正常 700加粗

• **字体斜体：**font-style: 值; 值可以为：

  值	说明
  normal	正常
  italic	斜体，换成一种斜体字体

• 行高： line-height: px%\倍数；

  • 控制的是没一行文字的高度，文字会在这个行高内垂直居中显示
  • 当我们给文本设置字体大小的时候 会按照字体大小的1.32这个比例给文字设置行高
  • 行高 = 文字的大小 + 上下的行间距 两个文字之间的上下间距

2. 文本样式

• 文本缩进： text-indent

• 文本水平对齐方式： text-align

  值	说明
  left	居左对齐
  center	居中对齐
  right	局右对齐
  justify	两端对齐

• **文本修饰：**text-decoration

  值	说明
  none	没有文本线
  underline	下划线
  line-through	中划线
  overline	上划线

• 下划线样式：text-decoration: wavy 波浪线

• **下划线颜色：**text-decoration: red 红色

• **单词间距：**word-spacing单词间距

• 字间距： letter-spacing每一个字符之间的间隙

• 溢出显示方式： text-overflow

  • 当盒子规定了超出隐藏后：

    clip 默认，裁剪文本

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

3. 背景样式

• background-color：设置元素的背景颜色；
  • 取值：颜色的英文名 rgb 十六进制
  • 背景颜色不会影响我们盒子的大小 在开发阶段我们可以使用背景颜色去看清盒子的位置和大小
• background-image：设置元素的背景图像；
  • 背景图片仅仅是给盒子起到一个装饰的效果 类似于背景颜色 是不能撑开盒子的
  • 如果元素的尺寸是大于图片的 图片默认是水平和垂直方向平铺的
  • 如果元素的尺寸是小于图片的 图片默认是从做上角开始显示 超出的部分不可见
• background-repeat：控制背景图像是否重复；
  • repeat 水平和垂直方向都平铺
  • no-repeat
  • repeat-x 沿水平方向平铺
  • repeat-x 沿垂直方向平铺
• background-position：控制背景图像在元素中的位置；
  • background-position: 水平方向的设置 垂直方向的设置
  • 水平: left center right
  • 垂直：top center bottom
  • 数字