CSS样式表入门

来源：互联网发布：面板数据主成分分析法编辑：程序博客网时间：2024/05/16 11:28

CSS是英语Cascading Style Sheets的缩写，通常也叫做层叠样式表，是一种用来实现HTML或XML文件样式的计算机语言，主要用于定义网页外观。在Web开发时采用CSS技术，可以对页面布局、字体、颜色、背景和效果实现更加精确的控制。

一、样式表的描述部分都包含哪些内容：

代码1：

在代码1中展示了一个最简单的样式表应用，可以看出，样式表CCS的描述部分有选择器、属性和属性值组成：

<p sytle="color:red">中，p代表选择此段落应用样式，color就是指定显示的属性，red就是属性的值指定为红色。

二、样式的分类

根据样式代码的位置，主要可以分为三类：行内样式、内嵌样式和外部样式。

1、行内样式

如果希望某段文字和其他段落的文字显示风格不一样，可采用行内样式，如代码1中所示。

行内样式使用元素标签的style属性定义。一般定义网页的某一部分，应用于局部，局限于某个特定标签。如果希望网页内的所有同类标签都采用统一样式，该怎么办呢？

2、内嵌样式表

内嵌样式表是将样式定义放在HTML中，成为HTML的一部分。如代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> p{color:red;}</style></head><p> 字体是红色的<p>字体也是红色的<body></body></html

在内嵌样式表中，根据选择器的不同又可以分为：HTML选择器、类选择器和ID选择器。其中代码2就属于HTM选择器，它应用于该网页中所有<P>。

类选择器代码示例，代码3：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .Pcss{color:red;}</style></head><p class="Pcss"> 由于使用了类选择器，字体是红色的<p>该段落没有使用样式表，字体不是红色的<body></body></html>

ID选择器代码示例,代码4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #Pcss{color:red;}</style></head><p id="Pcss"> 由于使用了ID选择器，字体是红色的<p>该段落没有使用样式表，字体不是红色的<body></body></html>

类选择器和ID选择器的区别：从它们的名字上就很容易区别，学过面向对象和数据库的同学应该不会感到陌生，类是从很多的相似的事或物种抽象出来的一个东西，它代表的是一个整体，比如自行车和大象；id是数据库表中某一条记录区别与其他记录的唯一标志。在HTML文件中，一个id在一个页面中只能应用一次，而class则用于描述多次出现的元素。在样式表中，类选择器用于描述某一类HTML标签的展现形式，而ID选择器用于指定某一个HTML标签的展现形式。

3、外部样式

外部样式是将一些CSS规则定义在与当前网页不同的另外一个文件中，以.css结尾。根据样式文件与网页的关联方式，又分为链接和导入两种。

假定存在一个样式文件abc.css(并假设该css文件与html文件在同一目录下)。

链接（LINK）外部样式表：

<head>

<head>

导入（import）外部样式表：

<head>

<head>