这部分是html细节知识的学习。

快速入门系列--HTML-01简介

快速入门系列--HTML-02基础元素

快速入门系列--HTML-03高级元素和布局

快速入门系列--HTML-04进阶概念

边框、填充、对齐和浮动

这部分将主要介绍使用CSS控制整个Web页面的各个方面，通常来说，会使用margin（外部）和padding（内部性增加元素周围的空间，使用align和float设置元素的相对位置。对于margin来说，可以使用margin-top/right/bottom/left设置，记住顺序为顺时针，同时注意在设置百分比边距时，一定记住是相对的百分比，比如外部容器为页面的25%，那么内部的margin:25%其实是这25%的25%。此外，如果有两个带边框的元素彼此堆叠在一起，但他们之间没有边距，那么它们接触的位置似乎有双边框，可以同时将这两个边框减半，达到美观的效果。

常见的对齐包括text-align水平对齐，vertical-align垂直对齐，前者可以设置为left,right,center,justify两端对齐，后者可以设置为top元素的顶部与当前行对齐，middle元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。对于float来说，一定要注意窗口的大小，当宽度不足时，会造成块元素的换行，对原有样式产生较大影响。此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。

方框模型和定位

HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。

因此元素的总高度实际上是width + padding-left + padding-right + border-left + border-right + margin-left + margin-right，在实际项目中，一定不要忘了设置默认的边距属性，因为不同浏览器会有差异。

相对定位是HTML使用的默认定位类型position:relative，可以把其当做跳棋的布置，从左到右排列，达到边缘就移到下一行，而另外一种是绝对定位position:absolute，允许设置HTML内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。

接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏，scroll可以给元素增加滚动条。

Tip:验证样式表，http://jigsaw.w3.org/css-validator/

固定布局和流式布局

一个非常有名的博客平台WordPress(wordpress.org/themes),有空的时候非常推荐看看，对于nodejs来说,ghost是一个不错的开源应用。对于大部分的web站点来说，一般会使用固定布局、流动布局或响应式布局，尤其针对现在的多终端环境来说，合理的折中是固定/流动混合布局，或者响应式的布局。在设置时，可以使用min-width（不包括填充、边框和边距）来保证流动式布局至少可以达到最基本的显示效果。在2010年，设计师Ethan Marcotte创造了术语响应式web设计，主要涉及一个媒体查询的概念，一个简单的示例如下。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="xxx.css">

Tip:em(字母m的宽度)的使用，用于弹性布局，不过该方式构建web页面将非常麻烦，此外在页面中，经常可以使用-1000em等方式，隐藏元素。

CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于<li>标签中，outside（默认值）则相反，而将list-style设置为none可以保证列表项前不会上放置任何图标。

CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同。比如相对于页面中的链接元素，nav中的链接元素可以使用text-decoration:none属性来去除蓝色下划线，为了表示出样式的不同，可以使用伪类选择器nav li a:link, nav li a:visited和nav li a:hover, nav li a:active两组。此外，如果需要实现水平导航，可以将ul和li的display属性设置为inline，还可以设置line-height的高度。

使用鼠标修改文本显示：这部分首先介绍一个工具提示的例子，如下所示，同时可以使用类似方式利用CSS显示额外的翻转文本，而通常更为常见的通过不同的事件触发显示不同样式的例子这儿就不一一介绍了。

 <head>
 <meta charset="utf-8">
 <title>实现hit, tooltip效果</title>
 <style type="text/css">
 a{
 text-decoration: none;
 font-weight: bold;
 }
 a.tip{
 position: relative;
 z-index: 24;
 }
 a.tip:hover{
 z-index: 25;
 }
 a.tip span{
 display: none;
 }
 a.tip:hover span{
 font-weight: normal;
 font-style: italic;
 display: block;
 position: absolute;
 top: 20px;
 left: 25px;
 width: 150px;
 padding-left: 3px;
 border:1px solid #000;
 background-color: #ddd;
 color: #000;
 }
 </style>
 </head>
 <body>
 <a href="http://www.ctrip.com" class="tip">Ctrip<span>一个不错的公司</span></a>
 </body>

在介绍CSS3变形transformation,渐变transition和动画animation之前，需要了解浏览器的差异，比如chrome和safari使用-webkit，firefox使用-moz，微软使用-ms,Opera使用-o前缀，这是基于不同浏览器内核决定的。对于2D图形，可以使用transform:translate(x,y)平移元素，使用rotate(45deg)旋转元素，使用scale(.5)缩放元素，skewX(45deg)扭曲元素。

对于3D图像来说，需要在2D图形的基础上增加Z轴深度，通常通过透视图perspective来绘制图形，提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;

而对于动画来说，有一个关键的概念，即关键帧，@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear，看到这不经想到还是jQuery方便。

该部分内容比较复杂，在之后使用到时再回顾学习。

参考资料：

  1. 版) [M]. 北京:人民邮电出版社, 2014.

Html与CSS快速入门03-CSS基础应用的更多相关文章

  1. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  2. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  3. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  4. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  5. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

  6. [转]快速入门系列--WebAPI--01基础

    本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...

  7. C#快速入门笔记(1)——基础语法

    C#快速入门笔记(1)——基础语法 总体框架:

  8. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

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

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

随机推荐

  1. 如何将APP部署在阿里云服务器

    1,APP应用需要什么样的云服务器? 为了帮助大家了解如何使用阿里云云服务器及相关应用,阿里云的移动云团队开发了一个简单的APP应用:移动云相册,其中使用了ECS主要用作部署云相册的API服务(图片信 ...

  2. 关于gridview里加按钮事件的总结

    1. onrowcommand="GridView1_RowCommand1" 在gridview申明时的属性里要有,然后找到闪电,双击 还有要把那个按钮行模板化,就是箭头里面的t ...

  3. Fragment、Activity 保存状态

    Activity 保存状态1. void onCreate(Bundle savedInstanceState) 当Activity被第首次加载时执行.我们新启动一个程序的时候其主窗体的onCreat ...

  4. 伪元素小tips

    1.伪元素的是dom看不见的,表现为行内元素.我这里说的伪元素是指::before ::after.其他的像:first-letter :visited 则属于伪类. 2.因为dom不可见,所以伪元素 ...

  5. PN结的形成

    P型半导体 在纯净的硅晶体中掺入3价元素如硼,使之取代晶格中硅原子的位置,就形成了P型半导体.在P型半导体中,空穴为多字,自由电子为少子,主要靠空穴导电.掺入的杂质越多,空穴的浓度就越大,导电性就越强 ...

  6. 快速学习C语言四: 造轮子，ArrayList

    高级语言里的列表是最常用的数据结构,在C里造个轮子玩玩,C没有泛型,先用int练习. Collection的ADT一般有hasnext,next,add, remove操作,List一般还加了remo ...

  7. 分享：写了一个 java 调用 C语言 开发的动态库的范例

    分享:写了一个 java 调用 C语言 开发的动态库的范例 cfunction.h   代码#pragma once#ifdef __cplusplusextern "C" {#e ...

  8. Linux下Crontab命令用法

    第1列分钟1-59第2列小时1-23(0表示子夜)第3列日1-31第4列月1-12第5列星期0-6(0表示星期天)第6列要运行的命令 下面是crontab的格式:分 时 日 月 星期 要运行的命令 这 ...

  9. .Net Core CLI–Ubuntu 14安装

    sudo sh -c 'echo "deb [arch=amd64] http://apt-mo.trafficmanager.net/repos/dotnet/ trusty main&q ...

  10. C#实现 word、pdf、ppt 转为图片

    office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...