第十一章 CSS代码缩写，占用更少的带宽

　　盒模型代码简写
：还记得在讲盒模型时外边距(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;
}
只是有字号、行间距、中文字体、英文字体设置。

第十二章 单位和值

　　颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
　　　　1、英文命令颜色  p{color:red;}


　　　 2、RGB颜色  这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
　　　　　  p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：p{color:rgb(20%,33%,25%);}


　　　　3、十六进制颜色  这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
　　　　　  p{color:#00ffff;}

　　长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
　　　　1、像素
　　　　　　像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
　　　　2、em
　　　　　　就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px； 
如果 font-size 为 18px，那么 1em = 18px。如下代码：
　　　　　　p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
　　　　下面注意一个特殊情况：
　　　　　　但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。 
如下代码：
　　　　　　html:
　　　　　　<p>以这个<span>例子</span>为例。</p>
css:
　　　　　　p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
　　　　3、百分比
　　　　　　p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

第十三章 CSS样式设置小技巧

　　水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
　　水平居中设置-定宽块状元素
 当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

　　定宽块状元素：
　　　　满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

　　水平居中总结-不定宽块状元素方法：

　　　　（一）
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
　　　　　　不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
　　　　　　　　加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法：
　　　　　　　　第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
　　　　　　　　第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
　　　　（二）
第二种方法：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：
　　　　　　　　html代码：
　　　　　　　　<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

　　　　　　　　
css代码：
　　　　　　　　<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>


　　　　这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
　　　　（三）
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
　　　　　　代码如下：
　　　　　　<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>


　　　　　　css代码：
　　　　　　<style>
.container{
float:left;
position:relative;
left:50%
}
　　　　　　.container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>


　　　　　　这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
　　　　这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

　　垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
　　　　<div class="container">
hi,imooc!
</div>


　　　　css代码：
　　　　<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>

　　垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
　　　　方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
　　　　说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
　　　　　　html代码：
　　　　　　<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

　　　　　　
css代码：
　　　　　　table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
　　　　方法二 
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
　　　　　　html代码：
　　　　　　<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>


　　　　　　css代码：
　　　　　　<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

　　隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
　　　　position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
　　　　如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为position:absolute 以后，就可以了。
　　　　　　<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>

　　　　　　
css代码
　　　　　　<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>

一、HTML和CSS基础--HTML+CSS基础课程--第6部分的更多相关文章

  1. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  2. Bootstrap<基础一> CSS 概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  3. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  4. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  5. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  8. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  9. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  10. 阶段02JavaWeb基础day01html&css

    HTML 基础 概念 全写: HyperText Mark-up Language 译名: 超文本标记语言 超级文本标记语言是一种规范,一种标准, 超文本标记语言它通过标记符号来标记要显示的网页中的各 ...

随机推荐

  1. MVC简介

    全名是Model View Controller,模型-视图-控制器,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互 ...

  2. visual studio 2012如何彻底删除TFS上的团队项目

    http://www.cnblogs.com/zfanlong1314/p/3378441.html 本人的TFS地址:https://zfanlong1314.visualstudio.com/ 最 ...

  3. linux c学习笔记----进程创建(fork,wait,waitpid)

    1.pid_t fork(); (1)当一个进程调用了fork 以后,系统会创建一个子进程.这个子进程和父进程不同的地方只有他的进程ID 和父进程ID,其他的都是一样.就象符进程克隆(clone)自己 ...

  4. ECSHOP手机号码或邮箱用户名都可以登录方法

    ECSHOP手机号码或邮箱用户名都可以登录方法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-06-30   有不少人都在找支持ECShop用户名.邮箱或手号 ...

  5. 一段代码了解Java中char和int的转换

    题目要求: 将输入的大写字母转成对应小写的后5个,如A转换后为f:如果转换后大于z则从a重新计,即多出1就转成a,多出2就转成b以此类推. Java代码: ```java private static ...

  6. Eclipse启动时卡死解决方法

    Eclipse未正常关闭时,再次启动通常会卡死,解决方法为:到<workspace>\.metadata\.plugins\org.eclipse.core.resources目录,删除文 ...

  7. Ward BRDF实现心得

    最近做了Ward BRDF的实现,相对于之前的lambert,phong来说,Ward是一个真正意义上的各向异性BRDF,但同样的,Ward模型也是一个基于经验的模型,并不是物理上正确的.它由ward ...

  8. bootstrap-select搜索框输入中文

    bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...

  9. SSN 社会安全号码

    SSN是 Social Security Number 的缩写,译为「社会安全号码」,为美国社会安全卡(Social Security Card)上的 9 位数字.SSN 原本目的是用于追踪个人的纳税 ...

  10. strstr 函数用法

    strstr 编辑 strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串.如果是,则该函数返回str2在str1中首次出现的地址:否则,返回NULL. C语言函数 编辑 ...