学习html+css第四天笔记
昨日回顾
表单标签：
<form action=”url” method=”post//get”>
<input type=”text” name=”n1” value=”xxx” size=”字符数” readony=” readony” disabled=” disabled” />
<inputtype=”password” name=”n2” size=”15”/>
<inputtype=”radio” name=”n3” value=”1” />
<input type=”radio” name=”n3”value=”2” />
<input type=”radio” name=”n3”value=”3” />
<inputtype=”checkbox” name=”n4” value=”1”/>
<input type=”checkbox” name=”n4” value=”2” />
<input type=”checkbox” name=”n4” value=”3” />
<input type=”file” name=”n5”/>
<input type=”hidden” name=”n6”/>
<input type=”submit” name=”n7” value=”提交” />
<input type=”reset” name=”n8” value=”重置” />
<input type=”button” name=”n9” value=”提交” />
<select name=”n10” size=”1”>
<option value=”1”>文字1</option>
<option value=”2”>文字2</option>
<option value=”3”>文字3</option>
</select>
<select name=”n11” size=”3”>
<option value=”1”>文字1</option>
<option value=”2”>文字2</option>
<option value=”3”>文字3</option>
</select>
<textarea name=”n12” rows=”5” cols=”60”></textarea>
</form>
框架标签：
<frameset rows=”200, *” cols=”200, 300, *” >
<frame name=”f1” src=”url” noresize=” noresize” frameborder=”1”></frame>
<frame name=”f2” src=”url” scrolling=”yes//no//1//0” ></frame>
</frameset>
ＣＳＳ初步：
1,有利于网页外观设置的批量控制
2，有利于网页外观的精确控制
3，有利于网页的维护升级修改。
布局：将网页中要表现的内容（文字和图片等）放在合适的我们需要的位置。
table布局è table+css布局è div+CSS布局
布局要解决的问题两个：
1，怎么把“盒子”从上到下排列出来――某些盒子（比如div）直接可实现。
2，怎么把“盒子”从左到右排列出来――盒子进行左右浮动可实现
文字/段落样式属性：
设定文字颜色：color：颜色值//颜色名
设定文字大小：font-size：文字大小（px单位）
设定文字的粗细：font-weight：bold//normal
设定文字的字体：font-family：字体名1，字体名2，……. ――可以设定多个字体
设定字体的斜体/非斜体：font-style：italic//normal
设定行高：line-height：px值
设定字符间距letter-spacing：px值，适用于英文单词中的字母或中文字
设定单词间距：word-spacing：px值，适用于英文单词
设定文字的水平对其方式：text-align：left//center//right
设定首行缩进的距离：text-indent：px值
设定文字的划线：text-decoration：underline//中划线//上划线
设定文字的垂直对齐：vertical-align：top//middle//bottom
css的样式分类：
1，行内样式：<标签名 style=”属性名1：值1；……. ” >。。。。</标签>
2，内部样式：<style> 选择器{属性名1：值1；…….}</style>
3，外部样式：是一个独立的css文件，通过html文件中link标签引入到当前网页中，如下：
a)<link rel="stylesheet"type="text/css" href="abc.css" />
b)abc.css文件中的语法是：选择器{属性名1：值1；…….}
4，导入样式：也是一个独立的css文件，但是在css文件中通过@import命令进入（导入）到该css文件中，自然，该css文件也会被html文件引入，如下：
a)html文件中：<link rel="stylesheet" type="text/css"href="abc.css" />
b)abc.css文件中：@import url("def.css");
注意：
1，他们的优先级就是上述列出来的顺序，前面的更优先（通常就是就近原则）
2，通常，行内样式和导入样式不太使用。
3，也就是说，内部样式和外部样式用的多，他们的区别是：
a)内部样式只能在当前网页使用
b)外部样式可以给多个网页使用
选择器形式和分类：
选择器：就是指用某值语法来代表html中的某个（或某些）标签（元素），其实也就是找到对应的元素的语法而已。然后该选择器中的属性设定就会对该元素生效。
通常选择器分以下几种：
1，标签选择器：
a)标签名{属性设定;…….}
2，类选择器（class选择器）：
a).类名{属性设定;…….}
3，id选择器：
a)#id名{属性设定;…….}
b)特别注意：在一个网页上的标签的id名不可以重复！
4，通用选择器：就一个代表所有标签（即可以对应所有标签）:
a)*{属性设定;…….}
5，伪类选择器：就固定的几个，这里只介绍a标签上可用的几个，用于表示a标签处于不同的状态：
a):link ――链接的初始状态
b):visited ――链接的访问之后的状态
c):hover ――链接的在鼠标放上去时的状态
d):active ――链接的在鼠标“摁住”但还没有抬起来时的状态
e)说明，上述4个伪类通常用于a，但个别（比如hover）也可以用于很多其他标签。如果要跟其他标签分开，通常需要使用这种形式：a:link{…} a:visited{….} a:hover{….} a:active{…..}
6，复合选择器之层级选择器：
a)形式：选择器1 选择器2{属性设定;…….}
b)含义：选择器1所选中的标签中的由选择器2所选中的标签
c)说明：选择器1，选择器2均可以是前面5种基础选择器或其组合
d)举例：.c2 p{….} div p{….} .c2 p span{….} #d1 .c2 p{….}
e)注释：其层级的书写不一定要严格一级一级写下来。
7，复合选择器之分组选择器：
a)形式：选择器1，选择器2，…. {属性设定;…….}
b)含义：表示多个不同的选择器均使用该共同的属性设定。
c)举例： #d1, div, p{….} #d1 p, .c2, p .c2{….}
d)说明：分组选择器进一步简化了代码（重用代码）
到现在为止：
1，css属性的设定形式， 2样式的分类，3选择器的分类， 4文字样式，
盒子初步
盒子是css技术中的核心观念！
什么是盒子：几乎任何一个可以表现出来的标签，都可以称为盒子。
盒子的形状？：矩形，具有上下左右4条边；
盒子从容纳性角度来说，可以分为两种：
1，容器盒子：里面可以放其它内容，其实就是双标签
2，非容器盒子：里面不能放其它内容了，其实就是单标签
盒子具有如下特性：宽高（width,height），边框(border)，外边距(margin)，内边距(padding)
盒子模型示意图：
盒子的实际所占据的区域包括（从内到外）：内容区域，padding区， border区，margin区
特别注意：我们设定盒子的宽高，通常只是盒子的内容区的宽高。
两种最常用的也是最重要的盒子区别：
块盒子：一个默认情况下会独自占据一行（不管其自身的宽度）的盒子，就称为块盒子。
行内盒子：一个默认情况下会在一行中跟其它内容连续出现，直到碰到行尾才自动换行，就称为行内盒子。
重要区别：行内盒子的宽高不可以使用css设定（即width，height无效），也不可以设定其上下padding和margin。
浮动初步
浮动的含义：其实就是指让一个“盒子”往某个指定的方向（左或者右）“浮起来”，其实可以认为该盒子已经不跟其兄弟（姐妹）元素挤在一起了，而是浮到“上一层”了。
浮动具有一定的“破坏”效果，我们需要在使用浮动布局的过程中，来消除其破坏效果，基本做法有两：
1，具有浮动的盒子的父盒子上使用属性：overflow:hidden;
2，具有浮动的盒子的父盒子中的最后加一个空的div如下：<div style=”clear:both”></div>