Day_3.(2)

接着上一次没来得及说得内容，继续说下这段时间学习的心得。

4.5：运用表单的属性制作计算器：

上回说到，fieldset的运用。然后老师就用刚讲的知识教我们做了一个超low但是又挺实在的计算器。

在form表单中添加个oninput属性，在属性里面添加计算公式，但是需要注意的一点是，input 的value值在计算公式中默认是字符串，为了使字符串变成数值运算，可以在(input的)name.value前面加+；

计算器的制作原理：

<form action="1.php" oninput="result.value=(+sum1.value+(+sum2.value))"> <input type="number" name="sum1"/> + <input type="number" name="sum2"/> = <output for="sum1 sum2" name="result"></output> <br/> <input type="submit" name=""/ value="提交"> </form>

5：css雏形。

这一章讲述了在网页布局中很重要的css样式。网页HTML中大量使用DIV、SPAN、TABLE表格等标签布局，要实现漂亮的布局（CSS宽度、CSS高度、CSS背景、CSS字体大小等样式）我们就需要CSS样式实现。同样的一组DIV标签，对应CSS样式代码不同，所得到效果也不同。我们可以比作HTML是骨架，CSS是衣服。相同HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。

6:css类和ID选择器。

在HTML中，可以通过赋予一个标签ID名或者一个Class名，然后就可以对该ID名或者该Class名所对应的元素进行修饰。

类选择器的使用方法是在元素标签的里面加一个class=“”name“”，name为自己定义的随机名称。

ID选择器的使用方法是在元素标签的里面加一个ID=“name”，name为自己定义的随机名称，ID的name具有唯一性，不能和其他元素的ID名重复。

<style>

#name{};ID选择器在网页中使用的写法，“#”+ID的“name”;

.name{};类选择器在网页中使用的写法，“.”+Class的"name";

</style>

7：万能通配符

网页中因为元素间默认的间距很容易影响制作者的布局，所以在制作网页之前，一般会把元素和元素间，元素和浏览器间的一些自带间距消除。这时候我们就可以使用具有全局功效的万能通配符 * 来消除这些间距。

<style>

*{

padding:0;margin:0;

};万能通配符的写法；消除自带的内边距和外边距

</style>

顺带学会了一个属性：删除线。

text-decoration: line-through;

8：多种选择器

CSS样式中，选择器有很多种，不同的选择器影响所修改的对象元素。如果使用不同的选择器，修改相同的对象元素，则作用域小优先。作用域小则优先级高

1、id选择器（唯一性，一个网页文件只能出现一次）
2、类选择器（一个网页文件可以重复使用）
3、后代选择器（有作用域之说）
4、子代选择器（如：div>p,单指“儿子”，不包括孙子）div>p{};子代选择器只能改变对应该层级的元素，子代的下一代不能被改变
5、交集选择器（如：div.box，名字叫做“box”的DIV；div#box，ID为“box”的div）
6、并集选择器（如：.box,.box,.wrap,#one,p）
7、伪类选择器（如：.box:after,.box:before）
8、通配符（*，指所有的）
9、标签选择器（p）
10、第一个孩子（div:first-child）
11、最后一个孩子（div:last-child）
12、div:nth-child(序号)(指同类的第几个)
13、！important(代表最重要的东西，但不推荐使用，优先级最高)