Web前端开发基础 第四课(盒代码模型)
盒模型代码简写
还记得在讲盒模型时外边距(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是一致的。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>relative样式</title>
- <style type="text/css">
- p{
- padding:13px;
- margin:10px 40px;
- border:10px solid;
- border-color:#cccccc # #cccccc
- }
- </style>
- </head>
- <body>
- <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
- </body>
- </html>
颜色值缩写
关于颜色的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;
- }
只是有字号、行间距、中文字体、英文字体设置。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>字体缩写</title>
- <style type="text/css">
- body{
- font-style:italic;
- font-variant:small-caps;
- font-weight:bold;
- font-size:12px;
- line-height:.6em;
- font-family:"宋体",sans-serif;
- }
- </style>
- </head>
- <body>
- <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p>
- <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
- <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
- </body>
- </html>
Web前端开发基础 第四课(盒代码模型)的更多相关文章
- Web前端开发基础 第四课(CSS元素模型)
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- Web前端开发基础 第四课(CSS小技巧1)
垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...
- Web前端开发基础 第四课(CSS小技巧)
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- Web前端开发基础 第四课(颜色值)
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 前面几个小节中经 ...
- Web前端开发基础 第四课(CSS文字和段落排版)
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- Web前端开发基础 第四课(CSS一些性质)
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- Web前端开发基础 第四课(认识CSS样式)
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
- Web前端开发基础 第三课(与浏览者交互)
来自慕课网,整理 语法: <form method="传送方式" action="服务器文件"> 讲解: 1.<form> :<f ...
随机推荐
- Java 中新增的 foreach 的用法
JDK1.5加入的增强for和循环. foreach语句使用总结 增强for(part1:part2){part3}; part2中是一个数组对象,或者是带有泛性的集合. part1定义了一个局部 ...
- AOP动态代理解析4-jdk代理的实现
JDKProxy的使用关键是创建自定义的InvocationHandler,而InvocationHandler中包含了需要覆盖的函数getProxy,而当前的方法正是完成了这个操作.在此确认一下JD ...
- Python与Hack之守护进程
1.什么是守护进程: 在linux或者unix操作系统中,守护进程(Daemon)是一种运行在后台的特殊进程,它独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事件.由于在linux中,每个 ...
- 选项卡 tab切换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 树状数组+STL FZU 2029 买票问题
题目传送门 题意:中文题面 分析:隔了一个考试周再做,开始没有什么思路,感觉能用线段树/树状数组维护,树状数组维护最小值不会去写线段树,结果超时.后来发现只要维护前缀几个人以及用优先队列/set维护最 ...
- spring mvc 注解访问控制器以及接收form数据的方式,包括直接接收日期类型及对象的方法
Spring 中配置扫描器 <!-- springmvc的扫描器--> <context:component-scan base-package="com.beifeng. ...
- apache activemq的重连
1.activemq的重连机制 maxReconnectAttempts -1 | 0 From version 5.6 onwards: -1 is default and means retry ...
- BZOJ3257 : 树的难题
设$f[x][i][j]$表示以$x$为根的子树,与$x$连通部分有$i$个黑点,$j$个白点,不联通部分都是均衡的最小代价.若$i>1$,则视作$1$:若$j>2$,则视作$2$. 然后 ...
- window计划任务
我的电脑->管理->任务计划程序 [或:控制面板->类别:大图像->管理工具->任务计划程序] 右边创建任务: 常规:名字和 是否 只在用户登录是运行 触发器:新 ...
- sdoi 2009 & 状态压缩
是不是平时在手机里玩吃豆豆游戏玩腻了呢?最近MOKIA手机上推出了一种新的围豆豆游戏,大家一起来试一试吧. 游戏的规则非常简单,在一个N×M的矩阵方格内分布着D颗豆子,每颗豆有不同的分值Vi.游戏者可 ...