层叠样式表，每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

1.行内式:行内式是在标记的style属性中设定CSS样式

3.链接式（推荐用这种方法): 将一个.css文件引入到HTML文件中

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F 
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F(只匹配一个）
E~f 弟弟选择器 E后面所有的兄弟F标签

分组：
不同的选择器用的样式相同时，用分组选择器来统一设置元素样式。
用逗号隔开 选择器1,选择器2{样式1：值1} #i1,p{color: red;}
嵌套：多种选择器可以混合起来使用
.c1 p {color: red;} .c1类内部所有p标签设置字体颜色为红色
div.c1 #d1~p

用于选取带有指定属性的元素
p[title] {color: red;} 元素选择器可省略
用于选取带有指定属性和值的元素

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的

选择器的优先级：
1.内联样式的权重为1000 <p style="color: gold">烽烟起 寻爱似浪淘沙</p>
2.id选择器的权重为100
3.类选择器的权重为10
4.元素选择器的权重为1
权重计算永不进位
权重：谁的权重大，浏览器就会显示谁的属性

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

margin: 用于控制元素与元素之间的距离；
padding: 用于控制内容与边框之间的距离
Border(边框): 围绕在内边距和内容外的边框
Content(内容): 盒子的内容，显示文本和图像

在CSS中，任何元素都可以浮动,浮动元素会生成一个块级框
left：向左浮动
right：向右浮动
none：默认值，不浮动
浮动的四大特性：
1.浮动的元素脱标：脱离了标准文档流,在页面中不占位置
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果:浮动的标签不会覆盖其他标签，但影响其布局
4.收缩的效果：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度
所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
只要要浮动就一定会有问题，造成父级塌陷

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值
.header-img {
 overflow: hidden;
 }

1.relative（相对定位）占位置 
作用： 1.父相子绝 2.微调元素
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物
2.absolute（绝对定位）：不占位置
设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高
设置为绝对定位的元素框从文档流完全删除，相当于漂了起来，并相对于最近的已定位祖先元素定位
父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，
子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置
3.固定定位：脱离标准流，不占位置
固定导航栏,使用Z-index
  

z—index控制哪个标签显示在最上面

在HTML语言中，所有的标记都必须用尖括号(即大于号“<”和小于号“>”)括起来，一般情况下，

1. 而alt属性，作用很大，多使用它可以增加搜索引擎的收录，因为搜索引擎是不能抓取图像的内容的，而这个alt属性指定的替换文字就是对该图片的说明，而搜索引擎是认识这个替换文字的。

   其实，这个alt属性最初设计出来，是针对那些不能显示图片的情况而设计的，就是一旦遇到种种原因图像显示不出来，那么这个替换文字可以起到一定的提示作用。

   这个img标记还有两个属性，分别为width和height属性，这两个属性用于控制网页中图片显示的宽度和高度，单位为像素或百分值。

   还有一些其他的不太常用的属性，我们也来学习一下吧：

   这两个属性用于图文混排的情况下使用，hspace用于指定图像的左右边距，vspace用于指定图像的上下边距，这个边距即是文字和图像之间相隔的距离，单位为像素。

   这个属性用于设置图像的边框，其取值只能为正整数，单位为像素。

   这个属性用于在图文混排的情况下设置图像与文本的对齐方式，分两种情况：

   这时，align的取值可以为

   另外，使用换行标记br的clear属性，可以将换行后的文本移到图像的下边。

   下面我们来写一个实例，看代码：

   <font face="宋体" color="teal">这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们

   一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧

   红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！<br>这里是百度贴吧红客吧，我们一直在努力做的更好，我们欢迎你的到来！

   我是不是嫖客，这里由我来给大家讲解一下HTML语言，嫖客多谢朋友们的支持！<br>我是不是嫖客，这里由我来给大家讲解一下HTML语言，嫖客多谢朋友们的支持！<br>我是不是嫖客，这里由我来给大家讲解一下HTML语言，嫖客多谢朋友们的支持！<br>我是不是嫖客，这里由我来给大家解一下HTML语言，嫖客多谢朋友们的支持！<br>我是不是嫖客，这里由我来给大家讲解一下HTML语言，嫖客多谢朋友们的支持！

   我们来看一下执行效果：

   由于图像太大，所以有些模糊，不过还是能看出效果的。

   OK,第十节课完美结束，朋友们看完课程以后多实践，自己琢磨着多写点代码出来，写写你就会了，不然记得不牢靠的。

   这几天有些不舒服，所以废话就不多说了，上节课我们使用img标记在网页中插入了图片，其实用这个标记还可以在网页中插入多媒体文件（就是视频）。

   在用img属性播放视频文件时，需要用到以下属性：

   1.    controls:使用这个选项后，如果有多媒体文件，则在网页中显示一套视频控件，即视频控制按钮。

   3.    start：指定何时开始播放文件，它的取值可以是fileopen（页面打开即播放），还可以是mouseover（鼠标置于上方播放）

   4.    loop：指定视频文件的播放次数，若想让其循环播放，则应将该属性值指定为infinite。

   另外需要说明的一点是，在这里也可以使用src属性，就是说dynsrc和src可以同时使用，这样做的意思是若计算机没有多媒体功能，则显示该图像，若有多媒体功能，不显示图像。

   从上边可以看出，虽然src和dynsrc可以同时使用，但它们之间存在一个优先级的问题，明显的，dynsrc的优先级高于src。

   下面我们还是来看代码吧：

   <!--插入了一条宽度为2，长度为整个页面80%的，颜色为浅蓝色的无阴影的水平线-->

   <!--这里我想让视频在页面中间播放，但img标记本身没有这个属性，所以用段落标记将其位置居中。-->

   我这里指定的是当鼠标放上去的时候播放，我们来看一下执行效果：

   OK，鼠标放上去即开始播放。

   今天就说到这了，朋友们明天见

   今天我们来说一下在HTML中插入滚动字幕和在网页中使用背景音乐。

   我们使用marquee标记来显示滚动文本，该标记具有下列属性：

   1.    align属性：指定字幕与周围文本的对齐方式，其取值可以是top（上对齐）、middle（中间对齐）、buttom（底部对齐）

   6.    hspace属性：指定字幕外部边缘与浏览器窗口之间的左右距离，以像素为单位，其值为整数。

   7.    vspace属性：指定字幕外边缘与浏览器上下边缘的距离，单位为像素

   8.    loop属性：指定字幕滚动的次数，这个属性的取值与上节课我们讲视频时那个loop属性相同。

   OK,这些就是字幕标记marquee的全部属性了，下面我们先别着急着看代码，我们再来说一下如何在网页中使用背景音乐，就是在网页打开的时候即播放音乐。

   用的标记为bgsound标记，需要注意的是，该标记只能放在我们的代码的head部分，bgsound属性具有下列属性：

   1.    balance属性：指定如何将声音分成左声道和右声道，取值为-1，默认值为0

   2.    loop属性：指定声音播放的次数，若值为0，则播放一次，若为-1，则循环播放，知道页面被卸载。

   好了，我们把marquee标记的标记和bgsound标记的标记全部说完了，下面我们来写一段代码，既播放字幕又配合着背景音乐。

   这里是百度红客吧，欢迎你的到来！

   我们来看一下执行效果：

   而在网页加载完的时候，我们指定的背景音乐已经开始播放了。

   好了，前面基础的终于说的差不多了，今天就说到这里吧，明天开始说表格的应用，朋友们，明天见。

   从今天开始，我们将一起接触到在HTML中很重要的一部分—表格的应用，因为几乎每个网页的布局都离不开表格的支持，所以，关于表格的内容异常重要，朋友们一定要多加练习才是。

   一个表格由表头、行、单元格组成，这些元素分别用不同的标记来定义，表格通过table定义，表头（即表格的标题）由caption来定义，行由tr来定义，单元格由td定义。

   今天我们就来创建一个基本的表格，看代码：

   我们来看一下执行效果：

   可以看到，页面中并没有一般表格都有的边框，但可以看出来，页面显示的内容是按照表格的布局来显示的，下面我来给table标记加上一个属性，即border属性，这个属性指定表格的边框粗细。

   即将上面的第7行代码修改为：

   修改后我们再来看一下执行效果：

   OK,这里已经可以非常明显的看出，这是一个表格了，大家看代码的时候对着我讲的那些标记一个一个对照，慢慢的你就会了，不要着急。

   好了，今天这节课就结束了，我是不是嫖客，朋友们明天再见。

   昨天我们初步接触了表格，今天我们就来学习一下表格标记table的各个属性，从而使我们获得对表格的更多控制，下面是table标记的属性：

   4.    border属性：这个属性我们在昨天已经接触过了，我们用它来指定表格的边框粗细

   6.    bordercolor属性：指定表格边框的颜色，如果没有指定边框的粗细，则不应该使用该属性

   7.    bordercolordark属性：指定3D边框的阴影大小，如果没有指定边框的粗细，则不应该使用该属性

   8.    bordercolorlight属性：指定3D边框的高亮显示颜色，如果没有指定边框的粗细，则不应该使用该属性

   9.    cellpadding属性：指定单元格内数据与单元格边框之间的距离，单位为像素

   总共10个属性，其实很多都是不常用的，从第6个往后的属性都不怎么常用（至少对我来说， ）

   下面我们来写一段代码：

   <!--我这里将表格的对齐方式设为中间对齐，表格宽度为页面宽度的80%，这个778是

   制作网页时的一般规范宽度，将表格的边框粗细设为1像素，并使用了3D边框，边框阴影颜色为灰色，高亮颜色为绿色，我这里没有用背景颜色，而是用了一个背景图像-->

   <!--这里的th标记跟td标记差不多，th标记为标题专用的标记，就是一般的单元格用td，标题单元格用th。-->

   下面我们来看一下执行效果：

   OK，朋友们一定要对照着课程把代码仔细的看看，然后一个字母一个字母的自己敲出来，不担心学不会。

   今天这节课结束，咱们明天见。

   扫一扫，回复“html”获取视频解答：
   

   感谢各位支持观看，有什么需要修改后台留言，会及时更新