当前位置: 首页 > news >正文

CSS——NO.8(代码简写)

*/
 * Copyright (c) 2016,烟台大学计算机与控制工程学院
 * All rights reserved.
 * 文件名:text.cpp
 * 作者:常轩
 * 微信公众号:Worldhello
 * 完成日期:2016年8月11日
 * 版本号:V1.0
 * 程序输入:无
 * 程序输出:见运行结果
 */


盒模型代码简写

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同,如下面代码:

margin:10px 10px 10px 10px;

可缩写为:

margin:10px;

2、如果top和bottom值相同、left和 right的值相同,如下面代码:

margin:10px 20px 10px 20px;

可缩写为:

margin:10px 20px;

3、如果left和right的值相同,如下面代码:

margin:10px 20px 30px 20px;

可缩写为:

margin:10px 20px 30px;

注意:padding、border的缩写方法和margin是一致的。



颜色值缩写

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

例子1:

p{color:#000000;}

可以缩写为:

p{color: #000;}

例子2:

p{color: #336699;}

可以缩写为:

p{color: #369;}



字体缩写

网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

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-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

body{

    font:12px/1.5em  "宋体",sans-serif;

}

只是有字号、行间距、中文字体、英文字体设置。

 


转载于:https://www.cnblogs.com/chxuan/p/8232145.html

相关文章:

  • Sqli-labs less 10
  • Crontab创建定时任务
  • 使用maven进行测试设置断点调试的方法
  • Oracle 11gR2 RAC 常用维护操作 说明
  • 分布式任务队列Celery
  • POJ1323 Game Prediction(贪心)
  • 过滤squidlog中各个链接的大小
  • 我的Java后端书架 (2016年暮春3.0版)
  • linux常用命令简介
  • 云平台统计人员在线数的办法
  • Timesten常用命令
  • 后台dubug有值且sql也打印出来执行了但是前台就是查不到数据
  • HBase 常用Shell命令
  • 单例模式(Singleton Pattern)
  • HDU(2485),最小割最大流
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 2019.2.20 c++ 知识梳理
  • ECMAScript6(0):ES6简明参考手册
  • express + mock 让前后台并行开发
  • Javascript 原型链
  • Laravel 菜鸟晋级之路
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • 半理解系列--Promise的进化史
  • 给github项目添加CI badge
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 如何利用MongoDB打造TOP榜小程序
  • 想写好前端,先练好内功
  • Spring Batch JSON 支持
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • ​学习一下,什么是预包装食品?​
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (安卓)跳转应用市场APP详情页的方式
  • (分布式缓存)Redis持久化
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (十一)图像的罗伯特梯度锐化
  • (原)Matlab的svmtrain和svmclassify
  • **PHP二维数组遍历时同时赋值
  • . NET自动找可写目录
  • .bat文件调用java类的main方法
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .net framework profiles /.net framework 配置
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .Net7 环境安装配置
  • .NET连接数据库方式
  • .net中生成excel后调整宽度
  • @JsonFormat与@DateTimeFormat注解的使用
  • @ModelAttribute 注解
  • @RequestBody的使用
  • [20190113]四校联考
  • [8-23]知识梳理:文件系统、Bash基础特性、目录管理、文件管理、文本查看编辑处理...