第一天
28-综合案列
锚点链接：能够快速跳到本页面的某个位置。
编写格式：<a href=" #链接跳转的id "> </a> ，为将要跳转的内容设置id。列如：
<a href=" #oldman"> </a>
<h2 id=" oldman"></h2>
内部链接：<a href=" oldman.html (同一目录下的新页面名称)" target="_blank "( 链接在新窗口打开)> </a>
第二天
表格小知识
表格居中： align="center"
表格宽高： width=" 数值 " ，height=" 数值"
表格边框： border=” 数值 “
单元格间距： cellspacing=” 数值“
像素值 ：cellpadding =”数值“（规定单元格边沿与内容之间的空白，默认1）
合并单元格
跨行合并 ：rowspan=”合并单元格个数“
跨列合并： colspan=”合并单元格个数“(合并代码写在目标单元格上)
目标单元格：跨行 以上侧为目标单元格
注意：跨列以左侧为目标单元格
合并单元格三部曲
- 确定跨行或跨列
- 找到目标单元格，编写代码
- 删除多余单元格
列表
有序列表
<ol>
<li>列表项</li>
</ol>（编辑后会自动加上标号）
注意：
ol中只能放列，不允许输入其他标签或文字
<li> 与</li>之间相当于一个容器，可容纳所有元素
无序列表
<ul>
<li>列表项</li>
</ul>
注意：
ur中只能放列，不允许输入其他标签或文字；
<li> 与</li>之间相当于一个容器，可容纳所有元素
自定义列表（围绕一个名词进行解释）
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
注意：
dl里只能包含dt和dd
dt和dd个数没有限制，经常是一个dt对多个dd
dt和dd里面可以放任何标签
表单标签：（收集用户信息）
由表单域，表单控件，提示信息构成
<from>标签定义表单域，以实现用户信息的收集和传递。
<from>将区域中的表单元素信息和结果提交到服务器。
<form
action="url地址 " method="提交方式" name="表单域名称">
</form>
属性：
input标签
lable标签
select标签
语法：
<select name="" id="">
<option value="">选项</option>
</select>
注意：
至少包含一个option。
在option中定义selected=selected时，当前项默认选中。
文档查询网站：
w3school 文档（没有网络也可用）
第三天：
id和类的区别：
id选择器只能调用一次，别人切勿使用。
类可以多次调用
基础选择器总结：
字体属性：
字体样式：
font-family： 字体（微软雅黑 microsoft yahei）
font-size：字体大小： xx px；
字体粗细：
font-weight： {bold（加粗 等价于 700） ，normal （正常比加粗 等价于400）， 可设置100-900;
}
文字样式：
font-style： normal（正常），italic（斜体）
组合属性：
div{
font：font-style font-weight font-size/line-height font-family ( italic 700 16px micorosoft yahei ; )
}
注意：
顺序不能颠倒，各个属性之间用空格隔开。
不需要的属性可不设置，的那必须保留font-size和font-family，否则font将不起作用。
总结：
文本属性：
文本颜色：
1.red，green，blue等
2.十六进制颜色 #fff000 ，f#f6600
3.RGB代码 rgb（ 255，0，0） 或（100% ，0%，0%）
文本对齐：设置盒子中文字水平对齐
div{
text-align ：center，lift，right
}
装饰文本：
div{
text-decoration： none（无线） underline（下划线） overline（上划线） line-through（删除线）
}
文本缩进：
text-indent： 段落缩进2字符，2em；em（相对于当前文字的大小）
line-height：行间距（行高）：由文字高度和上下间距组成。
外部样式表引用：
1.首先建立一个css文件（文件中只有样式，没有style）
2。在html中引入css文件（< link rel=“stylesheet” href=“css文件路径”>）
第四天：
复合选择器：
后代选择器：
元素1 元素2 ...{样式}
元素1 元素2....用空格隔开
元素1 元素2 可以是任意的基础选择器
子代选择器：
元素1>元素2 {样式}
只能选择元素的下一级元素。
并集选择器：
元素1 ，元素2.。。{ 样式}
元素1 和元素2 用逗号隔开。
任何选择器都可以作为并集选择器的一部分。（子代和后代等都可以一起用）
并集选择器用于集体声明。
语法规范：
并集选择器一般竖着写，最后一个选择器不用加逗号。
伪类选择器：
链接伪类：
顺序不能变 link visited hover active
focus伪类选择器：
用于选取获得焦点的表单元素。
input： focus{ background-color：yellow }
元素的显示模式：
显示模式是元素以什么方式显示。
主要分为 行内元素，块元素。
块元素的特点：
注意：
行内元素：
行内元素特点：
注意：
链接里面不能再放链接，但a里面可以包含块级元素。
行内块 元素：
特点：
元素显示模式的转换：
转换为块级元素：display：block
行内元素：display：inline
行内块元素：display：inline-block
背景：
背景颜色：
background-color：颜色
背景图片：
通常logo或者一些装饰性的小图片或者是超大的图片都用背景图片。有点的便于控制位置。
background-imagin：url（图片）
背景平铺：
background-repeat：no-repeat（不平铺，默认平铺）
background-repeat：repeat（平铺）
background-repeat：repeat-x（横向平铺）
background-repeat：repeat-y（纵向平铺）
页面元素既可以添加背景图片，也可以添加背景颜色，但是背景图片会压住背景颜色。
背景图片控制位置：
通过background-position设置图片背景的位置。
可以使用方位名词（right center 顺序没有关系）或者精确单位。
方位名词：（left right center 。。。。）
如果只写一个方位名词，则第二个默认居中。
background-position：x，y；
精确单位：
第一个是x坐标，第二个y坐标。若只写了一个，一定是x，y默认居中。
background-position：（20px 50px）
参数混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
background-position：20px center；
背景固定：
background-attachent：scroll（随内容滚动） | fixed（固定）
背景复合属性：
没有固定的顺序，一般习惯性约定为
background：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置。（空格隔开）
第五天：
css的三大特性：
层叠性：给相同的选择器设置相同的样式。
遵循的原则：
样式冲突时：就近原则，哪个离得近就执行哪个
样式不冲突不会层叠。
继承性：子标签继承父标签的某些样式，子承父业。
行高的继承：
行高可以不跟单位也可以跟。
优先级：
选择器不同，优先级不同,根据权重，
选择器权重如下：
！important>style>id选择器>类选择器/伪类选择器>元素选择器>继承或者*
注意：
权重叠加：
复合选择器会有权重叠加，但不会有进位。
css盒子模型：
盒子组成：包括边框（border），外边距（margin），内边距（padding），实际内容（content）。
边框：
border：
border-style：solid（实线）或dashed（虚线）或dottd（点线）。
border-color：颜色值
border-width：粗细值
border：1px solid red 没有固定顺序。
边框分开写：border-top/bottom/left/right
合并表格的相邻边框线：
border-collapse：
内边距：
padding:即内容和边框之间的距离。
paddng-top padding-left padding-right padding-botom。
简写：
三个值：上 左右 下
四个值：上右下左 顺时针。
注意：
padding不会撑开盒子的情况：
1.党盒子不指定宽度时，padding不会撑开盒子。
2.父盒子未指定宽度时，子盒子不给宽度，但设置padding时，子盒子不会超过父盒子的宽度。（子盒子默认与父盒子一样宽）
外边距（margin）：
属性：left right top bottom
简写与padding一样。
外边距应用：
当盒子设置了宽度时，可设置盒子居中。
margin：0 auto
注意：行内元素或者行内块元素水平居中时，只需给其父元素加上text-aline：center即可。
外边距合并：
对于两个嵌套关系的的块元素，父元素有上边距同时子元素也有上外边距时，父元素会塌陷（跟着子元素下移）。
解决方案：
1.给父元素设置上边框。
2.给父元素定义上内边距。
3.给父元素添加overflow：hidden。
清除内外边距：
*{
margin：0；
padding：0；
}
注意：行内元素尽量值设置左右内外边距，不设置上下内外边距，但如果转为块级或者行内块元素就可以。
基本ps使用技巧：
常用工具：
第六天：
圆角边框：
border-radius：length； border-radius：50%；
常用写法：
圆形：设置radius值为正方形盒子宽度一半。
椭圆：设置radius值为矩形盒子高度的一半。
可有四个值，分别是：左上角，右上角，右下角，左下角。顺时针。
两个值时是对角线。
盒子阴影：
box-shadow：
h-shadow：水平阴影位置，正右负左。
v-shadow:垂直阴影，正下负上。
blur：模糊距离，影子的虚实。
spreod：阴影尺寸，影子大小。
color：颜色，一般用rgba（0 0 0 0）设置。
inset：外部阴影或者内部阴影。可将outset改为内阴影，但不可以写外阴影。
注意：
1.默认的阴影是外阴影，但不可以写这个单词，否侧将导致阴影无效。
2.盒子阴影不占用空间，不会影响其他盒子。
文字阴影;
text-shadow: h-shadow，v-shadow,blur,color；
传统的三种布局方式：
1、标准流：按规定默认的方式排列，多个块级元素纵向排列找标准流，横向排列找浮动。
2、浮动：改变标准流的排列方式，让多个盒子在一行显示。
选择器：flaot：none，left，right。（属性值）
浮动特性：（脱标）
浮动元素会脱离标准流
浮动的盒子不再保留原先的位置。
属性书写顺序：
- 首先写布局定位属性。
- 自身属性
- 文本属性
- 其他属性
定位：
笔记中可能存在错漏，还请各位大佬们多多指教。
未完待续......
