CSS属性使用之字体属性和文本属性使用规范标准有那些?

CSS字体属性

字体

p {
    font-family: "微软雅黑";
}
h2 {
    font-family: "Microsoft YaHei",Arial;
}
  • 可以选择多个字体,多个字体用逗号分割
  • 一个字体有多个单词时尽量用引号
  • 多个字体的目的,优先使用第一个字体,如果用户电脑上没有这个字体将使用下一个字体
  • 如果这些字体都没有,使用浏览器自带字体
  • chrome默认字体,微软雅黑

字体大小

p {
    font-size: 20px;
}
  • 后面别忘了加px(像素)
  • chrome浏览器文字默认大小16px
  • 如果给body指明了文字大小,整个页面的文字的默认大小就改变了(标题大小不会改变,想要改变的话需要单独指明)

字体粗细

p {
    font-weight: normal | bold | bolder | lighter | number
}
  • normal:正常字体,默认值

  • blod:粗体

  • bolder:特粗体

  • lighter:细体

  • number:数字 (后面不要加单位) 开发时常用

    • 700加粗(bold),400变细(nomal)
  • 示例,标题在使用的时候经常去掉加粗

h2 {
    font-weight: 400;
}

文字样式

  • 主要是斜体
p {
    font-style: normal | italic;
}
  • normal:普通样式,italic:斜体样式

字体复合属性

  • 示例:文字变倾斜,加粗,字号16,字体微软雅黑
div {
    font: italic(font-style) 700(font-weight) 16px(font-size/line-hight) 'Microsoft yahei'(fonnt-family);
}
  • 注意!顺序不能更换,里面各属性空格隔开
  • 括号内是这个填写的属性
  • 不需要的属性可以省略,但必须保留font-sizefont-family属性,否则 font(整个css属性) 都不起作用

CSS文本属性

  • 文本外观,颜色,对齐,缩进,行间距

文本颜色

div {
    color: red;
}
  • 预定义的值:各种英文单词
  • 十六进制的值:#ff0000(red) 开发最常用
  • RGB写法:rgb(200,0,0)

对齐文本

  • 注:只能设置水平对齐格式
div {
    text-align: center | left | right;
}
  • left:左对齐 (默认值)
  • right:右对齐
  • center:居中对齐

装饰文本

p {
    text-decoration: none | underline | overline | line-through;
}
  • none:默认值,没有装饰
  • underline:下划线
  • overline:上划线
  • line-through:删除线

实例:去除链接的下划线

a {
    text-decoration: none;
}

文本缩进

  • 文本首行缩进
  • 可以取负值
p {
    text-indent: 20px | 2em;
    /* 首行缩进20px */
    /* 2em是当前2个文字大小 */
}
  • 单位em,em是一个相对单位,相当于当前一个元素的大小 开发常用

行间距

  • 控制行与行之间的距离
p {
    line-height: 26px;
}

猜你喜欢

转载自blog.csdn.net/LQZ8888/article/details/107898694