CSS基础入门:什么是CSS

绝地灬酷狼 2024-04-01 11:18 25阅读 0赞

网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？一口气说这么多，只是想说，CSS---层叠样式单可以助你一臂之力！  
  
CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。  
  
在谈样式表前，我想先谈一下HTML标志与标志属性。  
  
如果你学了网络学堂的HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好</h2>,一个是<h2>HaoTian 的个人图书馆欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下:  
  
  
这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必须熟悉这些属性。  
  
为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。  
  
在建立样式表之前，我们必须要具体一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。  
  
样式表基本语法：  
  
HTML 标志 \{ 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… \}  
  
放置样式表有内联和外联等三种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。  
  
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到 < HEAD> 和 < /HEAD> 中去。  
  
例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下：  
  
< HTML>  
  
< HEAD>  
  
< TITLE>This is a CSS samples< /TITLE>  
  
< STYLE TYPE="text/css">  
  
< !--  
  
H1 \{ color: blue \}  
  
\-->  
  
< /STYLE>  
  
< /HEAD>  
  
< BODY>  
  
... 页面内容…  
  
< /BODY>  
  
< /HTML>  
  
注意， < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS1 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。  
  
在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、1 号标题字显示为红色，按照上面介绍的方法应书写为：  
  
B \{ color: red\}  
  
I \{ color: red\}  
  
H1 \{ color: red\}  
  
显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，我们可以写成：  
  
B,I,H1 \{color: red\}  
  
用逗号分隔各个 HTML 标志，把三行代码合并成一行。  
  
此外，同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：  
  
H1,H2,H3,H4,H5,H6 \{  
  
color: red;  
  
text-decoration: underline;  
  
font-family: " 黑体 "  
  
\}  
  
注意各个标志属性之间用分号隔开。  
  
如何建立样式表  
  
样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：  
  
HTML标志\{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...\}  
  
下面我们分别讲述：  
  
．HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>。  
  
.标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。  
  
下面看一个具体的例子，比如我们对一个段落建立一个样式表：  
  
P\{background-color:\#0000ff;font-size:12pt;color:\#ffff00\}，效果如下  
  
HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；HaoTian 的个人图书欢迎你；  
  
上面我们分别设置了背景色，字体大小，以及字体颜色等。  
  
为了看起来直观一些，上边的例子还可以写成:  
  
P\{background-color:\#0000ff；  
  
font-size:12pt；  
  
color:\#ffff00\}  
  
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,  
  
如:H2\{font-size:15pt；  
  
font-family:"宋体"；  
  
font-style:italic \}  
  
可直接用 H2\{font:15pt 宋体 italic\}来表示，类似的情况还有关于背景方面的设置，在以后的章节中我们会一一详细讲解的。

来源：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[Link 1]: https://www.weidianyuedu.com