CSS - 快速指南

什么是CSS？

  • 优于 HTML 的样式- CSS 具有比 HTML 更广泛的属性，因此与 HTML 属性相比，您可以为 HTML 页面提供更好的外观。

  • 多设备兼容性- 样式表允许针对多种类型的设备优化内容。通过使用相同的 HTML 文档，可以为手持设备（例如 PDA 和手机）或打印呈现不同版本的网站。

  • 全球网络标准- 现在 HTML 属性已被弃用，建议使用 CSS。因此，最好开始在所有 HTML 页面中使用 CSS，以使它们兼容未来的浏览器。

谁创建和维护 CSS？

CSS 是由 W3C 内称为 CSS 工作组的一组人员创建和维护的。CSS 工作组创建称为规范的文档。当某个规范经过 W3C 成员的讨论并正式批准后，它就成为建议。

这些批准的规范称为建议，因为 W3C 无法控制该语言的实际实现。独立的公司和组织创建该软件。

注：万维网联盟（W3C）是一个就互联网如何工作以及如何发展提出建议的组织。

CSS 版本

级联样式表 1 级 (CSS1) 作为 W3C 于 1996 年 12 月提出的建议。该版本描述了 CSS 语言以及所有 HTML 标记的简单可视化格式化模型。

CSS2 于 1998 年 5 月成为 W3C 推荐标准，建立在 CSS1 的基础上。该版本增加了对特定媒体样式表的支持，例如打印机和听觉设备、可下载字体、元素定位和表格。

CSS - 语法

selector { property: value }
句法

示例- 您可以定义表格边框，如下所示 -

table{ border :1px solid #C00; }

这里的 table 是一个选择器，border 是一个属性，给定值1pxsolid #C00是该属性的值。

您可以根据您的舒适度以各种简单的方式定义选择器。让我一一列出这些选择器。

类型选择器

这与我们上面看到的选择器相同。再次，再举一个为所有 1 级标题赋予颜色的示例 -

h1 {
   color: #36CFFF; 
}

通用选择器

通用选择器不是选择特定类型的元素，而是简单地匹配任何元素类型的名称 -

* { 
   color: #000000; 
}

该规则将文档中每个元素的内容呈现为黑色。

后代选择器

假设您只想仅当特定元素位于特定元素内部时才将样式规则应用于该特定元素。如下例所示，只有当 <em> 元素位于 <ul> 标记内时，样式规则才会应用于该元素。

ul em {
   color: #000000; 
}

类别选择器

您可以根据元素的类属性定义样式规则。具有该类的所有元素都将根据定义的规则进行格式化。

.black {
   color: #000000; 
}

此规则将文档中类属性设置为黑色的每个元素的内容呈现为黑色。你可以让它更具体一点。例如 -

h1.black {
   color: #000000; 
}

此规则仅将 class 属性设置为 black 的 <h1> 元素的内容呈现为黑色。

您可以将多个类选择器应用于给定元素。考虑以下示例 -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

ID选择器

您可以根据元素的id属性定义样式规则。所有具有该id 的元素都将根据定义的规则进行格式化。

#black {
   color: #000000; 
}

此规则将文档中id属性设置为黑色的每个元素的内容呈现为黑色。你可以让它更具体一点。例如 -

h1#black {
   color: #000000; 
}

此规则仅将id属性设置为 black 的 <h1> 元素的内容呈现为黑色。

id选择器的真正威力在于它们被用作后代选择器的基础，例如 -

#black h2 {
   color: #000000; 
}

在此示例中，当所有 2 级标题位于id属性设置为black 的标签中时，这些标题将以黑色显示。

子选择器

您已经看到了后代选择器。还有一种类型的选择器，它与后代选择器非常相似，但具有不同的功能。考虑以下示例 -

body > p {
   color: #000000; 
}

如果所有段落是 <body> 元素的直接子元素，则此规则会将所有段落呈现为黑色。放置在其他元素（如 <div> 或 <td>）内的其他段落不会对此规则产生任何影响。

属性选择器

您还可以将样式应用于具有特定属性的 HTML 元素。下面的样式规则将匹配所有具有 type 属性且值为text的输入元素-

input[type = "text"] {
   color: #000000; 
}

此方法的优点是 <input type = "submit" /> 元素不受影响，并且颜色仅应用于所需的文本字段。

以下规则适用于属性选择器。

  • p[lang] - 选择具有lang属性的所有段落元素。

  • p[lang="fr"] - 选择lang属性值恰好为“fr”的所有段落元素。

  • p[lang~="fr"] - 选择lang属性包含单词“fr”的所有段落元素。

  • p[lang|="en"] - 选择lang属性包含恰好为“en”或以“en-”开头的值的所有段落元素。

多种样式规则

