【进一步学习HTML】

标题表单的创建

< form  method=" " action=" ">
<--
get : 向何处发送表单数据(从服务器获取数据)
post: 向何处发送表单数据(向服务器传送数据)
-->
文本框 <input type="text" placeholder="" name="" value="">
密码框 <input type="password" placeholder="" name="" value="">
提交框 <input type=" submit"> 或 <button>提交按钮</button>
按钮框 <input type="button">  单纯的按钮
重置框 <input type="reset">   清空的效果

placeholder: 描述输入字段预期值的简短的提示信息.兼容IE8以上
name: 设置框的名字(name必须设置,否则在提交表单时,用户在其中输入的数据不会发送给服务器)
value: 需要输入的内容

样式的创建

行内样式:
在里面的标签创建样式, 如:

<div style="color: blueviolet;">我是div</div>

缺点: 结构样式没有分离,不利于后期维护.样式不能重复使用(推荐不使用)

内部样式:
在里面创建样式, 和需要样式的标签必须在同一个页面中.
如:

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>div{color: red;width: 100px;}</style><title>Document</title>
</head>

优点: 结构样式分离,好维护,样式重用,适合小案例
缺点: 只能在一个页面使用css样式.

外部样式:
新建一个css文件, 将css文件连接到html文件中.

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="./02.css">
</head>

选择器

标签(元素)选择器：
p{} div{} h1{} 等.
class选择器：
.box{ } < div class=”box”> box这个名字可以重复使用
id选择器 :
#box{ } < div id=”box”> box这个名字是唯一的,不能重
通配符 :
*{ } 对所有标签设置样式
群组选择器 :
p,div{ } 将选中的标签一块设置样式
后代选择器 :
父元素子元素{ } 想要改变父元素下所有的后代
子选择器 :
父元素>子元素{ } 想要某个父元素下所有的儿子
兄弟通用选择器:
元素~元素兄弟{ }
相邻选择器:
标签+它后面紧挨着的标签{ 同一级标签}

如:

 <style>.box li{background-color: yellow;width: 200px;height: 200px;}.box> li{background-color: red;width: 100px;height: 100px;}</style>
...
<ul class="box"><li>儿子li</li><li>儿子li</li><li>儿子li<ul class="box1"><li>儿子的儿子li</li><li>儿子的儿子li</li></ul></li></ul>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 p{font-size: 80px;color: red;}.box1 li{font-size: 30px;color: orange;}.box2>p{font-size: 40px;color: blue;}.box2>div>p{font-size: 50px;color:green;}.box1>.li3{font-size: 20px;color:purple;}.box2>div>.p2{font-size: 35px;color:skyblue;} .li2+li{color: yellowgreen;}
/* .li2+li是指.li2所对应的li 后面的li */.box2 div~li+p{color: maroon;}</style>
</head>
<body><ul class="box1"><p>00000</p><li>无序列表1</li><div><p>11111</p><p>22222</p></div><li>无序列表2</li><li class="li3">无序列表3</li><p>3333</p></ul><ul class="box2"><p>00000</p><li>无序列表1</li><div><p class="p1">11111</p><p class="p2">22222</p><p>33333</p></div><li class="li2">无序列表2</li><li>无序列表3</li><p>3333</p></ul>
</body>
</html>

(所有的后代,子,相邻,通用选择器权重都是算和的)

选择器权重:

        通配符            0 标签选择器:     0001class选择器:    0010id选择器:      0100内联样式:      1000

当给同一个盒子,使用不同的方式设置样式的时候,如果发生冲突,解析的时候会发生覆盖,这个覆盖的过程就是层叠

层叠性:
权重相同:

      就近原则:谁书写的css代码距离标签近就解析谁后来者居上:谁后面书写的css就解析谁的

层叠的体现在2个方面:

权重不同:高权重的覆盖低权重
权重相同:后来者居上

浮动

浮动:
定义网页中的其他文本如何环绕该元素显示元素(文字环绕模式)
让竖着的排列的横着来排列,当浮动后脱离文档流

向左浮动的盒子,浮动会脱离网页,没有浮动的盒子的文字会环绕浮动的盒子走, 向右浮动的盒子,文字不会环绕浮动盒子走. 多个盒子同时浮动,会横着排列.

float的值
float: left;(左浮动)
float: right;(右浮动)
float: none; (不浮动)

如果box1没有给固定高度,而里面的2个子元素都浮动了,此时2个子元素是飘着的不占位置,那么box1里面就空了,此时box1的高度是0,这个就是浮动引起的高度塌陷的问题.

解决方法:

给浮动元素的父元素添加固定高度
给浮动元素的父元素添加 overflow:hidden

清除浮动
清除浮动只改变浮动之后的排版效果,即改变排列方式, 还是脱离文本流, 不占据文档位置.
清除浮动可以是清除浮动的,也可以清除不浮动的,
浮动的清除后依旧是飘着的,不浮动的清除依旧是不飘着的.
清除浮动只能影响自己下来,同时也会带着后面浮动的盒子一起下来
clear: none; (允许有浮动对象)
clear: right; (不允许右边有浮动对象)
clear: left; (不允许左边有浮动对象)
clear:both; (不允许有浮动对象)

边框

外边框 (元素外边的空白区域)
margin属性
有四个属性值:
margin-left 左
margin-right 右
margin-top 上
margin-bottom下
(margin可以写负数)

margin简写:
margin:上右下左;(四个值)
margin:上左右下;(三个值)
margin:上下左右;(两个值)
margin:上下左右;(一个值)
(属性值可以是数字+单位(20px) 可以是单词auto 如果左间距和右间距给auto,可以实现水平居中)

margin: 0 auto;(一个有宽度的元素在浏览器中横向居中)

注意:
margin-top的解析
现象:默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。

解决方法:

A、给最近的父元素添加border-top:1px solid transparent;透明上边框
B、给父元素添加oxerflow:hidden;(溢出隐藏)
C、给父元素或者子元素添加浮动

内边框 (指一个元素内容到元素边缘之间的距离)
padding属性:
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
padding是额外加到元素原有大小之上的,
如果想要用padding设置间距,但是又不想盒子宽度改变,则
A、在设置的宽度或者高度上减去padding值.
B、或者给当前盒子添加属性 css3新属性
box-sizing:border-box;
添加这个之后盒子成为怪异盒子,宽度高度不会改变.

可单独写:
padding-left:40px;
也可简写, 简写方式与margin表示方式一致:
padding:上右下左;(四个值)
padding:上左右下;(三个值)
padding:上下左右;(两个值)
padding:上下左右;(一个值)

比较：
margin和padding的相同和不同:
margin设置的是外间距,padding设置的是内间距
margin不会把盒子自己撑大,padding会把自己变大
margin支持负数和单词auto padding是不支持的
margin有margin-top传递问题,padding没有

边框 (border属性)
边框宽度: border-width
边框颜色: border-color
边框样式: border-style : solid(实线) / dashed(虚线) /dotted(点划线) double(双线)

简写:border:30px solid blue;(参数的顺序可以随意调换)

单边框设置:上边框 border-top border-bottom border-left border-right

附加:

清除标签自带的间距:

    *{margin:0;padding:0;}统配符清除简单,但是对本身不需要清除的也要加载,不利于页面加载,多余消耗body,p,ul,ol,h1,h6,input,dl,dt{margin:0;padding:0;}群组看似麻烦,但是它利用项目建设,减少消耗,因此从性能看,群组合适.