何为css?先引用一段官方的表述:级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
初学的同学可能看的比较晕下面我就通过一个例子来解释什么是css.
<html>
<head>
<title>何为css</title>
<style type="text/css">
/*
#three就是一个样式集合(体现了级联样式表中样式这一词style),而第三个h1标签就运用了这个样式
所以第三个标签中就文字的颜色为黄色,大小为20px。
下面第三个h1标签中的id="three"便是体现了级联Cascading这一词
id="three" 将three这一样式联到了h1这一标签上,可控制里面文字的颜色,大小。
所以光有样式没有级联,光有级联没有样式 都不能使标签里的内容表现出你想要的形式。
级联与样式密不可分,只有级联与样式都有才能使运用样式的标签中的内容表现出你想要的形式
*/
#three{
color:yellow; /*这里设置此样式里文字的颜色*/
font-size:20px; /*这里设置此样式里文字的大小*/
}
</style>
</head>
<body>
<h1>何为css1</h1>
下面给css2加个颜色(红色)
<h1><font color="red">何为css2<font></h1>
接下来给h1标签加上属性
<h1 id="three">何为css3</h1>
</body>
<html>
从上面的例子可以看到#three{}就是一个样式的集合,里面设置了文字的大小,颜色。#three{}这段内容就体现了级联样式表中的样式这两字。id="three" 便将#three{}这个样式集合联到到了h1这个标签上使h1标签里的文字颜色为红色大小为20px,这样就体现了级联样式表中的级联两字。
为何要用css?
一样通过例子来阐述
<html>
<head>
<title>为何要用css</title>
<style type="text/css">
/*
为何要用css?
(1) HTML标签的外观样式比较单一
无CSS样式表网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一,为了弥补这个缺点,就需要使用CSS样式表来对HTML标签进行控制,从而实现更加丰富多彩的效果。
(2) 样式表的作用相当于华丽的衣服
同样的内容,采用不同的CSS样式文件,可以看到不同的布局和效果。从美工的角度来看,可以更容易地调整页面外观,调整页面里某个部分的文字或者图片等,从而实现复杂多变的页面效果,因此样式表相当于一个页面甚至一个网站的华丽的衣服.
(3) 样式表能实现内容与样式的分离,方便团队开发
由于当今社会竞争日趋激烈,分工越来越细,每个人做的事越来越单一,我们开发一个网站也不例外,往往需要美工和程序设计人员的配合,美工做样式,程序员写内容,为了迎合这种需要,就出现了样式表。样式表能把内容结构和格式控制相分离,使网页可以仅由内容构成,而将所有的网页格式通过CSS样式表文件来控制,从而方便美工和程序员分工协作、各司其职、各尽其能,为开发出优秀的网站提供了有力的保障通过定义CSS样式表,能让网页具有美观一致的界面,可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面,具有更好的易用性和扩展性,通过修改样式文件,能制作出内容相同,而外观不同的多姿多彩的页面。此外,使用样式表能有效地分离网页的内容与外观控制,从而便于美工与程序员之间的分工协作,发挥各自的优势。
*/
/*
下面有三个h1标签,现在我有个需求要改变三个标签中的字体颜色都为红色,按照以往的做法需要一个一个改变三个标签里的文字颜色,这样就需要改三次,重复劳动三次。
而运用一个css样式写一次样式便可以解决。
*/
h1{
color:red;/*这样三个h1标签中文字颜色都变为红色一次搞定,不需要重复劳动*/
}
</style>
</head>
<body>
<h1>何为css1</h1>
<h1>何为css2</h1>
<h1>何为css3</h1>
</body>
<html>