设计师学习HTML/CSS之路-13

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第13章 CSS代码缩写

13-1 盒子型代码简写

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;
复制代码

13-2 颜色值缩写

例1：

p{color:#000000;}
复制代码

可以缩写为：

p{color:#000;}
复制代码

例2：

p{color:#336699;}
复制代码

可以缩写为：

p{color:#369;}
复制代码

13-3 字体缩写

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 属性，其他属性如果不写，则自动使用默认值。

2.缩写时，font-size 与line-height 中间要加入"/"。

设计师学习HTML/CSS之路-13相关推荐

设计师学习HTML/CSS之路-01
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第1章 Html介绍 1-1 代码初体验,制作我的第一个网页 <html><head& ...
设计师学习HTML/CSS之路-11
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第12章 CSS布局模型 11-1 元素分类在CSS中,html中的标签元素大体被分为三种不同的类型: ...
设计师学习HTML/CSS之路-08
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择器 8-1 什么是选择器每一条css样式声明(定义)由两部分组成选择器{样式 } ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
前端学python有什么用-学习和使用python的13个理由
如果您希望转向网站开发或软件开发,成为程序员中的一员,那么学习HTML,CSS和JavaScript的基础三重奏就不会出错.但要真正在拥挤的应用领域中脱颖而出,您还是需要学习其他编程语言. 有很的编程 ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
python学什么东西_什么是Python？你应该学习和使用它的13个理由
如果您希望转向网站开发或软件开发,成为程序员中的一员,那么学习HTML,CSS和JavaScript的基础三重奏就不会出错.但要真正在拥挤的应用领域中脱颖而出,您还是需要学习其他编程语言. (上图为G ...

设计师学习HTML/CSS之路-13

第13章 CSS代码缩写

13-1 盒子型代码简写

13-2 颜色值缩写

13-3 字体缩写

设计师学习HTML/CSS之路-13相关推荐

最新文章

热门文章