您可能需要为单个元素定义多个样式规则。您可以定义这些规则，将多个属性和相应的值组合到一个块中，如以下示例中所定义 -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

这里所有的属性和值对都用分号 (;)分隔。您可以将它们保留在单行或多行中。为了更好的可读性，我们将它们放在单独的行中。

暂时不要担心上面块中提到的属性。这些属性将在接下来的章节中进行解释，您可以在 CSS 参考中找到有关属性的完整详细信息

分组选择器

如果您愿意，您可以将样式应用于多个选择器。只需用逗号分隔选择器，如以下示例所示 -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

此定义样式规则也适用于 h1、h2 和 h3 元素。列表的顺序无关紧要。选择器中的所有元素都将应用相应的声明。

您可以将各种id选择器组合在一起，如下所示 -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

CSS - 包含

<head> <style type = "text/css" media = "all"> body { 背景颜色：亚麻；} h1 { 颜色：栗色；左边距：40px；} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>

它将产生以下结果 -

属性

与 <style> 元素关联的属性是 -

属性 价值 描述
类型 文本/CSS 将样式表语言指定为内容类型（MIME 类型）。这是必需的属性。
媒体

屏幕

终端

电视

投影

手持式

打印

盲文

听觉的

全部

 指定将显示文档的设备。默认值为全部。这是一个可选属性。

内联 CSS - style属性

您可以使用任何 HTML 元素的style属性来定义样式规则。这些规则将仅应用于该元素。这是通用语法 -

<element style = "...style rules....">

属性

属性 价值 描述
风格 风格规则 style属性的值是由分号 (;) 分隔的样式声明的组合。

例子

以下是基于上述语法的内联 CSS 示例 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

它将产生以下结果 -

外部 CSS - <link> 元素

<link> 元素可用于在 HTML 文档中包含外部样式表文件。

外部样式表是一个扩展名为.css 的单独文本文件。您可以在此文本文件中定义所有样式规则，然后可以使用 <link> 元素将此文件包含在任何 HTML 文档中。

以下是包含外部 CSS 文件的通用语法 -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

属性

与 <style> 元素关联的属性是 -

属性 价值 描述
类型 文本样式 将样式表语言指定为内容类型（MIME 类型）。该属性是必需的。
链接地址 网址 指定具有样式规则的样式表文件。该属性是必需的。
媒体

屏幕

终端

电视

投影

手持式

打印

盲文

听觉的

全部

 指定将显示文档的设备。默认值为全部。这是可选属性。

例子

考虑一个名为mystyle.css 的简单样式表文件，具有以下规则 -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

现在您可以将此文件mystyle.css包含在任何 HTML 文档中，如下所示 -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

导入的 CSS - @import 规则

@import 用于以类似于 <link> 元素的方式导入外部样式表。这是 @import 规则的通用语法。

<head>
   @import "URL";
</head>

这里的URL是具有样式规则的样式表文件的URL。您也可以使用另一种语法 -

<head>
   @import url("URL");
</head>

例子

以下示例向您展示如何将样式表文件导入 HTML 文档 -

<head>
   @import "mystyle.css";
</head>

CSS 规则覆盖

我们已经讨论了在 HTML 文档中包含样式表规则的四种方法。这是覆盖任何样式表规则的规则。

  • 任何内联样式表都具有最高优先级。因此，它将覆盖 <style>...</style> 标记中定义的任何规则或任何外部样式表文件中定义的规则。

  • <style>...</style> 标记中定义的任何规则都将覆盖任何外部样式表文件中定义的规则。

  • 外部样式表文件中定义的规则具有最低优先级，仅当上述两条规则不适用时，才会应用此文件中定义的规则。

处理旧浏览器

还有很多老浏览器不支持CSS。因此，在 HTML 文档中编写嵌入式 CSS 时我们应该小心。以下代码片段展示了如何使用注释标签对旧版浏览器隐藏 CSS -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSS 注释

很多时候，您可能需要在样式表块中添加额外的注释。因此，对样式表中的任何部分进行注释是非常容易的。您可以简单地将注释放入 /*.....这是样式表中的注释.....*/。

您可以使用 /* ....*/ 来注释多行块，就像在 C 和 C++ 编程语言中所做的那样。

例子

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

它将产生以下结果 -

CSS - 测量单位

