【前端开发4】什么是CSS?

《【前端开发4】什么是CSS?》由【贵阳网络推广_老吴博客】网于2016年12月28日整理发布
摘要

凡是你们能看到的元素基本上都是使用CSS层叠样式表来控制的,HTML相当于一个人的骨架结构,CSS就就相当于人的血肉和衣服

贵阳网络推广网站搭建,CSS

CSS“层叠样式表”的介绍

 

上节课我们简单的讲了什么是HTML超文本标记语言,今天我们接着讲CSS“层叠样式表”;我先来给大家解释一下什么叫“层叠样式表”,我们要结合网页,拿老吴的博客网站来示范请看下图;

贵阳网络推广网站搭建

大家可以发现我们的网页其实是由一个一个的“方块”组成的,每个“方块”都有内容的集合,这些“方块”他们的大小、位子、内容、有时候还包括颜色都可以是根据网站搭建者的需求去布局设计的,可以相同可以不同。

 

这些“方块”的启用则是用我们HTML代码里的91个标签去布局的,这些标签被称为块元素和内联元素,而这些块元素和内联元素都是“容器”标签,里面是可以放入对应内容的。老吴接着上节课的代码来为大家演示请看下图:

贵阳网络推广网站搭建

第一步,我们在body标签里面输入我们接触的第一个标签“<div></div>”标签,这个标签也是我们以后最常用到的块元素,接着在标签中间输入“这是一个方块”的文字,然后一定要ctrl+s保存当前代码内容。第二步,通过浏览器浏览效果

 

好,大家是不是和我一样,没看见方块只有文字,那是因为我们只制作了一个方块,但方块的大小、颜色都没有设置,所以在浏览器里看不见。那我们如何去体现方块在浏览器里出现呢?

既然是方块,就应该有方块的尺寸,即“宽”和“高”的尺寸。我们在对应“方块”的开头标签div后面空格打上style=”width:200px;height:300px;” 如上图第一步,style的意思就是样式,鸟叔有首歌叫做《江南style》就是这个style。而width 表示的是宽,height 是高,200/300后面的px 是表示像素,学过平面设计的搜知道像素是一种尺寸单位,和“米”、“厘米”一样的概念只不过PX是用在电脑显示器上的尺寸单位,所以以后我们做有关网页的尺寸都用PX为单位。ctrl+s保存当前代码内容。第二步,通过浏览器浏览效果。

 

我们这时候发现方块还没有出现,都设置宽高了为什么还是不显示呢?好,还记得有节课给大家介绍的一款浏览器插件“firebug”吗?现在我们就要用这个插件去查一下原因,安装完成后浏览器右上方会有个甲虫图标,点击或按“F12”键会出现插件显示框,请看下图;

 

“<div></div>”

 

第一步我们点击查看元素按钮,第二步把鼠标移动到对应的代码行上,这时候我们浏览器上方就会显示蓝色透明的方块了,好,这说明我们的方块其是存在的,只是还没有设置颜色去区分我们的视觉。怎么去设置呢?看下图;

贵阳网络推广网站搭建

第一步我们接着在尺寸命令右侧再给个背景颜色命令:background:red; red就是红色,ctrl+s保存当前代码内容。第二步,通过浏览器浏览效果。是不是就有一个红色方块出来了,这个就是我们用到的CSS层叠样式表。

 

  CSS层叠样式表的意思?css和html是什么关系?

 

层叠样式表的意思就是他可以把我们要设置的条件一个一个的叠在一起,这些条件共同组成了你对应的DIV(块元素)的样式体现。

 

总结一下,凡是你们能看到的元素基本上都是使用CSS层叠样式表来控制的,HTML相当于一个人的骨架结构,CSS就就相当于人的血肉和衣服。好的CSS我们就说到这,下节课我们介绍一下JavaScript(JS)的基本情况。

 

好,今天的分享就到这里,谢谢关注老吴博客一个专注网络推广营销的80后中年男人。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: