博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
排版与缩写
阅读量:6278 次
发布时间:2019-06-22

本文共 1409 字,大约阅读时间需要 4 分钟。

  • 文字排版

      字体:body{font-family:"Microsoft Yahei";}

    字号和颜色:body{font-size:20px;color:red;}

    字体排版:p span{font-weight:bold;}//设置为粗体

                    p a{font-style:italic;}//斜体

         p a{text-decoration:underline;}//下划线

          .oldPrice{text-decoration:line-through;}//删除线

  • 段落排版

    缩进:p{text-indent:2em;}//段前空两个字的空白,2em的意思就是文字的2倍大小

    行间距:p{line-height:2em;}//行高为2cm

    文字间隔或者字母间隔:p{ letter-spacing:50px;}

    单词间距设置:p{word-spacing:50px;}

    块状元素中的文本、图片设置对齐;

    居中样式:div{ text-align:center;}
    左对齐:div{ text-align:left;}
    右对齐:div{ text-align:right;}   

  • 颜色值缩写

   颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

   例:p{color: #336699;}可以缩写为:p{color: #369;}

 

  • 字体缩写

    body{

      font-style:italic;
      font-variant:small-caps; //针对小写英文字母,意思为小型大写,大小跟小写字母一样,样式是大写。
      font-weight:bold; 
      font-size:12px; 
      line-height:1.5em; 
      font-family:"宋体",sans-serif;
      }
    这么多行的代码其实可以缩写为一句:
    body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
    注意:
      1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
      2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
      一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
          body{ font:12px/1.5em "宋体",sans-serif;}
          只是有字号、行间距、中文字体、英文字体设置。

  在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:

转载于:https://www.cnblogs.com/Lune-Qiu/p/7305444.html

你可能感兴趣的文章
CentOS7 yum 安装git
查看>>
启动日志中频繁出现以下信息
查看>>
httpd – 对Apache的DFOREGROUND感到困惑
查看>>
分布式锁的一点理解
查看>>
idea的maven项目,install下载重复下载本地库中已有的jar包,而且下载后jar包都是lastupdated问题...
查看>>
2019测试指南-web应用程序安全测试(二)指纹Web服务器
查看>>
树莓派3链接wifi
查看>>
js面向对象编程
查看>>
Ruby中类 模块 单例方法 总结
查看>>
jQuery的validate插件
查看>>
5-4 8 管道符 作业控制 shell变量 环境变量配置
查看>>
Enumberable
查看>>
开发者论坛一周精粹(第五十四期) 求购备案服务号1枚!
查看>>
validate表单验证及自定义方法
查看>>
javascript 中出现missing ) after argument list的错误
查看>>
使用Swagger2构建强大的RESTful API文档(2)(二十三)
查看>>
Docker容器启动报WARNING: IPv4 forwarding is disabled. Networking will not work
查看>>
(转)第三方支付参与者
查看>>
程序员修炼之道读后感2
查看>>
DWR实现服务器向客户端推送消息
查看>>