颜色值模式：
background-color:red; 直接接英文单词 red green blue pink yellow...
background-color:#(); 16进制 “#”后出来一个吸管 自带代码（一般6位 也有3位---如：aabbcc---abc 再无其他位数）
background-color:rgb(140,164,234); 麻烦 需要到画图中找3个颜色值
background背景的所有属性：
background-color 背景颜色：
background-color:red;
background-color:#();
background-color:rgb(140,164,234);
background-image 背景图片：
uel() “url”表示链接 可加网址地址 也可加图片的路径---“/”表示“的”（切记：图片必须与HTML文件在同一文件夹内）
当直接加以上内容时 默认状态为“平铺”（从左上到右下）
当既有背景颜色 也有背景图片时 背景图片更高级
background-repeat 背景平铺:
repeat 平铺（全部）
no-repeat 不平铺
repeated-x x轴平铺（水平平铺）
repeated-y y轴平铺（垂直平铺）
background-position 背景图定位:
x y x/y的顺序不能变
100px 30px 数值 可为正负 （x/y中间不加任何东西 直接“x+单位 y+单位”如果数值是0px 则可直接写“0”省略单位）
20% 50% 百分比是基于背景颜色
left/center/right top/center/bottom 英文单词类 左/中/右对齐 上/中/下对齐
如果只给一个坐标 则给出为x坐标（可以为px/%/英文单词） y则默认为“center”（中间）
background-attachment 图像滚动或固定:
fixde 相对于滚动条是“固定”的 （注意：其定位的坐标是相当于整个页面的最左上点来说）
scroll 相对于滚动条是“滑动”的
网站常用头部背景设置：
background-image:url()
background-repeat:repeat-x;
background-position:center 0px; （水平设置的标题）
PS：切图（抠图）、测量、图片简单的处理
Ctrl + N 对一般软件都是“新建”
Ctrl + S “保存”
在PS中 按“F”可简略界面 选中截好后 按“F8”出现信息界面（高度、宽度）
PS后的图片保存选择“导出-存储为WEB所用格式-（右上角）优化的格式选“GIF或者PNG-24”” 并且命名必须以英文或数字开头
保存的路径一定要在目标HTML所在文件中
ctr + R出现标尺，直接拉标尺
关于百度云盘和简书：PS、DW操作完成后 将生成的HTML文件上传到百度云盘 然后进入百度云盘的网页 右键单击分享（百度云盘打开的HTML文件是代码）
一般CSS中只设置“width宽度” 而高度会自己“撑” 子级可以不写宽度--跟随父级
div：HTML中<body> <div>“div相当于页面的板块”</div> </bode>
行间样式表 写在标签的style属性里
属性名="属性值"
例如 <div style="width:10px;height:10px;background;red;"></div>
内部样式表 写在页面内部 专门的style标签里
body里添加 id="id名" 并在style里用“#id名{}” 链接 （id名不能重复）
外部样式表 写在单独的CSS里（创建的文件夹格式也是CSS） 其写法类似内部样式（无<style></style>）
head里通过link引入 <link href="样式表的地址" rel="stylesheet" /> （link引入通常这样）
border 边框（集合样式）：
例如：border:3px solid yellow;
边框三要素：（无关顺序）
border-width 边框宽度
border-top-width
border-bottom-width ------可分开
border-left-width
border-right-width
border-style 边框样式 “solid”-实线 “dashed”-虚线 “dotted”-点线（介于实线与虚线之间）
border-top-style
border-bottom-style
border-left-style ------可分开
border-right-style
border-color 边框颜色（默认颜色为黑色）
border-top-color
border-bottom-color
border-left-color ------可分开
border-right-color
例如 ：{border:3px solid #000;border-left:none;} 翻译：没有左边框
border-top
border-bottom
border-left
border-right
同一个元素两边边框相交的地方是斜线
边框本身是内容之外 所以加入边框时要注意width和height的数值
font 文字:
font-size 文字大小
font-weight 文字加粗：
bold 加粗
normal 不加粗
font-style 文字倾斜：
italic 倾斜
normal 不倾斜
font-family 字体
例如：font-family:"微软雅黑"; -----后面接字体名称
文本：
color 文字颜色（切记 不属于文字的属性）
text-indent 首行缩进（2个文字大小---2em ）
text-align 文本对齐方式（left/center/right 左/中/右）
text-decoration 文本修饰；
underline 下划线
overline 上划线
line-through 删除线
none 无
line-height 行高（文字在一行 上下居中）
letter-spacing 字母间距（字间距、字符间距）
word-spacing 词间距
注意：
每个字后面系统默认空出一个像素
字体不同 “空格”所占字间距也不同
padding 内填充（内边距）：
padding-top
padding-right
padding-bottom
padding-left
padding在元素的边框以内 内容之外 并且能显示元素的背景
当padding复合时 如果有：
1个数值--上下左右均是
2个数值--上下|左右
3个数值--上|左右|下
4个数值--顺时针顺序
margin 外填充（外边距）：
margin-top
margin-right
margin-bottom
margin-left
当margin复合时 ：
auto--自动
1个数值--上下左右均是
2个数值--上下|左右
3个数值--上|左右|下
4个数值--顺时针顺序--上|右|下|左
margin在元素的边框之外 并且不显示元素背景
margin重叠：相邻的两个元素的margin是“重叠”在一起的 重叠区域取最大值
margin传递：子元素的上下margin会传递给父级
a 链接（body中）：
例如：<a herf="http://www.baidu.com" target="_blank"></a>
herf=" "
网页地址 跳转页面
压缩包“XX.rar" 下载压缩包
锚点“id” 点击后直接跳转到id从在位置
target=""
_blank 新窗口打开
_self 当前窗口打开
注意：div可以相互嵌套 且同级的div是上下排的
a不可以相互嵌套 同级的a是左右排的
span可以相互嵌套 同级的a是左右排的
可视高度、可视宽度：所有元素的高度、宽度
路径问题：
绝对路径（直观）：
线上的绝对路径
线下的绝对路径
相对路径：从所建的HTML文件开始的路径（往下翻直接写路径名字 往上翻用../../XX.gif）
标签：（HTML5新增标签）
section 版块 用于划分页面上的不同区域,或者划分文章里不同的节
header 页面头部或者版块（section）头部
footer 页面底部或者（section）底部（用的少）
nav 导航 （包含链接的的一个列表）
article 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
aside 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
1，被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
2，在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
h1-h6 标题（大小依次减小 一般网页到h4）
ul 无序列表
ol 有序列表
li ul或者ol的列表项
dl 定义列表
dt 定义列表的项目
dd 对dt展开的描述扩展
p 段落
time 时间
em 强调一个词或者一段话
strong 强调一个词或者一段话
img 图片
常见选择符：
1、 id “#”
2、 class “.”
注意：id的名称不能重复 class的名称可以重复
3、“” 通配符 代表所有的标签
例如：{width:200px;height:50px;}
适用所有的标签
类型选择：
div{width:200px;height:50px;background:blue;}
p{width:100px;height:100px;background:yellow;}
注意：div和p前无任何链接符 表示body中所有的div/p类型的均使用
包含选择器：
<head>
<style>
#box p{width:100px;height:100px;background:yellow;}
</style>
</head>
<body> /注意：其中“#box p” 空格表示“的” 只改变p1 而不改变p2/
<div id="box">
<p>p1</p>
</div>
<p>p2</p>
</body>
群组选择器：
div,p{width:100px;height:100px;background:yellow;}
/* 注意：“，”表示div和p类型
“” 通配符 代表所有的标签
例如：{width:200px;height:50px;}
适用所有的标签
选择器优先级：
如果选择器的优先级一致 后边的样式会覆盖前边的
行间样式（body内） > id（#.XXX）> class（.XXX） > 类型选择（div/p）>通配符（*）
块和内嵌（div和span）：
块：
独占一行
支持所有样式
不设置宽度时 宽度撑满整行
内嵌：
可在一行显示
不支持宽高 对上下的margin和padding等样式也有问题
宽度由内容撑开
内嵌代码换行会被解析：
1、<span></span><span></span>
2、<span></span>
<span></span> 两种情况不一样 情况2效果会多一个空格
计量单位：
px 像素
em 1em=1个大小文字
复合样式（将所有的简单样式结合在一起）：
1.background:red url() no-repeat 100px 0px fixed;
2.border:3px solid yellow; background和border各属性之间空格隔开即可 且无顺序
3.注意： font:font-weight font-style font-size/line-height font-family;
必须按照以上顺序 且间隔符不能错 font复合样式成立最基本条件：font-size文字大小和font-family字体
