前端学习三大内容：结构（html实现），样式(css实现)，行为(.js实现)
CSS
开发工具：sublime、dreamweaver等
css书写的三种方式：嵌入式、外链式、行内式
代码格式：
1、嵌入式：
<head>
<style type="text/css">
</style>
</head>
（style标签下可以写多种选择器代码：基本选择器、复合元素选择器、伪类选择器、属性选择器）
2、外链式：
<head>
<link rel="stylesheet" type="text/css" href=".css文件路径">
</head>
（.css文件下可以写多种选择器代码：基本选择器、复合元素选择器、伪类选择器、属性选择器）
3、行内式：
<body>
<h1 style="color: #f00;"> </h1>
</body>
(在想要的标签下用style="属性:值;"，不一定是h1，也可以是其他标签)
1、嵌入式：
<head>
<style type="text/css">
</style>
</head>
（style标签下可以写多种选择器代码：基本选择器、复合元素选择器、伪类选择器、属性选择器）
2、外链式：
<head>
<link rel="stylesheet" type="text/css" href=".css文件路径">
</head>
（.css文件下可以写多种选择器代码：基本选择器、复合元素选择器、伪类选择器、属性选择器）
3、行内式：
<body>
<h1 style="color: #f00;"> </h1>
</body>
(在想要的标签下用style="属性:值;"，不一定是h1，也可以是其他标签)
注释的用法：
1、在html中用<!--这里放注释内容-->
2、在css中用/*这里放注释内容*/
选择器：基本选择器、复合元素选择器、伪类选择器、属性选择器
格式：
1、基本选择器：通用选择器、标签选择器、类选择器、id选择器
1)通用选择器格式：*{属性:值;}
2)标签选择器格式：标签名{属性:值;}
3)类选择器格式：.class属性值{属性:值;}
4)ID选择器格式：#id属性值{属性:值;}
格式：
1、基本选择器：通用选择器、标签选择器、类选择器、id选择器
1)通用选择器格式：*{属性:值;}
2)标签选择器格式：标签名{属性:值;}
3)类选择器格式：.class属性值{属性:值;}
4)ID选择器格式：#id属性值{属性:值;}
2、复合元素选择器：多元素选择器、后代元素选择器、子元素选择器、相邻元素选择器
1)多元素选择器格式：选择器1,选择器2,选择器n{属性:值;}
2)后代元素选择器格式：E F{属性:值;}
3)子元素选择器格式：E > F{属性:值;}
4)相邻元素选择器格式：E + F{属性:值;}
1)多元素选择器格式：选择器1,选择器2,选择器n{属性:值;}
2)后代元素选择器格式：E F{属性:值;}
3)子元素选择器格式：E > F{属性:值;}
4)相邻元素选择器格式：E + F{属性:值;}
3、伪类选择器(针对<a></a>标签使用)
格式：（一定要按照顺序）
a:link{属性:值;}——(正常状态)
a:visited{属性:值;}——（被访问后的状态）
a:hover{属性:值;}——（鼠标悬停未按下左键时的状态）
a:active{属性:值;}——（鼠标悬停按下左键时的状态）
格式：（一定要按照顺序）
a:link{属性:值;}——(正常状态)
a:visited{属性:值;}——（被访问后的状态）
a:hover{属性:值;}——（鼠标悬停未按下左键时的状态）
a:active{属性:值;}——（鼠标悬停按下左键时的状态）
4、属性选择器
1、[属性]{}——匹配属性相同的所有元素
2、[属性="值"]{}——匹配属性等于值的元素
3、[属性^="值"]{}——匹配以指定值开头的所有元素
4、[属性$="值"]{}——匹配以指定值结尾的所有元素
5、[属性*="值"]{}——匹配包含指定元素值的所有元素
1、[属性]{}——匹配属性相同的所有元素
2、[属性="值"]{}——匹配属性等于值的元素
3、[属性^="值"]{}——匹配以指定值开头的所有元素
4、[属性$="值"]{}——匹配以指定值结尾的所有元素
5、[属性*="值"]{}——匹配包含指定元素值的所有元素
属性：
1、尺寸样式属性：（其他span标签不能设置宽、高，因为span为行内元素，只有块级元素可以设置宽、高）
height
width
2、文本属性：
color（文本颜色）
text-align（文本对齐方式）
text-decoration（文本修饰线：下划线、上划线）
text-transform（大小写转换或首字母大写）
line-height（文本行高）
text-indent（首行缩进）
letter-spacing（字符间距）
word-spacing（单词间距）
3、字体属性：
font-style（可以设置文本斜体（italic））
font-weight（文本加粗（bold））
font-size（文本大小）
font-family（文本字体：隶书、小篆等）
font(可以给文本设置多种属性，按照一定顺序：斜体（italic）、加粗（bold）、大小（单位px/em）、字体)
4、列表样式属性：
list-style-type（列表前项目符号类型：disc（实心圆）、square（实心小方块）、circle（空心圆））
list-style-position（列表项目符号放置位置：inside（里面）、outside（外面））
list-style-image（列表项目符号为图像：url(图像路径)）
list-style（列表可以声明多种属性，没有顺序（这一点和font不一样））
1、尺寸样式属性：（其他span标签不能设置宽、高，因为span为行内元素，只有块级元素可以设置宽、高）
height
width
2、文本属性：
color（文本颜色）
text-align（文本对齐方式）
text-decoration（文本修饰线：下划线、上划线）
text-transform（大小写转换或首字母大写）
line-height（文本行高）
text-indent（首行缩进）
letter-spacing（字符间距）
word-spacing（单词间距）
3、字体属性：
font-style（可以设置文本斜体（italic））
font-weight（文本加粗（bold））
font-size（文本大小）
font-family（文本字体：隶书、小篆等）
font(可以给文本设置多种属性，按照一定顺序：斜体（italic）、加粗（bold）、大小（单位px/em）、字体)
4、列表样式属性：
list-style-type（列表前项目符号类型：disc（实心圆）、square（实心小方块）、circle（空心圆））
list-style-position（列表项目符号放置位置：inside（里面）、outside（外面））
list-style-image（列表项目符号为图像：url(图像路径)）
list-style（列表可以声明多种属性，没有顺序（这一点和font不一样））
继承性：
行外元素可以改变样式，行内元素可以继承行外元素的样式，如果行内元素改变，则行外元素被行内元素覆盖。
行外元素可以改变样式，行内元素可以继承行外元素的样式，如果行内元素改变，则行外元素被行内元素覆盖。
优先级： 行内样式>id选择器>类选择器>标签选择器
对应权重值为1000；100；10；1（权重值越大，优先级越高）
!important属性：（可以改变属性的权重值，权重值为无穷大）
格式： 属性：值 !important;
一个标签可以有多个类名：可以减小css代码的书写量。
格式：class="属性值1 属性值2 属性值3"
背景样式属性：
background-image:设置背景图片
background-repeat:设置背景平铺
background-position:设置背景位置
background-attachment:设置背景是否固定
background:（可以设置多个背景属性，没有顺序）
标准文档流：遵循原则：从左至右，从上至下
浮动：（可以实现多个元素排成一行，并且可以设置宽度和高度）
（行内元素特性：多个元素排在一行
块级元素特性：可以设置宽高 ）
float:right;
float:left;
（行内元素特性：多个元素排在一行
块级元素特性：可以设置宽高 ）
float:right;
float:left;
去浮动：浮动会影响其他元素的排版布局，因此要去浮动，有3种方法。
1、给浮动元素的父元素设置固定的高度（这种方法一般不使用，会带来其他问题）
2、使用清除浮动样式属性—clear（在最后一个浮动样式下面新建一个div，div里面没有内容，一般格式clear：both；）
3、使用overflow：hidden（overflow的原意为隐藏溢出部分的内容，这里用于清除浮动，一般用于清除列表中的浮动）
1、给浮动元素的父元素设置固定的高度（这种方法一般不使用，会带来其他问题）
2、使用清除浮动样式属性—clear（在最后一个浮动样式下面新建一个div，div里面没有内容，一般格式clear：both；）
3、使用overflow：hidden（overflow的原意为隐藏溢出部分的内容，这里用于清除浮动，一般用于清除列表中的浮动）
盒模型：
width：内容的宽度
height：内容的高度（一般不设置）
border：边框
padding：内填充（padding-right、padding-left、padding-top、padding-bottom或者padding：上 右 下 左）
margin：外边距（与padding属性一样，左右值相等时margin实现盒子居中，text-align实现文本居中）
margin的塌陷现象：上下取最大的值，左右值可以叠加，浮动属性下，上下可以叠加，没有塌陷现象。
(要善于使用父元素的padding而不是子元素的margin)
border属性：
格式：border：粗细 线型 颜色（颜色不是必须的，默认颜色为黑色，其他两个必须设置，不然不会显示边框）
格式：border：粗细 线型 颜色（颜色不是必须的，默认颜色为黑色，其他两个必须设置，不然不会显示边框）
display属性：
格式：display：inline（行内）/block（块级）/none（无）
1、inline可以将块级元素设置为行内元素（行内元素有：span标签、a标签）
2、block可以将行内元素设置为块级元素
3、none可以将要显示的元素隐藏起来
固定定位：
格式：position：fixed;
left:表示离左边的距离
right:表示离右边的的距离
top:表示离上面的距离
bottom:表示离下面的距离
相对定位：（相对原来的自己的位置进行位置移动，可以覆盖标准文档流中的元素，我们把自己原来的位置称为坑，值可以为负数，一般不单独使用，常与绝对定位配合使用）
格式：position：relative；
left:表示离左边的距离
right:表示离右边的的距离
top:表示离上面的距离
bottom:表示离下面的距离
绝对定位：（如果其父元素没有设置定位属性，则继续找其祖父元素有没有设置定位元素，如果都没有设置定位属性则相对浏览器定位）
格式：position：absolute；
left:表示离左边的距离
right:表示离右边的的距离
top:表示离上面的距离
bottom:表示离下面的距离
z-index属性：（表示谁压盖着谁，数值越大的会压盖数值小的，没有单位，是一个整数，默认的数值为0）
（只有定位元素才有z-index，定位包括：固定定位、相对定位、绝对定位）
（如果都没有设置z-index值或者z-index值一样，那么写在html后面的元素就会压盖前面的元素）
格式：z-index：值
（只有定位元素才有z-index，定位包括：固定定位、相对定位、绝对定位）
（如果都没有设置z-index值或者z-index值一样，那么写在html后面的元素就会压盖前面的元素）
格式：z-index：值
结构伪类：css3中的新的选择器（css3=css2+新语法+新属性）
格式：E：first-child{属性：值；}——匹配第一个孩子
E：last-child{属性：值；}——匹配最后一个孩子
E：nth-child(n){属性：值；}——匹配第n个孩子
E：nth-child(2n)或(even){属性：值；}——匹配偶数的孩子
E：nth-child(2n+1)或（odd）{属性：值；}——匹配奇数的孩子
E：only-child{属性：值；}——只匹配一个孩子
格式：E：first-child{属性：值；}——匹配第一个孩子
E：last-child{属性：值；}——匹配最后一个孩子
E：nth-child(n){属性：值；}——匹配第n个孩子
E：nth-child(2n)或(even){属性：值；}——匹配偶数的孩子
E：nth-child(2n+1)或（odd）{属性：值；}——匹配奇数的孩子
E：only-child{属性：值；}——只匹配一个孩子
border-collapse属性：用来合并表格边框线
格式：border-collapse：collapse；
格式：border-collapse：collapse；
border-radius属性：圆角矩形
格式：border-radius:左上 右上 右下 左下；
格式：border-radius:左上 右上 右下 左下；
伪元素：也是一种选择器
格式：E：first-letter{属性：值；}——操作当前元素中的第一个字
E：first-line{属性：值；}——操作当前元素的第一行
E：：before{content:"文字"}——在当前元素的最前面插入文字
E：：after{content:"文字"}——在当前元素的最后面插入文字
格式：E：first-letter{属性：值；}——操作当前元素中的第一个字
E：first-line{属性：值；}——操作当前元素的第一行
E：：before{content:"文字"}——在当前元素的最前面插入文字
E：：after{content:"文字"}——在当前元素的最后面插入文字
文本阴影：（可以使用多组阴影，每组阴影之间使用"逗号"分隔）
格式：text-shadow：水平阴影 垂直阴影 阴影的距离(清晰度) 阴影颜色
（前两个必须要设置，后面两个非必须）
盒子阴影：（可以使用多组阴影，每组阴影之间使用"逗号"分隔）
格式：box-shadow：水平阴影 垂直阴影 阴影的距离(清晰度) 阴影大小 阴影颜色 阴影位置(默认外面)
格式：box-shadow：水平阴影 垂直阴影 阴影的距离(清晰度) 阴影大小 阴影颜色 阴影位置(默认外面)
透明度：rgba(红 绿 蓝 透明度) 透明度：0~1（0完全透明；1不透明）
音频：
格式：<audio src="音频地址" controls="controls"> </audio>
视频：
格式：<video src="视频地址" controls="controls"> </video>
（有些浏览器不支持一些格式的视频可以用ffmpeg进行视频转码）
word-wrap属性：文本可以换行
word-wrap：break-word;