系统学习HTML+CSS

  

近期项目处于准备阶段，于是工作时间便多出很多时间。我便趁着这个机会把前端必走之路的HTML+CSS系统的学习了一遍。由于之前工作中也有接触这两门技术，所以并不是零基础开始。即便如此，我还是从最基本的开始了。下面简单列下步骤：

1.W3School中的HTML教程：HTML、CSS、XHTML、TCP/IP；建站手册：网站构建、万维网联盟、浏览器信息、网站品质。

每个属性都过了一遍，其中对不知道的知识做了笔记。另，JavaScript、jQuery没有再看（JS原来看过很多次了，jQuery则看了源码）知识做了里面的测试题，题目通过率还是有98%的。

里面还有些没有看，如HTML DOM。

 

2.开始转向慕课网里面的视频，找到HTML/CSS，从初级开始看起。最先看的是HTML+CSS基础，这真的是从零开始的课程，我选从我不熟的章节开始。由于处女座的完美主义纠结，后来还是把没看的也补了，只会显示个100%（-。-）

 

看基础同时疲倦了就再找了个稍偏上层次点的：网页布局基础，讲网页布局的几种解决方案。这里面几种基础的自己也是掌握的，也就做了下里面的编程挑战，线下做了几个页面。

 

 

接着看了《SEO在网页制作中的应用》，还挺有趣的，这个只是听过，倒真没有了解过。再就是找了个好玩的看了《帝都抢车位动画制作》。动画也是自己没涉及到的，虽是看完了，但确实不多练几次还是没掌握。

后来又看了中级篇的《如何用css进行网页布局》、《固定层效果》，这时已经看的差不多了，就专门留了时间自己动手写了个百度首页。在做的过程中，发现还是有很多情况不知用什么属性。问了专业同事，说刚开始都是这样，多做就熟了。说他现在还有记不住的。听到这话，我稍稍的放了下心。

 

 

紧接着继续选了中级篇里面实战的课程，如导航菜单的制作、网页制作结构与表现原则等，最近看完了（昨天）就是《CSS3扁平化风格博客》。这里不得对这课的老师表示赞呢，写法熟练之外还很优美，比如分屏写、快捷键、解决问题思路。通过看老师编写的过程也发现了一些小技巧的实现并做了笔记。

 

 

3.不看视频时候，在浏览各网页时就习惯性的看下人家的html结构，css实现。刚刚把项目里的css代码看了一遍，主要是找自己不认识的属性，然后查对应，并做笔记。也动手做了几个页面，越往后越不理想，容易被视频里节奏带走。这时自己没有一个清晰的思路，自然是做不好。

 

 

这个过程下来，发现虽有那么多视频，但实质内容大多不逃那些，都是类似的。可却也会有讲解人理解不同，对同一问题有不同见解的。刚开始时自己还挺疑惑的，中间也有问这专业同事，后来索性随自己理解了。如果根据自己的理解去做时有困难，错误，再去寻找答案。

 

然后，也是深深赞同那个同事和我说的：这东西得多练，做的多了自然就熟了。就像自己看了那么多视频，记住的还是不多，特别是本来就不熟悉的属性。在写页面时，去查了很多属性在课程里都见过…

 

现在的方向是想再通篇学下HTML5、CSS3，当然属性更是记不住了，只是自己看到了不会的就还是去查下，顺便做记录。

 

 

现在便把自己这段时间做的笔记搬上来。

 

css特殊性   

1 当多个样式应用在一个元素上时，浏览器根据权值来判断具体使用的

权值规则：

标签的权值为1；类选择符的权值为10；ID选择符的权值最高为100。

继承也有权值但最低（0.1）

 

2 需指定某个样式为最高权值 !important，如：p {clolor:red !important;}

 

3 {font-style:italic;}  设置为斜体

4 p{text-indent:2em;}  段落排版 2个缩进  2em：文字的2倍大小

5 p{line-height:2em;}  行间距（行高）

 

6 {word-spacing:20px;}  字间距； 字母间距：letter-spacing:1px; 

 

7 当内容溢出元素框时的处理 ：overflow: 

值描述

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 

8 为元素添加圆角边框：border-radius 

border-radius:2em;

等价于：

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

 

 

9 属性设置元素的垂直对齐方式：vertical-align 

值描述

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

  

 

10 特定的方式定义匹配某个区域的特定元素：box-sizing

值描述

content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

 

 

 

11 颜色代码缩写：#336699 #369

 

12 固定背景：backgroud-attachment:fixed;  

 

13 背景用封面形式：background-size:cover;  

 

14 属性简写 (padding border margin 相同)

left right 相同 缩写： margin:10px 20px 30px

 

15 旋转DIV：transform: rotate(45deg);

 

16 字体缩写 

1、使用简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

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

 

17  水平居中 -行内元素 text-align:center

       水平居中 -定宽块状元素 width:500px; margin:auto; // 即margin-left/right 设置auto 

 

 

18   习惯写caption作表格标题：<caption>2012年到2013年库存记录</caption>  

 

19 强调语气：<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示<strong> 用粗体表示。

 

20 <q></q> //短文本引用 不用单独加引号

 

21 <blockquote></blockquote> //长文本引用 不用单独加引号

 

22 <address> 地址标签；<code> 添加一行代码 ；<pre> 多行代码

 

23 mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔：a href="mailto:[e-mail]?subject=观有感&body=对此评论有些想法。”

 

24 <ol><li></li></ol> 有序列表 li自带序号，从1开始

 

25 子选择器：#main>span{};  //作用于元素的第一代后代，含（后代）选择器

#main span{};   // 空格作用于元素的所有后代

 

*{color:red} ;   //通用选择器

 

伪类选择符，目前为止只有：a:hover

 

 

.first #three span{color:green;}   //分组选择符，第三个span

 

 

26 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

 

27 盒子模型：块级标签都具备盒子模型；布局模型：建立在盒子模型之上