% 将测量值定义为相对于另一个值（通常是封闭元素）的百分比。 p {字体大小：16pt; 行高：125%；}
厘米 定义以厘米为单位的测量值。 div {边距底部：2cm;}
嗯 以 em 空间表示的字体高度的相对测量值。因为 em 单位相当于给定字体的大小，所以如果将字体指定为 12pt，则每个“em”单位将为 12pt；因此，2em 将是 24pt。 p {字母间距：7em;}
前任 该值定义相对于字体 x 高度的测量值。x 高度由字体小写字母 x 的高度确定。 p {字体大小：24pt; 行高：3ex；}
在 定义以英寸为单位的测量值。 p {字间距：.15in;}
毫米 定义以毫米为单位的测量值。 p {字间距：15mm;}
个人电脑 定义以派卡为单位的测量。1pica相当于12点；因此，每英寸有 6 个派卡。 p {字体大小：20pc;}
点 定义以点为单位的测量。点定义为 1/72 英寸。 正文 {字体大小：18pt;}
像素 定义屏幕像素的测量值。 p {内边距：25px;}

CSS - 颜色

十六进制代码 #RRGGBB p{颜色:#FF0000;}
短十六进制代码 #RGB p{颜色：#6A7;}
RGB% rgb(rrr%,ggg%,bbb%) p{颜色:rgb(50%,50%,50%);}
RGB 绝对值 RGB（rrr，ggg，bbb） p{颜色:rgb(0,0,255);}
关键词 水绿色、黑色等 p{颜色：青色；}

这些格式将在以下部分中进行更详细的解释 -

CSS 颜色 - 十六进制代码

十六进制是颜色的 6 位表示形式。前两位（RR）代表红色值，接下来两位是绿色值（GG），最后一位是蓝色值（BB）。

十六进制是颜色的 6 位表示形式。前两位（RR）代表红色值，接下来两位是绿色值（GG），最后一位是蓝色值（BB）。

十六进制值可以从任何图形软件（如 Adob​​e Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush）获取。

每个十六进制代码前面都会有一个井号或井号“#”。以下是使用十六进制表示法的示例。

颜色 颜色十六进制
  #000000
  #FF0000
  #00FF00
  #0000FF
  #FFFF00
  #00FFFF
  #FF00FF
  #C0C0C0
  #FFFFFF

CSS 颜色 - 短十六进制代码

这是六位数字表示法的较短形式。在这种格式中，每个数字都会被复制以得到等效的六位数字值。例如：#6A7 变为#66AA77。

十六进制值可以从任何图形软件（如 Adob​​e Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush）获取。

每个十六进制代码前面都会有一个井号或井号“#”。以下是使用十六进制表示法的示例。

颜色 颜色十六进制
  #000
  #F00
  #0F0
  #0FF
  #FF0
  #0FF
  #F0F
  #FFF

CSS 颜色 - RGB 值

该颜色值是使用rgb( )属性指定的。该属性采用三个值，红色、绿色和蓝色各一个。该值可以是 0 到 255 之间的整数或百分比。

注意- 所有浏览器都不支持颜色的 rgb() 属性，因此建议不要使用它。

以下是使用 RGB 值显示几种颜色的示例。

颜色 颜色 RGB
  RGB(0,0,0)
  RGB(255,0,0)
  RGB(0,255,0)
  RGB(0,0,255)
  RGB(255,255,0)
  RGB(0,255,255)
  RGB(255,0,255)
  RGB(192,192,192)
  RGB(255,255,255)

建筑颜色代码

您可以使用我们的颜色代码生成器构建数百万个颜色代码。检查我们的HTML 颜色代码生成器。要使用此工具，您需要一个支持 Java 的浏览器。

浏览器安全颜色

以下是 216 种颜色的列表，它们被认为是最安全且与计算机无关的颜色。这些颜色从十六进制代码 000000 到 FFFFFF 不等。这些颜色可以安全使用，因为它们确保所有计算机在运行 256 调色板时都能正确显示颜色 -

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00中交建 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33中国交建 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66中交集团 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 中交建33 CCCC66 中交99 中交建 中国文化艺术节
CCFF00 CCFF33 CCFF66 CCFF99 中国CFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 联邦商会联合会 联邦金融与金融中心
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CSS - 背景

设置背景颜色

以下示例演示了如何设置元素的背景颜色。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

这将产生以下结果 -

设置背景图片

我们可以通过调用本地存储的图像来设置背景图像，如下所示 -

现场演示 
<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

它将产生以下结果 -

重复背景图像

以下示例演示了如果图像较小，如何重复背景图像。如果您不想重复图像，则可以对background-repeat属性使用no-repeat值，在这种情况下图像将仅显示一次。

默认情况下，background-repeat属性将具有重复值。

现场演示 
<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下结果 -

以下示例演示了如何垂直重复背景图像。

现场演示 
<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下结果 -

以下示例演示如何水平重复背景图像。

现场演示 
<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下结果 -

设置背景图像位置

下面的示例演示如何将背景图像位置设置为距左侧 100 像素。

现场演示 
<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下结果 -

下面的示例演示如何将背景图像位置设置为距左侧 100 像素、距顶部向下 200 像素。

