CSS入门基础总结

一、CSS简介

CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。
HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为。
在网页初期,是没有CSS这回事的。那个时候的网页仅仅是用HTML标签来制作,这样可想而知是怎样的了?或者你可以这样理解,CSS的出现就是为了改造HTML标签在浏览器展示的外观,使其变得更加好看。如果没有CSS的出现,就不可能有现在“色彩缤纷”的页面。CSS的出现可以说就是为了改变表现单调、色彩惨淡的网页

二、CSS和CSS3

CSS和CSS3

CSS3是CSS的升级版本。CSS是从CSS1.0、CSS2.0、CSS2.1和CSS3.0这几个版本一直升级而来,其中CSS2.1是CSS2.0的修订版,CSS3.0是CSS的最新版本。
CSS3.0相对于CSS2.0来说,新增了很多属性和方法,最典型的就是你可以直接为文字设置阴影和为标签设置圆角。在CSS2.0中,为标签设置圆角是一件很头疼的事情。

三、在HTML中引入CSS共有3种方式:

(1)外部样式表;
(2)内部样式表;
(3)内联样式表;
1、CSS的3种引用方式

(1)外部样式表

外部样式表是最理想的CSS引用方式,在实际开发当中,为了提升网站的性能和维护性,一般都是使用外部样式表。所谓的“外部样式表”,就是把CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。
当样式需要被应用到多个页面时,外部样式表是最理想的选择。使用样式表,你就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义,并且在<head></head>标签对中使用link标签来引用。

举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
<html>
</pre>

(2)内部样式表

内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在<style></style>标签对内,并且<style></style>标签对是放在<head></head>标签对内的。

举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
#div{color:Green;}
</style>
</head>
<body>
<div></div>
</body>
</html></pre>

(3)内联样式表

内联样式表,也是把CSS代码和HTML代码放在同一个文件中,但是跟内部样式表不同,CSS样式不是在<style></style>标签对中定义,而是在标签的style属性中定义。

举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p style="color:Green; ">内联样式表</p>
<p style="color:Green; ">内联样式表</p>
<p style="color:Green; ">内联样式表</p>
</body>
</html>
</pre>

内联样式表和内部样式表中的例子,其实这两段代码实现的是同一个效果。三个p元素都定义了color属性,那么如果采用以下内部样式表,样式只需要写一遍;如果采用内联样式表,则三个p元素都要单独写一遍。对于网站来说,冗余代码很多,而且由于冗余代码多,每次改动CSS样式都要到具体的标签内修改,这样使得网站的维护性也非常差。

(4)CSS引用方式用途

在实际开发中,我们一般使用外部样式表,而在在线代码测试工具和CSS入门的过程中,我们使用的是内部样式表,因为代码量不是很多,HTML代码和CSS代码放在同一个文件,这样也方便我们修改和测试。不管是在测试或者实际开发中,我们都不建议使用内联样式表。不过呢,我们可以使用内联样式表进行细节的微调。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义H...
    静默丶阅读 5,775评论 30 95
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,672评论 0 30
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,242评论 0 40
  • 1. 小时候,老爸跟老妈相比,简直就是零存在感。 我们开口闭口就是:“妈,我饿了”“妈,我渴了”“妈,我衣服呢?”...
    雀痞仔阅读 374评论 6 1