之前给大家分享的是HTML的入门基础,从今天起,我给大家分享关于CSS的内容。CSS是什么?CSS,英文名词 Cascading Style Sheet,中文意思层叠样式表,是用来控制网页外观的技术。在前端技术中,HTML,CSS,JavaScript是最核心的三个元素。HTML控制网页的结构,CSS控制网页的外观,而JavaScript控制网页的行为。在网页发展的初期,网页仅仅使用HTML标签来制作,内容单调。CSS的出现就是为了改造HTML标签在浏览器展示的外观,使其更好看,更生动。CSS和CSS3?CSS3是CSS的升级版。CSS版本依次是CSS 1.0,CSS 2.0,CSS 2.1和CSS 3.0,其中CSS 2.1是CSS 2.0的修订版,而CSS 3.0是CSS的最新版本。CSS 3.0相对于CSS 2.0来说,新增了很多属性和方法,但是此次我给大家分享的主要内容是CSS 2.1。CSS的三种引用方式在HTML中,引入CSS共有三种方式,分别是外部样式表,内部样式表,内联样式表。1、外部样式表外部样式表是最理想的CSS引用方式,在实际开发中,为了提高网站的性能和维护性,一般都是使用外部样式表。所谓的外部样式表,就是把CSS代码单独放在一个文件中,然后通过HTML文档中link标签,导入样式表。语法:
示例代码:
link标签,是在head内部使用的,通过导入css文件,来达到代码分离的目的。2、内部样式表内部样式表,就是HTML代码和CSS代码在同一个文件中。css代码放在<style></style>标签内,并且把<stytle></style>放在<head>内部。语法:
对于内部样式表,css样式代码必须放在style标签内部,并且style放在head内部。3、内联样式表内联样式表,也是把HMTL和CSS代码放在一个文件中,但是不是放在<head>内部,而是通过<style>标签放置在HTML的各个元素标签内。语法:
大家注意观察,内联样式表直接对所在标签起作用,如果需要标签实现效果,需要针对每个标签都写css代码,容易造成冗余,维护css代码时还需要找到标签,这对于维护大型网站来说,工作量大,还容易出错。在HTML入门学习时,不建议大家使用Dreamweaver那种“点点点”的方式开发网页,该工具生成的网页代码均是使用的内联样式代码,后期维护起来非常麻烦,冗余较多,也不便于初学者理解。在实际开发中,我们都会使用外部样式表,这样代码分离,需要修改样式时,只需要修改css样式代码文件,网页就会自动产生效果,很方便。但是分享学习过程中,我会使用内部样式表的方式,因为这样CSS代码和HTML代码在同一个文件中,方便修改和测试。插一句,除了上面提到的三种引用方式,CSS还有一种@import方式,这种方式类似于外部样式表的调用,但是在实际开发中,极少用到@import方式,原因在于,@import方式先加载HTML后再加载CSS,link方式是先加载CSS后加载HTML,如果HTML先与CSS加载,网页的观感会非常差,影响用户体检,所以一般我们都是使用link方式。