现场演示 
<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下结果 -

设置背景附件

背景附件确定背景图像是固定的还是与页面的其余部分一起滚动。

下面的例子演示了如何设置固定背景图片。

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

它将产生以下结果 -

下面的例子演示了如何设置滚动背景图片。

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

它将产生以下结果 -

速记属性

您可以使用背景属性一次设置所有背景属性。例如 -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

CSS - 字体

设置字体系列

以下示例演示了如何设置元素的字体系列。可能的值可以是任何字体系列名称。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体样式

以下示例演示了如何设置元素的字体样式。可能的值为正常、斜体和倾斜。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体变体

以下示例演示如何设置元素的字体变体。可能的值为正常值和小型大写字母。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体粗细

以下示例演示了如何设置元素的字体粗细。font-weight 属性提供指定字体粗细程度的功能。可能的值可以是normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体大小

以下示例演示了如何设置元素的字体大小。font-size 属性用于控制字体的大小。可能的值可以是xx-small、x-small、small、medium、large、x-large、xx-large、更小、更大、以像素为单位或以 % 为单位的大小。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体大小调整

下面的例子演示了如何设置元素的字体大小调整。此属性使您能够调整 x 高度以使字体更清晰。可能的值可以是任何数字。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

这将产生以下结果 -

设置字体拉伸

以下示例演示如何设置元素的字体拉伸。此属性依赖于用户的计算机是否具有所使用字体的扩展或压缩版本。

可能的值可以是正常、更宽、更窄、超压缩、超压缩、压缩、半压缩、半扩展、扩展、额外扩展、超扩展。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

这将产生以下结果 -

速记属性

您可以使用字体属性一次设置所有字体属性。例如 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

这将产生以下结果 -

CSS - 文本

  • text-decoration属性用于为文本添加下划线、上划线和删除线。

  • text -transform属性用于将文本大写或将文本转换为大写或小写字母。

  • 空白属性用于控制文本的流动和格式。

  • text-shadow属性用于设置文本周围的文本阴影。

设置文本颜色

下面的例子演示了如何设置文本颜色。可能的值可以是任何有效格式的任何颜色名称。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

它将产生以下结果 -

设置文本方向

以下示例演示如何设置文本的方向。可能的值为ltr 或 rtl。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

它将产生以下结果 -

设置字符之间的间距

下面的例子演示了如何设置字符之间的间距。可能的值是正常值或指定空格的数字。。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

它将产生以下结果 -

设置单词之间的间距

下面的例子演示了如何设置单词之间的间距。可能的值为普通值或指定 space 的数字。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

这将产生以下结果 -

设置文本缩进

以下示例演示如何缩进段落的第一行。可能的值为% 或指定缩进空间的数字。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

它将产生以下结果 -

设置文本对齐方式

以下示例演示了如何对齐文本。可能的值为left、right、center、justify。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

这将产生以下结果 -

装饰文本

以下示例演示了如何装饰文本。可能的值为none、underline、overline、line-through、blink。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

这将产生以下结果 -

设置文本大小写

以下示例演示如何设置文本的大小写。可能的值为none、capitalize、uppercase、lowercase。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

这将产生以下结果 -

设置文本之间的空白

以下示例演示了如何处理元素内的空白。可能的值为normal、pre、nowrap。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

这将产生以下结果 -

设置文本阴影

以下示例演示如何设置文本周围的阴影。这可能不受所有浏览器的支持。

现场演示 
<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

它将产生以下结果 -

CSS - 使用图像

图像边框属性

图像的border属性用于设置图像边框的宽度。该属性的值可以是长度或百分比。

零像素宽度意味着没有边框。

这是例子 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

它将产生以下结果 -

图像高度属性

图像的height属性用于设置图像的高度。该属性的值可以是长度或百分比。虽然以百分比形式给出值，但它会将其应用于图像可用的框。

这是一个例子 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

它将产生以下结果 -

图像宽度属性

图像的宽度属性用于设置图像的宽度。该属性的值可以是长度或百分比。虽然以百分比形式给出值，但它会将其应用于图像可用的框。

这是一个例子 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

它将产生以下结果 -

-moz-opacity 属性

图像的-moz-opacity属性用于设置图像的不透明度。该属性用于在 Mozilla 中创建透明图像。IE使用filter:alpha(opacity=x)来创建透明图像。

在 Mozilla (-moz-opacity:x) 中，x 可以是 0.0 - 1.0 之间的值。较低的值使元素更加透明（CSS3 有效语法 opacity:x 也是如此）。

在 IE (filter:alpha(opacity=x)) 中，x 可以是 0 - 100 之间的值。较低的值使元素更加透明。

这是一个例子 -

现场演示 
<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

它将产生以下结果 -

CSS - 链接

我们