seo代码入门之div+css

　　这节课给大家讲解html中的div+css，首先让我们去认识一下div+css，首先我们看一下抵押为标签div是一个html布局，标签也被称为虚荣气，它主要是用来实现网页布局和模块的添加的.例如我们打开一个网页，经常会看到DiV+css这样的布局好，我们现在打开桌面，我们打开这个文件夹，在这里面有一个index.html，我们右击选择打开方式，火狐浏览器打开。好打开这个网页以后，我们在空白的地方右击查看页面源代码，那在源代码里面我们就可以看到很独振这样的DiV，表示很多这样的div标签，而这些标签它并不是单独存在的，往往它是和谢S选择符放在一起去使用的，比如说ID选择符类选择符等等这样的css同时去使用的，所以我们经常会称为div+css主要是因为Div标签和css经常在一起使用。下面我们重点去了解一下css，我们先看一下css的概述。

　　第一个css，首先它指的是程蝶衣样式表，他的英文单词是开卡丁，是胎儿细致，这些样式主要是用来显示html元素的。通过上几节课的学习，我们都知道一个网页，他是有很多个html元素组成的，而css主要是用来定义这些html元素它的一个显示规则，这些样式通常是存储在样式表文件中，好，我们还是打开刚才这个文件夹，我们看到这有一个网页，那么这个网页打开以后，我们可以看到这个网页的风格，并且看到有一些字体是不一样的，有些字体是黑色的，而其他的字体是一些橙色的，那么这样的颜色以及它的背景颜色是如何实现的?

　　它就是通过文件夹里面的另一个文件，是它有点css这样的样式表文件去实现的好，我们继续往下面看，css的出现主要是解决网页内容与表现分离的问题的，之前的网页内容和分离是放在一块的，而现在把内容和表现进行分离了，也就是把内容和样式进行分离，这样的话如果我们想修改网页的内容，就直接在网页里面去修改内容，如果我们想修改样式，直接去修改它的css就可以了。

　　另外它把这些钥匙放在一个外部的样式表中，可以极大地提高我们的工作效率，下面我们去看一下css它产生的一个原因，现实的产生主要是用来取代之前网页中成就的表格布局技术，提高网页编辑和修改的效率。

　　我们之前的网页都是通过表格进行布局的，就像是我们使用office里面的word直接去插入一个表格，那么有多少个网页就需要插入多少个表格，如果我们想修改这些网页的风格的时候就需要一个网页一个网页去修改，里面的表格内容是非常复杂和麻烦的，而现在我们把样式统一储存在一个样式表当中，如果我们想修改网页的风格，只要去修改这个css的文件就可以做到这个网站里面所有网页的修改，这样可以极大地提高我们的网页编辑和修改效率。

　　所以总结来说，采用css这样的技术有以下几个优势

　　第一，可以让我们的网页布局更加清晰明了。

　　第二，可以更准确地去控制网页模块的样子。

　　第三，这样可以把我们的代码更加简化，可以加速我们网页的访问速度。

　　第四，更加有利于搜索引擎优化，所以你会发现现在大多数的网站都是采用的css技术，比如我们打开浏览器，我们打开魔贝课凡的官方论坛，www.moocfan.net，回车，在空白的地方右击查看页面源代码，在这里我们就可以看到很多这样的div的布局标签以及里面的样式ID和类选择符等等好，我们继续回来，下面我们就看一下线是在网页中他所扮演的角色。

　　我们目前的网页它有三大部分去组成的，这三部分分别是内容结构和表现，首先内容也就是我们网页中的文字图片音乐视频等等这样的信息，另外一个就是结构，主要包括我们网页中的段落标题列表等这样的网页框架，这些网页框架主要是由html标签就完成的，另外一个就是网页的表现。

　　网页的表现主要是用来控制网页的结构布局，也就是去控制html标签html元素，它的一个显示方式还有一个作用是控制内容的显示样式，比如说我们想修改网页里面的字体大小，网页字体的粗细网页中字体的颜色以及背景颜色等等都是网页的表现，那么这个网页的表现主要是通过我们现在所介绍的css技术去实现的好。

　　下面我们看一下西安30的一个语法结构，语法结构号这里一个图片给大家展示一下，这就是西S的一个语法结构好，下面给大家分析一下。

　　首先，第一个叫选择器，它主要是用来表明私家样式的对象，你要给这个网页里面的哪一个对象去私家样式，我们看到这个图片里面它是给H1文本标签去添加样式的，那么施加什么样的样式，它的所有的样式都是以声明的形式展现出来的，那么这些声明它是放在一个大括号里面，每一个声明包括一个属性和直属性，主要指的是给这个对象施加什么样的样式，比如说你要修改H1标签里面字体的颜色字体的大小等等这些都是属性，另外一个就是属性，后面跟着值。

　　你需要改变hr标签里面文字字体的颜色，那你就需要给它一个准确的值。

　　修改成什么样的颜色主要是指的属性的范围，比如说我们想修改它的颜色为红色，修改它的大小为14像素等等，这些都是它的值，这是一个声明的表示方法，那如果我们需要给这个对象私家多个样式的话，那我们就可以用英文的分号进行分隔，然后再写一个声明。

　　当然这个声明和第一个是一样的，也是包含属性和值，如果讲到这里，你还是不了解下H语法是什么，那么下面我再举一个通俗的例子给大家去理解，比如我们要需要去描述一个人的身高那怎么样去描述?

