css学习の第一四弹—代码格式简写归纳

一、代码简写方式归纳

》》1.盒模型代码简写:

外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左

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;*****注释:在此处省略了左边的存在。

》》2、颜色表示的缩写:

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

例子1:

p{color:#000000;}

可以缩写为:

p{color: #000;}

例子2:

p{color: #336699;}

可以缩写为:

p{color: #369;}

》》3、字体表示缩写:

网页中的字体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-variant、line-height)如未指定将自动使用默认值。

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

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

body{

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

}

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

*****注释:按照特定的顺序缩写,可以省略部分内容,但是总体顺序不变。

时间: 2024-10-16 19:07:57

css学习の第一四弹—代码格式简写归纳的相关文章

运维学习第四弹

运维学习第四弹之shell(bash): 一. hell可以翻译成壳,大多指能够对内部核心起到保护作用的一种装置或结构.在计算机科学中shell的实际意义为操作者提供的.能够通过系统调用或库调用使用整个计算机资源的访问接口. 它既是一种命令解析器又是一种程序设计语言.作为命令解析器,它可以解释和执行用户输入的命令,也可以自动地解释和执行预先编写好并保存在某个文本文件中的一系列的命令:作为程序设计语言,shell特别定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和条件分支

Java学习笔记四(代码块 )

1 代码块的分类:java中的代码块是指使用{}括起来的一段代码,根据位置不同可以分为四种: 普通代码块 构造快 静态代码块 同步代码块 今天主要学习前三种代码块,同步代码块在学习到多线程部分的时候再加学习. 2 普通代码块:直接定义在方法中的代码块,如下: public class CodeSpace { public static void main(String args[]){ { int x = 30; System.out.println("普通代码块x="+x); } /

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

JAVA学习-第四个代码模型

第四个代码模型:接口应用 在现实生活之中经常会遇见如下的几种情况: · 在一片森林之中有多种树木: · 在商场之中有多种商品: · 在一个停车场里停放着多种车辆,例如:卡车.轿车.摩托车.自行车. 下面模拟以上的一个场景.现在有间超市,在超市之中提供有多种商品,现在要求实现商品的上架销售和下架的功能,同时可以根据关键字查询出商品的信息.本程序只要求描述出类的结构即可. 范例:定义商品标准 interface Goods {         // 商品 public String getName(

css学习の第一弹—格式创建

构成结构:选择符(又称为选择qi器){声明(属性:值):}*****注意:大括号,冒号,每个声明后的分号. 注释:/*注释内容写在这里*/ 一.css样式 css样式写的地方的不同分类:内联式.嵌入式.外部式 内联式:<p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,不能写在截至标签中*****注意:=""双引号的存在,引号中的冒号存在. 嵌入式:<style type = "te

CSS学习笔记四:下拉选择框以及其动画特效

以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所以在学习原生,一个一个小标符号学习起来,学习原生可能会让我学习到更多的东西. 学习了两种下拉框,一种是往在弹,一种是从中间往外弹. 第一种下拉框 现在学习的做东西,都是先确定好自己需要那几样东西,先把body的内容写了,再来一样一样规划样式. 1 <div class="content&quo

Python 学习第四弹:编码问题(转载)

关于python的编码问题一直以来不得解,终于在今天从这篇博文中明白了. 原文地址: http://nedbatchelder.com/text/unipain.html 译文地址:http://pycoders-weekly-chinese.readthedocs.org/en/latest/issue5/unipain.html 译者: yudun1989 实用Unicode编程指南 这是我在 Pycon2012 所做的演讲.你可以阅读本页的幻灯片和文字,或者直接在浏览器中打开 演示 ,或者

css学习の第六弹—样式设置小技巧

一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class="txtCenter">我想要在父容器中水平居中显示.</div></body> css代码:<style> .txtCenter{ text-align:center; }</style>>>2.块状元素(定宽)通过设置&quo

CSS学习(四)

伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#F