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


    CSS字体属性

    字体

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

    字体大小

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

    字体粗细

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

    • blod:粗体

    • bolder:特粗体

    • lighter:细体

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

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

    1. h2 {
    2. font-weight: 400;
    3. }

    文字样式

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

    字体复合属性

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

    CSS文本属性

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

    文本颜色

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

    对齐文本

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

    装饰文本

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

    实例:去除链接的下划线

    1. a {
    2. text-decoration: none;
    3. }

    文本缩进

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

    行间距

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

  • 相关阅读:
    进销存软件对中小型企业管理有什么作用?
    WordPress如何删除前端评论中的网址字段?
    learnopengl 中 pbr的球体算法
    数据中台为什么不好搞?
    API集成测试:SpringBoot+Junit
    2024 遗传编程实战(一)基因实战
    c#单例模式
    综合布线可视化管理系统价值分析
    Go Gin Gorm Casbin权限管理实现 - 1. Casbin概念介绍以及库使用
    C语言实现单链表 && 双向链表
  • 原文地址:https://blog.csdn.net/LQZ8888/article/details/107898694