CSS学习(一)

135 阅读2分钟

字体样式

字体样式是指对文本外观进行定制的属性,它决定了文本的呈现方式,包括字体的类型、大小、风格和粗细等。通过CSS(层叠样式表),可以使用不同的字体样式来改变页面内容的视觉效果,以提高可读性、层次感和美观度。

字体样式的概念及使用

  1. font-family:设置字体类型
    举例:font-family: "楷书";

  2. font-size:设置字体大小(单位:px、em、rem、cm、mm、pt、pc)
    举例:font-size: 12px;

  3. font-style:设置字体风格

    • normal:默认标准
    • italic:倾斜
    • oblique:倾斜
      举例:font-style: italic;
  4. font-weight:设置字体的粗细

    • normal:默认值,定义标准字体
    • bold:粗体字体
    • bolder:更粗的字体
    • lighter:更细的字体
    • 100, 200, ..., 900(步长100):定义由细到粗的字体,400 等同于 normal700 等同于 bold
      举例:font-weight: bold;
  5. font:在一个声明中设置所有字体属性

字体样式描述
font-family设置文本的字体类型(如:"楷书")。
font-size设置文本的字体大小(单位:px、em、rem、cm)。
font-style设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))。
font-weight设置文本的字体粗细(默认:normal;粗体:bold;更细:lighter;步长:400)。
foot风格(style)、粗细(weight)、大小(size)、类型(family)。

文本样式

文本样式指的是在网页设计中,用来设置和调整文本外观、布局以及呈现方式的CSS属性。通过文本样式,开发者可以控制文本的字体、颜色、对齐方式、间距等,以提高网页的可读性和视觉吸引力。

文本样式的概念及使用

  1. color:设置文本颜色

  2. text-align:设置元素水平对齐方式

    • left:左对齐,默认值
    • right:右对齐
    • center:居中
    • justify:实现两端对齐文本效果
  3. vertical-align:设置元素垂直对齐方式

    • top:顶部
    • middle:中部
    • bottom:底部
  4. text-indent:设置首行文本的缩进(单位:px 或 em)
    举例:text-indent: 20px;

  5. line-height:设置文本的行高(单位:px)
    举例:line-height: 25px;

  6. text-decoration:设置文本的装饰

    • none:默认值,定义的标准文本
    • underline:设置文本的下划线
    • overline:设置文本的上划线
    • line-through:设置文本的删除线
文本样式描述
color设置文本颜色
text-align设置元素水平对齐方式(左、右、居中、两端)
vertical-align设置元素垂直对齐方式(顶部、中部、底部)
text-indent设置首行文本的缩进(单位px或em)
line-height设置文本的行高(单位px)
text-decoration设置文本的装饰(下划线、上划线、删除线)