Html+css学习总结

Html+css学习经验总结
第一章 DIV布局
了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。

Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.
Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮) 注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。

在列表中去掉·的方法：<li style=“list-style-type:none”></li>
第二章盒模型
边框border设置，说明border的（颜色、宽度、形状（实现、虚线、立体））四个方向上如何设置border的宽度，border:20px solid red;
solid:实线 dashed:虚线 dotted:点线 outset:立体
border-top、只定义上边框，同理border-left border-bottom border-right 作业：用css控制div的边框画一个三角形，提示：上下左右让边框透明，画个圣诞树。

Css中的注释方式：</* */> html中的注释方式<!-- --> margin属性：控制盒子与边界的距离margin-top/left/bottom/right;例：margin:30px;
padding-top/lest/bottom/right 例：padding：4px; 如果布局已经完成，且像素正好相容，突然加了padding值可能导致什么情况发生？
如图所示，加了pading之后，实际上盒子变大了（实战请看首页布局3网页）
思考：利用margin auto完成首页居中，并自行研究，在竖直方向上用margin auto 是什么效果？内敛元素，<span></span>考虑哪些元素是内敛类(span)哪些元素是块状类（div）
padding:文字与“纸张”的距离，控制内部文字。

盒子与盒子的距离用margin,盒子与文字的距离用padding 。

思考：盒子的宽高各是100px,同时盒子有30px的padding值，再设置背景为灰色，灰色的面积是多少?
display(内敛与块状的转化)分为block、inline.例如：display:name
第三章CSS
背景设置：background-image:(在这会有两个字“浏览”点击“浏览”就可以选择图片插入）图片的格式我目前还不会调，
可以在body里写上这样一段代码，图片的大小可以调，在css里设置界面整体的背景，也可以在css里在设置完背景之后，在添加backgrond-image:url(图片名字)；backgruond-repeat:no-repeat;使背景图片呈现一张。

Background-attachment:fixed;使背景图片固定，不随横条的拉动而变动，永远固定在屏幕的某个角落。

1、为什么有些网页既设背景图又设背景色？
考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。

不光是网页如此，页面里的div、表格有了背景图依然应该设置一个背景色（跟背景图颜色差不多，至少跟文字颜色明显不同）。

毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白色而背景色是默认的白色的话，文字就看不出了。

完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。

针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。

由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。

倘若你是一个以黑色为主调的网站，默认背景色是白色，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉部友好，根据网站的主色调定义一个背景色，利于减少视觉疲劳（一般是先定义背景色，再定义背景图片，色彩优先）
2、css学习
用css控制段落文本，用<p></p>控制段落。

在css中，段落缩进test-intent:20px;
段落居中test-align
上/下划线,删除线test-decoration：underline/overline/linethrough
字间隔：letter-spacing:5px(字与字之间的距离是5像素)本节课主要掌握：段落缩进、文本方向、字间距、文字装饰线（上下划线，删除线）
在控制文本方面，在p标签里也可以。

例如
<font></font><em></em><strong></strong><br/><hr/>等等，都可以对文字进行编辑
字体控制精讲，字体的排列顺序：font-family:最好看、次好看、一般、默认，即从不常用到常用，防止用户的浏览器不识别。

有衬线：serif:西方字无衬线：
sans-serif
font-styly:italic斜体 weight:bdd 加粗 size：5px; 字体大小行间距：line-height:30px;可以下载css参考手册，常查常看常练习。

css优先级标签选择器使用范围最广，类选择器次之，再次是派生，id选择器更精细。

css的初始化 #container{ margin:0px;padding:0px; border:0px;
list-style:none;background:#F9F9F9;}
就是让这些基本的标签都为0
Link标签：将css样式中的代码单独新建一个文件保存，然后再用link标签链接到HTML代码中。

目的是用户用浏览器访问时这个网页时，如果网速不好时，当没有单独保存css的话，打开的网页只显示文本跟图片进行单一的罗列，不会显示css样式。

当单独保存了css代码后，浏览器后台碰到link标签后会自动下载css样式，这样即使网页很大，完整的网页也会显示出来。

新建一个sublime文件时，取一个英文名字，例如：xiaobai.html 然后保存，然后！+tab就可以了。

庄宿正：“不然咋弄，得靠这个赚钱啊，不然怎么赚钱？”
第四章 HTML语义标签
表格的做法：
<table>
<tr> //行
<td></td> //列
</tr>
</table> 练习：做个课程表
超链接：用<a></a>标签本节课讲<a>标签的用法。

例子：<a href=“网站地址（直接复制粘贴或者写上）”target-blank(当打开网页时，会弹出新标签)/title=“注明”（当鼠标放上去时显示的内容）>网站名字</a>
锚点：（用a标签）起到定位功能
<a name=“名字”></a> 例如：<a herf=“我给自己做的网页取得名字#p1”>
伪类：
链接的状态有四种，按照顺序写（1）普通状态下：a:link{color:颜色;} （2）浏览过的a:visited{color:颜色;}（3）当鼠标放上去时a:hover{color:颜色;} (4)点击的那一瞬间（还没松手）a:active{color:颜色;}
<pre></pre>标签代码设计成什么样，运行出来就是什么样
三原色（rgb）了解[0-255]/[00,FF]
em:相对大小是指父元素中的一个“m”的大小，简单理解为父元素的font-size就是一个em单位例：父：20px；子：em;(20px) 思考：除了px,%,em,还有没有其他尺寸的定义方式。

IE：（1）双margin bug (左浮元素，左margin是定义的2倍，右浮，右margin是定义的2倍。

)
解决方法：在左浮那里加_display:inline;(内敛)
第五章公司网页开发实战
第六章附录。