css笔记（一）初识css

来源：互联网发布：安卓c语言编辑器编辑：程序博客网时间：2024/06/07 01:54

1 简介

CSS指层叠样式表(Cascading Style Sheets)，定义如何显示 HTML 元素。样式可以规定在单个的 HTML 元素中(内联样式)，在 HTML 页的头元素中（内部样式），或在一个外部的 CSS 文件中（外部样式），可以在同一个 HTML 文档内部引用若干外部样式表，多个样式定义可层叠为一个虚拟的样式表，层叠规则为，内联样式>内部样式>外部样式>浏览器缺少设置样式。

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。

哈坤·利提于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，伯特·波斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。

1996年底，CSS初稿完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。

2015年CSS3正式发布（？）。

2 css结构

样式表由若干CSS 规则构成，CSS规则由选择器和声明体两部分构成，声明体由若干条声明构成，每条声明由一个属性和一个或多个值组成，如下：

选择器

{

声明;

...

声明;

}

其中声明的格式为：“属性：值 ;”或“属性：值1，值2，值3...;”,在第二种情况下，属性将先取第一个值，如失败，则依次取第二、第三、第n个值，如下例：

font-family:"TimesNew Roman",Georgia,Serif;

如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但加分号也可以，应养成每条声明加分号的习惯，可以多条声明共处一行。

是否包含空格不会影响 CSS 在浏览器的工作效果，但不要在属性值与单位之间留有空格，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

以下是一些例子：

h1{font-size:16px;color:red;}

p{color:#ffff00;}

p{color:#ff0;}

p{color:rgb(250,250,0);}

p{color:rgb(100%,100%,0%);}

当rgb的参数用百分数表示时，0必须表示为0%，而不能表示为0，但当0表示像素时，可不必表示为0px,可直接表示为0，但推荐仍表示为0px。

如果值为若干单词，则要给值加引号，如下例：

font-family:"TimesNew Roman",Georgia,Serif;

3 继承性

子元素从父元素继承属性，除非有样式表另有规定，但有些属性不能继承，如background-color,background-image等。

4 创建CSS

4.1 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部,如下例：

<head>

</head>

注:href即Hypertext Reference的缩写。意思是超文本引用。

在上例中，rel 属性用于指定当前文档与被链接文档的关系，

浏览器会从文件mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}

p {margin-left:20px;}

body{background-image: url("images/back40.gif");}

注：hr,即horizontal rule,水平分隔线

4.2 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>

hr {color:sienna;}

p{margin-left: 20px;}

body{background-image: url("images/back40.gif");}

</style>

</head>

4.3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

This is aparagraph

</p>

阅读全文

0 0