Html+css学习总结

Html+css学习经验总结

第一章 DIV布局

了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。

Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.

Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮) 注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。

在列表中去掉·的方法：

第二章盒模型

边框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)哪些元素是块状类（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控制段落文本，用

控制段落。在css中，段落缩进test-intent:20px;

段落居中test-align

上/下划线,删除线test-decoration：underline/overline/linethrough

字间隔：letter-spacing:5px(字与字之间的距离是5像素)本节课主要掌握：段落缩进、文本方向、字间距、文字装饰线（上下划线，删除线）

在控制文本方面，在p标签里也可以。例如

---

等等，都可以对文字进行编辑

字体控制精讲，字体的排列顺序：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语义标签

表格的做法：

//行

//列

练习：做个课程表

超链接：用标签本节课讲标签的用法。

例子：网站名字