css的基本概念(css的主要思想)

发布网友 发布时间：2024-09-27 05:51

我来回答

共1个回答

热心网友 时间：2024-10-05 11:26

CSS（CascadingStyleSheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制Web页面的外观。

通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。

样式存储在样式表中，通常放在head部分或存储在外部CSS文件中。

作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

CSS有各种版本（即Level），所以知道要使用哪个版本是很重要的。

CSS1在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、空白边。

CSS2在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。

在编写本书时，CSS2仍然是CSS的最新版本，尽管它早在1998年就已经成为推荐标准。

万维网联盟（W3C）的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，CSS3被分割成模块，这些模块可以独立发布和实现。

CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，但是，选择器模块最接近于完成，可能在2006年成为推荐标准。

因为预期从CSS2到CSS3的发布之间时间会很长，2002年人们启动了CSS2.1的开发。

这是CSS2的修订版，它计划纠正一些错误，并且更精确地描述CSS的浏览器实现。

CSS2.1正在逐渐接近完成，但是可能在2006年年底之前无法实现，然而，它更准确地反映了CSS当前的状态。

层叠样式表解决了一个普遍的问题

HTML标签原本被设计为用于定义文档内容。

通过使用h1、p、table这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。

同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape和InterExplorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

层叠式表的特点

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

层叠样式表极大地提高了工作效率

样式表定义如何显示HTML元素，就像HTML3.2的字体标签和颜色属性所起的作用那样。

样式通常保存在外部的.css文件中。

通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。

作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。

如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

[1]

编辑本段CSS历史

1994年哈坤·利提出了CSS的最初建议；伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。

在CSS中，一个文件的样式可以从其他的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继承，或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。

当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。

哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。

1996年底，CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。

这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。

到2007年为止，第三版还未完备。

编辑本段使用CSS布局的优点

采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：

1：表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

这样的页面对搜索引擎更加友好。

2：提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

浏览器就不用去编译大量冗长的标签。

3：易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

4:使用CSS布局更符合现在的W3C标准.

ps：W3C组织并不是ISO国际标准组织成员

编辑本段感性体验CSS

什么是CSS呢？你可能急迫的想知道答案。

但是空泛的文字描述意义不大，让我们先来一点感性体验吧。

是一个普普通通的网页。

然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页。

这还不是全部，不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页：

什么是CSS

*CSS是CascadingStyleSheets(层叠样式表)的简称.*CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

CSS的作用

*在标准网页设计中CSS负责网页内容(XHTML)的表现.*CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.*可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.*CSS是由W3C的CSS工作组产生和维护的。

为什么叫层叠？在页面显示的过程中，有很多的样式作用在页面元素上，这些样式来自不同的地方。

浏览器自己有默认的样式，网页作者有自己写的样式，用户也可能有自己的样式，但是最终显示的样式是其中之一，它们之间产生了冲突，CSS通过一个称为层叠（cascade）的过程处理这种冲突。

层叠给每个规则分配一个重要度：作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。

为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。

因此，层叠采用以下重要度次序：标为!important的用户样式标为!important的作者样式作者样式用户样式浏览器/用户代理应用的样式。

然后，根据选择器的特殊性决定规则的次序。

具有更特殊选择器的规则优先于具有比较一般的选择器的规则。

如果两个规则的特殊性相同，那么后定义的规则优先。

由此可见，层叠是指不同的优先级的构成的层的叠加。

编辑本段如何将样式表加入到网页

可以用以下四种方式将样式表加入您的网页。

而最接近目标的样式定义优先权越高。

高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

例外请参阅!important声明。

定义内部样式块对象

你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。

定义方式请参阅样式表语法。

示例如下：headtitle文档标题/titlestyletype=text/css!--body{font:10pt"Arial"}h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon}h2{font:13pt/15pt"Arial";font-weight:bold;color:blue}p{font:10pt/12pt"Arial";color:black}--/style/headbody正文内容/body/请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

内联定义(InlineStyles)

CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等；更加入了重叠文字、区块变化及任意位置放置等多页新属性。通过CSS可以使用更丰富、更灵活的样式，更简单设计出更美观的网页。

CSS是用来扩展HTML的，而不是用来替代HTML的。也就是CSS离不开HTML，他只是一项辅助工具。

到这里可以了解完整的CSS技术内容与发展现状：

CSS的特点：

除了可扩展HTML的样式设定外，CSS还提供了多项新特点，让网页的设计与维护更有效率：

1、减少图形文件的使用

很多网页为求设计效果，而大量使用图形，以致网页的下载速度变得很慢。CSS提供了很多的文字样式设定，且再加上IE%内建的滤镜特效，因此可轻松取代原来图形才能表现的视觉效果。这样的设计方式以仅让修改网页内容变得更方便，也大大提高下载速度。

2、集中管理样式信息

CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改

3、共享样式设定

网页的样式设定和内容分离的好处，除了可集中管理外，如果进一步将CSS样式信息存成独立的文件，还可让多个网页文件共同使用它这样，可省却在每一个网页文件中重复设定的麻烦。

4、将样式分类使用

相对于多份HTML文件可套用同一个CSS样式文件，也可以在一份HTML网页文件上套用多个CSS样式文件。

css是什么用来干什么的

CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：

1：表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2：提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3：易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

4:使用CSS布局更符合现在的W3C标准.

参考资料：

一、CSS简介

CSS(CascadingStyleSheet)层叠样式表，它是用来美化页面的一种语言，之前提到的W3C规范中的“样式”。

作用：

1、美化界面。

2、页面布局。

基本语法：

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