　　首先我们需要指明一下我们需要描述样式的对象，那这里对象就是人，然后写一个大括号，大括号里面去写上它的声明，那么第一个声明就是它的身高，身高就是它的属性，它身高有多高，后面就是它的值，比如说这里写的是175厘米，我们还可以描述这个人的体重，当然我们这两个属性都是描述的一个对象，所以我们可以把这两个样式都放在一个大括号里面，然后用英文的分号进行分割好，这就是css的语法结构，那么这一节课就给大家讲到这里，那么下一节课再见大家好，这里是魔贝课凡SEO培训这一节课，继续给大家讲解html中的divv+css，那么上一节课我们已经认识到div+css的概念以及它的语法格式，那么这一节课给大家演示一下css的属性应用。

　　首先我们看第一个文本修饰这里主要给大家演示一下修改字体的大小以及自己的颜色好。

　　首先，我们打开桌面双击打开DW好打开以后新建一个html文档，我们首先在body里面去输入一个H2标签，hr是我们学习的html标签，它代表的是一个文本标题标签，我们在这个hr标签里面去写上我们的内容，比如说我们这里去写上魔贝课凡SEO培训，写完以后点击文件保存我们这里保存到桌面保存完成以后，我们又击打开桌面，这里就是我们刚创建的一个html文本文件好。

　　我们现在又击选择打开方式，选择火狐浏览器打开，打开以后，我们就可以看到我们刚才所书写的一句话，魔贝课凡培训，现在我们看一下如何去修改它的字体大小。字体大小的属性是css，然后后面跟上它的值好，我们首先打开DW，我们的属性要写在黑的标签上面，这是一种内部引入方式，首先我们需要输入一个样式，标签输完以后，根据我们上一节课学到的css规则，如果我们想修改H2标签的它的属性，首先我们需要写上他的选择福，我们这里要给Hr样式，那么我们首先要写选择服务为hr，然后写成大括号，大括号里面去写上他的声明，那么在这里我们是需要修改它的字体大小，那这里我们就直接复制这一个属性和值。复制打开DW那在大括号里面进行粘贴，这个声明所代表的方xx就是它的字体大小的属性。

　　12px表明的是这个值的大小，复制完成以后点击文件保存，然后我们这个时候再打开浏览器刷新，你就会发现这个字体明显的变小了。那么打开DW，我们把这个持续调整，比如说我们调整为36像素，然后点击保存，再打开DW进行刷新，你就会发现这个字变大了。好，这个就可以修改文本的字体大小，我们再看第二个，如果我们想修改自己的颜色，那我们再添加一个声明复制我们上一节课讲过，如果需要对一个对象施加多个声明的话，我们就需要在每个声明中间用英文的分号进行分隔，然后在分号后面去粘贴另外一个声明，这个声明所代表的意思就是去修改这个文本的字体颜色修改。为什么样的颜色软的也就是红色好粘贴完成以后，点击文件保存，我们再次打开浏览器进行刷新，你就会发现魔贝课凡SEO培训这几个字已经变成了红色，这个就是文本修饰的一个演示，那我们继续往下面看修改网页的样式属性。

　　首先我们看第一个修改网页的背景颜色，我们在制作网站的时候往往有时候有这样的需要，我们需要修改这个网站的背景颜色，那么如何去修改?

　　首先我们打开DW，我们首先需要分析一下，我们现在需要修改的是整个网页的背景颜色，所以我们的私家样式的对象就是最大的一对标签，就是报的标签。那这样的话，我们就直接可以在样式里面去输入包的标签作为他的选择福，然后后面跟着大括号在大括号里面，我们去添加第一个声明背景颜色的修改我们复制这个证明复制在大括号里面进行粘贴好暂停以后，我们看一下这个声明，白果仁的看了指的就是背景颜色，叶楼是黄色的，背景颜色是它的值。好粘贴完成以后，我们点击文件保存，然后这个时候我们再次打开浏览器进行刷新，你就会发现背景颜色已经变成了一个黄色好，我们继续往下面看，下面一个属性是修改这个网页的背景图片好，我们还是复制的，一个声明右击复制，然后再多个声明，后面加了一个分号，在分号里面去粘贴，这个声明好暂停以后，这一个证明指的是白膜andM以及指的是背景图片，那后面就需要跟上这个图片的路径，在UI里面后面加一个括号括号里面去跟上这个图片的路径。好，现在我们打开桌面，在桌面这里我已经准备了一个背景图片，叫B机jPG，我们先看一下这个背景图片，好现在我们需要把这个背景图片作为我们的网页背景，我们右击重命名，然后去复制这个图片的名字，因为这个图片和我们的html文档在一个路径下面，所以我们通过直接去调用同等目录下面的B级点gp就可以找到他。

　　我们打开W，然后在这个括号里面直接右击粘贴这个背景图片的名字，然后点击文件保存好，这个时候我们再次打开浏览器进行刷新，你就会发现我们网页的背景图片已经变成了我们刚才所展示的图片好，这个就是修改背景颜色和背景图片的方法，那么关于css的演示这一节课就给大家讲到这里。

　　本文seo代码入门之div+css由SEO讲师团队原创编辑，微信号：MBKFSEO666；我们专注于 SEO线上培训，所以专业。