CSS常用代码

113 阅读3分钟

Css常用样式.png

一、字体样式

1. 粗细 font-weight

  • 作用:设置文字是否加粗显示;
  • 属性:属于 font 属性的一个单一属性。
  • 属性值:
    • 数字类型。
      • 100-900 之间的整百数字。
      • 数字越大,文字显示越粗。
      • 其中 400 等价于 normal,700 等价于 bold
    • 单词类型:
    属性值说明
    bolder更粗的字体
    bold粗体字符,b,strong 标签的默认值
    normal默认值,定义标准的字体
    lighter更细的字体 ### 数字类型

2.字体风格 font-style

  • 作用:设置文字是否斜体显示
  • 属性:属于 font 属性的一个单一属性。
  • 属性值:单词 属性值 | 说明 | | ------- | ------------------------------ | | normal | 正规的字体,大多数标签的默认值 | | italic | 斜体的文字,主要针对英文,要求英文以字体中的斜体样式显示 | | oblique | 倾斜的文字,只将文字倾斜显示,与字体无关

3.行高 line-height

  • 作用:设置一行文字实际占有的高度,文字字号在行高中是垂直居中的。
  • 属性:属于 font 属性的一个单一属性。
  • 设置 line-height 的推荐方法:无单位数字乘以该元素的字体大小。计算值与指定值相同。
属性值说明
px 像素值设置的行高的具体像素
百分比数值设置的本身字号像素值得百分比

4.字体综合 font

  • 字体、字号、行高、加粗、斜体都是 font 综合属性的单一属性。
  • font 属性:五个单一属性的值进行合写,属性值可以有 2 到多个,值之间用空格进行分隔。
    • 写法 1:字号和字体必须要写,字号写在前面,字体写在后面,顺序不能颠倒 p{ font:14px "黑体"; }
    • 写法 2:字体、字号、行高进行合写,书写顺序必须是字号、行高、字体,字号和行高之间必须用/进行分隔 p{ font:14px/2 "微软雅黑"; }
    • 写法3:font 属性需设加粗和倾斜,两个属性值只能写在最前面,可互换位置。后面的字号、行高、字体不能更改位置 p{ font:italic bolder 14px/2 "隶书"; }

二、文本样式

1.水平对齐 text-align

  • 作用:设置文本水平方向的对齐
  • 属性值:三个方向的单词 属性值 | 说明 | | ------ | -------------- | | left | 居左对齐 | | center | 居中对齐 | | right | 居右对齐

2.文本修饰 text-decoration

  • 作用:设置文本整体是否有线条的修饰效果
  • 属性值:单词
属性值说明
none没有修饰,用于清除a标签默认值
overline上划线
line-through中划线,删除线
underline下划线

3.文本缩进 text-indent

  • 作用:设置段落首行是否进行缩进
  • 属性值:
属性值说明
px 单位表示首行缩进多少个像素
em 单位首行缩进几个中文字符的位置
百分比表示缩进文字所在标签的父级标签的 width 属性值的百分比