。。。

选择器:是用来选择标签的，选出来以后给标签加样式。

从HelloWorld说起，

pstyle="background-color:#FFF;color:#000;font-size:30px;"HelloWorld!/p

这样写可以实现将原本的白底黑字HelloWorld!改成样式为黑底白字的效果。但是这样写有一定的缺点：

缺点1：内容、样式、行为三者未分离，代码糅杂，不符合W3C规范，难以维护。

缺点2：代码冗余，不可复用。

二、如何引入CSS？

1）行内样式

即上述的一般形式，由于其存在的缺点，介绍下一种样式。

2）内嵌样式，给p标签加样式，加在head标签中

styletype="text/css"

p{

background-color:#FFF;

color:#000;

font-size:30px;

}

/style

当本页面的p标签都需要相同的样式时，这样写大大降低了代码量，并让其他编程人员一眼分辨出来CSS样式。

3）链接样式（链入式）

在head标签中加入

linkhref="../css/my.css"type="text/css"rel="stylesheet"/

将CSS文件和html文件分开来放，这样增加了代码的重用性，但是每个浏览器都要单独读取css文件中的样式，比较慢，如果追求速度，内嵌样式会更好。

4）导入样式

styletype="text/css"

@importurl("路径名");

/style

四种样式的优先级：

如果一个页面中四种样式同时存在，这四种都会对标签起作用，但是重复样式的属性值，只有最后一个有效。如果内嵌样式和导入样式放在一起，则内嵌样式起作用。

如果内嵌样式和导入样式分成两个style定义，则在CSS样式中的最后一个style起作用。

附：css中注释的格式，没有单行注释，所有的注释均是/*注释内容*/

一、css是CascadingStyleSheets的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

二、HTML和CSS的区别?

1、定义不同：

html是HyperTextMark-upLanguage的缩写，即超文本标记语言；

css是CascadingStyleSheets的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

2、用途不同：

html则是用于文本内容，包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

css是多用于样式，主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。

3、CSS语法与HTML语法完全不同：

HTML里代码是功能标签，如DIV、SPAN、A链接、em标签、I斜体标签、u下划线等，html代码语法范例：div内容/div

CSS样式代码语法是div{样式单词：值}

三、HTML和CSS联系：

CSS与HTML相同之处在于，两个共同作用让网页实现需要的布局样式。

扩展资料：

1、标记符html,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而/html,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

2、CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

参考资料：百度百科-HTML

百度百科-CSS

CSS

释义一

CSS(CascadingStyleSheets)，即层叠样式表，与HTML超文本标记语言配合以定义网页表现的样式语言。

历史

当初一帮技术人员想出HTML，主要侧重于定义内容，比如p表示一个段落，h1表示标题，而并没有过多设计HTML的排版和界面效果。

随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。

CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。

CSS与网页的链接方法

内嵌样式(InlineStyle)

内部样式表(InternalStyleSheet)

外部样式表(ExternalStyleSheet)

内嵌样式(InlineStyle)

InlineStyle是写在Tag里面的。内嵌样式只对所在的Tag有效。

Pstyle="font-size:20pt;color:red"这个Style定义p/p里面的文字是20pt字体，字体颜色是红色。/p

显示示例

内部样式表(InternalStyleSheet)

内部样式表是写在HTML的head/head里面的。内部样式表只对所在的网页有效。

HTML

HEAD

STYLEtype="text/css"

H1.mylayout{border-width:1;border:solid;text-align:center;color:red}

/STYLE

/HEAD

BODY

H1class="mylayout"这个标题使用了Style。/H1

H1这个标题没有使用Style。/H1

/BODY

/HTML

显示示例

内部样式表(InternalSytleSheet)要用到Style这个Tag，写法如下：

STYLEtype="text/css"

......

/STYLE

外部样式表(ExternalStyleSheet)

如果很多网页需要用到同样的样式(Styles)，用什么方法呢？

将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

比如可以用文本编辑器(NotePad)建立一个叫home的文件，文件后缀不要用.txt，改成.css。文件内容如下：

H1.mylayout{border-width:1;border:solid;text-align:center;color:red}

然后你建立一个网页，代码如下：

HTML

HEAD

linkhref="../asdocs/css_tutorials/home.css"rel="stylesheet"type="text/css"

/HEAD

BODY

H1class="mylayout"这个标题使用了Style。/H1

H1这个标题没有使用Style。/H1

/BODY

/HTML

显示示例

使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：

样式代码可以复用。一个外部CSS文件，可以被很多网页共用。

便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。

提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。

解决css文件过大的问题

如果页面内容过多，css文件会很大，同样会造成很多不便，那么我们该如何解决这个问题呢？我们可以对每个细节进行css设计，比如对于字体的设置我们可以存入font.css文件，对边界等的设定我们可以存入lay.css文件，对其他一些版式的规定可以存入other.css文件，然后我们建立一个main.css文件，然后在里边写入如下代码：

@importurl(font.css);

@importurl(lay.css);

@importurl(other.css);

然后只需要在html文件里添上main.css的链接即可，这样子一方面减小了css文件的容量，另一方面似乎也更方便管理，特别是对大型网站。

串联(Cascading)

CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。

Cascading的顺序是：

浏览器缺省(browserdefault)(优先级最低)

外部样式表(ExtenalStyleSheet)

内部样式表(InternalStyleSheet)

内嵌样式表(InlineStyle)(优先级最高)

样式(Styles)的优先级依次是内嵌(inline),内部(internal),外部(external),浏览器缺省(browserdefault)。假设内嵌(Inline)样式中有font-