Css 简明教程
What is CSS?
-
Superior styles to HTML − CSS 拥有远比 HTML 更广泛的属性阵列，因此相比于 HTML 属性，您可以让您的 HTML 页面看起来好得多。
-
Multiple Device Compatibility − 样式表允许针对更多类型的设备优化内容。通过使用相同的 HTML 文档，可以针对手持设备（如 PDA 和手机）或打印呈现网站的不同版本。
-
Global web standards − 现在 HTML 属性正在弃用，并建议使用 CSS。所以，在所有 HTML 页面中开始使用 CSS 以使其与未来的浏览器兼容是一个好主意。
CSS - Syntax
selector { property: value }
Example − 您可以定义表格边框如下所示 −
table{ border :1px solid #C00; }这里表格是一个选择器，边界是一个属性，并且给定的值 1px solid #C00 是该属性的值。
您可以根据您的习惯以各种简单方式定义选择器。让我逐个介绍这些选择器。
The Universal Selectors
通用选择器不会选择特定类型，而是简单地匹配任何元素类型的名称 −
* {
color: #000000;
}此规则以黑色渲染我们文档中每个元素的内容。
The Descendant Selectors
假设您只希望在特定元素内部存在特定元素时才向该元素应用样式规则。如下例所示，样式规则仅在位于 <ul> 标记内部时才应用于 <em> 元素。
ul em {
color: #000000;
}The Class Selectors
您可以根据元素的 class 属性定义样式规则。 具有该类属性的所有元素都将按照定义的规则进行格式化。
.black {
color: #000000;
}对于我们文档中将 class 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −
h1.black {
color: #000000;
}对于仅将 class 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。
您可以向给定元素应用多个类选择器。 请考虑以下示例 −
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>The ID Selectors
您可以根据元素的 id 属性定义样式规则。 具有该 id 属性的所有元素都将按照定义的规则进行格式化。
#black {
color: #000000;
}对于我们文档中将 id 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −
h1#black {
color: #000000;
}对于仅将 id 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。
当 id 选择器用作后代选择器的基础时，它们具有真正的强大功能，例如 −
#black h2 {
color: #000000;
}在此示例中，当这些标题位于将 id 属性设置为 black 的标记内时，所有级别 2 标题都将显示为黑色。
The Child Selectors
您已经看到了后代选择器。 还有另一种选择器类型，它与后代非常相似，但具有不同的功能。 请考虑以下示例 −
body > p {
color: #000000;
}如果此规则是 <body> 元素的直接子元素，则此规则会将所有段落渲染为黑色。 放入其他元素（例如 <div> 或 <td>）中的其他段落不会受到此规则的任何影响。
The Attribute Selectors
您还可以向具有特定属性的 HTML 元素应用样式。 下面的样式规则将匹配具有值为 text 的 type 属性的所有输入元素 −
input[type = "text"] {
color: #000000;
}这种方法的优点是 <input type = "submit" /> 元素不受影响，且仅将颜色应用于所需的文本字段。
属性选择器应用以下规则。
-
p[lang] − 选择所有带有 lang 属性的段落元素。
-
p[lang="fr"] − 选择所有其 lang 属性的值exactly为 “fr” 的段落元素。
-
p[lang~="fr"] − 选择所有其 lang 属性包含单词 “fr” 的段落元素。
-
p[lang|="en"] − 选择所有其 lang 属性的值 exactly为 “en” 或以 “en-” 开头的段落元素。
Multiple Style Rules
您可能需要为单个元素定义多个样式规则。您可以定义这些规则来将多个属性和相应的值组合到一个块中，如以下示例中所定义 −
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}这里所有属性和值对都用 semicolon (;) 分隔。您可以将它们放在一行或多行中。为了更好的可读性，我们将其保存在单独的行中。
暂时不用理会上述代码块中提到的属性。这些属性将在接下来的章节中进行解释，您可以在 CSS 参考中找到有关属性的完整详细信息
Grouping Selectors
如果您愿意，可以将样式应用于许多选择器。只需用逗号分隔选择器，如下例所示 −
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 - Inclusion
它将产生以下结果 −
Inline CSS - The style Attribute
您可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则只适用于该元素。以下是通用语法 −
<element style = "...style rules....">External CSS - The <link> Element
<link> 元素可用于在 HTML 文档中包含外部样式表文件。
外部样式表是一个带 .css 扩展名的单独文本文件。您在此文本文件中定义所有样式规则，然后可以使用 <link> 元素将此文件包含在任何 HTML 文档中。
以下是在通用语法中包含外部 CSS 文件 −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Imported CSS - @import Rule
@import 用于以类似于 <link> 元素的方式导入外部样式表。以下是 @import 规则的通用语法。
<head>
@import "URL";
</head>这里 URL 是包含样式规则的样式表文件的 URL。您也可以使用另一种语法 −
<head>
@import url("URL");
</head>CSS Rules Overriding
我们讨论了在 HTML 文档中包含样式表规则的四种方法。以下是重写任何样式表规则的规则。
-
任何内联样式表优先级最高。因此，它将覆盖 <style>… </style> 标签中定义的任何规则或任何外部样式表文件中定义的规则。
-
在 <style>… </style> 标签中定义的任何规则将覆盖任何外部样式表文件中定义的规则。
-
外部样式表文件中定义的任何规则优先级最低，并且仅当以上两个规则不可应用时才会应用此文件中定义的规则。
Handling old Browsers
仍有许多旧浏览器不支持 CSS。因此，在 HTML 文档中编写嵌入式 CSS 时应注意。以下代码段展示了如何使用注释标记向较旧浏览器隐藏 CSS：
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>CSS - Colors
这些格式在以下部分中有更详细的解释：
CSS Colors - Hex Codes
十六进制数是一种包含 6 位数字的颜色表示形式。前两位数字 (RR) 表示红色值，后两位表示绿色值 (GG)，最后两位表示蓝色值 (BB)。
十六进制数是一种包含 6 位数字的颜色表示形式。前两位数字 (RR) 表示红色值，后两位表示绿色值 (GG)，最后两位表示蓝色值 (BB)。
十六进制值可以从任何图形软件获取，例如 Adobe Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush。
每个十六进制代码前面将加上磅号或井号“#”。以下是使用十六进制表示法的示例。
CSS Colors - Short Hex Codes
这是六位数字表示法的简短形式。在此格式中，会重复每个数字以得到等效的六位数字值。例如：#6A7 变为 #66AA77。
十六进制值可以从任何图形软件获取，例如 Adobe Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush。
每个十六进制代码前面将加上磅号或井号“#”。以下是使用十六进制表示法的示例。
CSS Colors - RGB Values
此颜色值使用 rgb( ) 属性指定。该属性采用三个值，分别对应红色、绿色和蓝色。该值可以是介于 0 到 255 之间的整数或百分比。
NOTE - 所有浏览器不支持颜色的 rgb() 属性，因此建议不要使用它。
以下是使用 RGB 值显示几种颜色的示例。
CSS - Backgrounds
Set the Background Color
以下是演示如何为某个元素设置背景颜色的示例。
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>这将生成以下结果：
Set the Background Image
我们可以通过调用本地存储的图像来设置背景图像，如下所示：
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>它将产生以下结果 −
Repeat the Background Image
以下示例展示了当图像很小的时候如何重复背景图像。如果您不想重复图像，您可以把背景重复属性设置为不重复，在这种情况下图像将只显示一次。
默认情况下，背景重复属性将重复该值。
<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>它将产生以下结果 −
Set the Background Image Position
以下示例展示了如何将背景图像位置设置为距离左侧 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>它将产生以下结果 −
Set the Background Attachment
背景附件确定背景图像是固定还是随着页面其余部分滚动。
以下示例展示了如何设置固定的背景图像。
<!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>它将产生以下结果 −
CSS - Fonts
Set the Font Family
以下是示例，展示了如何设置元素的字体系列。可能的值可以是任何字体系列名称。
<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>这将生成以下结果：
Set the Font Style
以下是示例，展示了如何设置元素的字体样式。可能的值是正常、斜体和倾斜。
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>这将生成以下结果：
Set the Font Variant
以下示例演示如何设置元素的字体变体。可能的值是正常和小写。
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>这将生成以下结果：
Set the Font Weight
以下示例演示如何设置元素的字体粗细。字体粗细属性提供指定字体粗细的功能。可能的值可以是正常、粗体、更粗、更细、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>这将生成以下结果：
Set the Font Size
以下示例演示如何设置元素的字体大小。字体大小属性用于控制字体的尺寸。可能的值可以是 xx 小、x 小、小、中、大、x 大、xx 大、小一点、大一点、以像素或百分比表示的大小。
<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>这将生成以下结果：
Set the Font Size Adjust
以下示例演示如何设置元素的字体大小调整。此属性允许您调整 x 高度以使字体更易读。可能的值可以是任意数字。
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>这将生成以下结果：
Set the Font Stretch
以下示例演示如何设置元素的字体拉伸。此属性依赖于用户的计算机是否具有所使用字体的扩展或压缩版本。
可能的值可以是正常、更宽、更窄、超压缩、超压缩、压缩、半压缩、半扩展、扩展、超扩展、超扩展。
<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>这将生成以下结果：
CSS - Text
-
text-decoration 属性用于对文本进行下划线、上划线和删除线操作。
-
text-transform 属性用于对文本进行大写处理或将文本转换为大写或小写字母。
-
white-space 属性用于控制文本的流向和格式。
-
text-shadow 属性用于在文本周围设置文本阴影。
Set the Text Color
以下示例演示了如何设置文本颜色。可能的值可以是任何有效格式中的任意颜色名称。
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>它将产生以下结果 −
Set the Text Direction
以下示例演示了如何设置文本的方向。可能的值为 ltr 或 rtl。
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>它将产生以下结果 −
Set the Space between Characters
以下示例演示了如何设置字符之间的间距。可能的值为 normal 或指定间距的数字。
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>它将产生以下结果 −
Set the Space between Words
以下示例演示了如何设置单词之间的间距。可能的值为 normal 或指定间距的数字。
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>这将生成以下结果：
Set the Text Indent
以下示例演示了如何缩进段落的第一行。可能的值包括 % 或指定缩进间距的数字。
<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>它将产生以下结果 −
Set the Text Alignment
以下示例演示了如何对齐文本。可能的值为 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>这将生成以下结果：
Decorating the Text
以下示例演示了如何装饰文本。可能的值包括 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>这将生成以下结果：
Set the Text Cases
以下示例演示了如何设置文本大小写。可能的值包括 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>这将生成以下结果：
CSS - Using Images
The Image Border Property
图像的 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>它将产生以下结果 −
The Image Height Property
图像的 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>它将产生以下结果 −
The Image Width Property
图像的宽度属性用于设置图像的宽度。此属性的值可以是长度值，也可以是百分比%。当提供百分比值时，它会根据图像所在框应用该值。
示例如下：
<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>它将产生以下结果 −
The -moz-opacity Property
图像的 -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 - Links
通常，所有这些属性都保存在 HTML 文档的头部部分。
记住，为了生效，a:hover 必须在 CSS 定义中位于 a:link 和 a:visited 之后。此外，a:active 必须在 CSS 定义中紧跟在 a:hover 之后，如下所示 −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>现在，我们将看到如何使用这些属性提供不同的超链接效果。
Set the Color of Links
以下示例演示如何设置链接颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>它将产生以下黑色链接 −
Set the Color of Visited Links
以下示例演示如何设置已访问链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>它将产生以下链接。单击此链接后，其颜色将变为绿色。
CSS - Tables
现在，我们将通过示例了解如何使用这些属性。
The border-collapse Property
此属性可以有两个值，即 collapsed 和 separate。以下示例同时使用了这两个值 −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>它将产生以下结果 −
The border-spacing Property
border-spacing 属性指定相邻单元格之间边框的间距。它可以使用一个或两个值；这些值应为长度单位。
如果您提供一个值，它将应用于垂直边框和水平边框。或者您可以指定两个值，在这种情况下，第一个值表示水平间距，第二个值表示垂直间距 −
NOTE - 不幸的是，此属性在 Netscape 7 或 IE 6 中不起作用。
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>现在让我们修改前一个示例并查看效果 −
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>它将产生以下结果 −
The caption-side Property
caption-side 属性允许您指定 <caption> 元素的内容应相对于表格放置在何处。下表列出了所有可能的值。
此属性可以有四个值之一：top、bottom、left 或 right。以下示例使用每个值。
NOTE - 这些属性可能无法与您的 IE 浏览器配合使用。
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>它将产生以下结果 −
The empty-cells Property
empty-cells 属性指示是否应显示不包含任何内容的单元格的边框。
此属性可以有三个值之一：show、hide 或 inherit。
此处使用 empty-cells 属性来隐藏 <table> 元素中空单元格的边框。
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>它将产生以下结果 −
The table-layout Property
table-layout 属性旨在帮助您控制浏览器应如何呈现或布局表格。
此属性可以有三个值之一：fixed、auto 或 inherit。
以下示例显示了这些属性之间的差异。
NOTE - 许多浏览器不支持此属性，因此不要依靠此属性。
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>它将产生以下结果 −
CSS - Borders
border-color 属性允许您更改包围元素的边框的颜色。您可以使用以下属性分别更改元素边框的底部、左侧、顶部和右侧的颜色 -
-
border-bottom-color 更改底部边框的颜色。
-
border-top-color 更改顶部边框的颜色。
-
border-left-color 更改左侧边框的颜色。
-
border-right-color 更改右侧边框的颜色。
以下示例显示了所有这些属性的效果 −
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>它将产生以下结果 −
The border-style Property
border-style 属性允许您选择以下边框样式之一 −
-
none - 无边框。（等同于 border-width:0；）
-
solid - 边框是一条实线。
-
dotted - 边框由一系列点组成。
-
dashed - 边框由一系列短线组成。
-
double - 边框由两条实线组成。
-
groove - 边框看上去像是凹进页面中的。
-
ridge - 边框的样式与造型相反。
-
inset - 边框让盒子看上去像是嵌入在页面中的。
-
outset - 边框让盒子看上去像是从画布中出来的。
-
hidden - 与无边框相同，但针对表格元素的 border-conflict 分辨除外。
可以单独更改元素的底部边界、左侧边界、顶部边界和右侧边框的样式，方法是使用以下属性：
-
border-bottom-style 更改底部边界的样式。
-
border-top-style 更改顶部边界的样式。
-
border-left-style 更改左侧边界的样式。
-
border-right-style 更改右侧边界的样式。
以下示例展示了所有这些边框样式：
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>它将产生以下结果 −
The border-width Property
border-width 属性允许设置元素边框的宽度。此属性的值可以是 px、pt 或 cm 中的长度，也可以将其设置为 thin、medium 或 thick。
可以单独更改元素的底部边界、顶部边界、左侧边界和右侧边框的宽度，方法是使用以下属性：
-
border-bottom-width 更改底部边界的宽度。
-
border-top-width 更改顶部边框的宽度。
-
border-left-width 更改左边框的宽度。
-
border-right-width 更改右边框的宽度。
以下示例显示了所有这些边框宽度 −
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>它将产生以下结果 −
CSS - Margins
-
margin-right 指定元素的右外边距。
现在，我们将通过示例了解如何使用这些属性。
The Margin Property
margin 属性允许你在一个声明中设置所有这四个外边距的属性。以下是围绕段落设置外边距的语法 −
示例如下：
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>它将产生以下结果 −
The margin-bottom Property
margin-bottom 属性允许你设置元素的底部外边距。它可以是长度、％或自动。
示例如下：
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>它将产生以下结果 −
The margin-top Property
margin-top 属性允许你设置元素的顶部外边距。它可以是长度、％或自动。
示例如下：
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>它将产生以下结果 −
The margin-left Property
margin-left 属性允许你设置元素的左边外边距。它可以是长度、％或自动。
示例如下：
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>它将产生以下结果 −
The margin-right Property
margin-right 属性允许你设置元素的右边外边距。它可以是长度、％或自动。
示例如下：
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>它将产生以下结果 −
CSS - Lists
现在，我们将通过示例了解如何使用这些属性。
The list-style-type Property
list-style-type 属性允许你控制无序列表中项目符号（又称标记）的形状或样式，以及有序列表中编号字符的样式。
以下是可以用于无序列表的值 −
以下是可以用于有序列表的值 −
示例如下：
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>它将产生以下结果 −
The list-style-position Property
list-style-position 属性指示标记应该出现在包含项目符号的框的内部还是外部。它可以有一个两个值 −
示例如下：
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>它将产生以下结果 −
The list-style-image Property
list-style-image允许你指定一张图片，以便你可以使用自己的项目符号样式。语法类似于 background-image 属性，属性的值以 url 字母开头，后跟括号中的 URL。如果它找不到给定的图像，则使用默认项目符号。
示例如下：
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>它将产生以下结果 −
The list-style Property
list-style 允许你将所有列表属性指定到一个表达式中。这些属性可以按照任何顺序出现。
示例如下：
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>它将产生以下结果 −
The marker-offset Property
marker-offset 属性允许你指定标记与其相关文本之间的距离。它的值应该是一个长度，如下面的示例所示 −
不幸的是，这个属性不受 IE 6 或 Netscape 7 支持。
示例如下：
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>它将产生以下结果 −
CSS - Paddings
-
padding 用作前一个属性的简写。
现在，我们将通过示例了解如何使用这些属性。
The padding-bottom Property
padding-bottom 属性设置元素的底部填充（空格）。可以使用长度或 % 来表示该值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>它将产生以下结果 −
The padding-top Property
padding-top 属性设置元素的顶部填充（空格）。可以使用长度或 % 来表示该值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>它将产生以下结果 −
The padding-left Property
padding-left 属性设置元素的左部填充（空格）。可以使用长度或 % 来表示该值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>它将产生以下结果 −
The padding-right Property
padding-right 属性设置元素的右部填充（空格）。可以使用长度或 % 来表示该值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>它将产生以下结果 −
The Padding Property
padding 属性设置元素的向左、向右、向上和向下的填充（空格）。可以使用长度或 % 来表示该值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>它将产生以下结果 −
CSS - Cursors
NOTE − 你应该只尝试使用这些值来添加对用户有帮助的信息，并且在预期看到光标的地方使用这些值。例如，在有人悬停在一个链接上的时候使用十字准星可能会让访客感到困惑。
示例如下：
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>它将产生以下结果 −
CSS - Outlines
-
outline-width 属性用于设置轮廓的宽度。
-
outline-style 属性用于设置轮廓的线条样式。
-
outline-color 属性用于设置轮廓的颜色。
-
outline 属性用于在一个语句中设置以上所有三个属性。
The outline-width Property
outline-width 属性指定要添加到框的轮廓的宽度。它的值应为长度或 thin、medium 或 thick 中的一个值，就像 border-width 属性一样。
零像素的宽度意味着没有轮廓。
示例如下：
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>它将产生以下结果 −
The outline-style Property
outline-style 属性指定环绕元素的线条（实线、点线或虚线）的样式。它可以采用以下值之一：
-
none − 无边框。（相当于 outline-width:0；）
-
solid − 轮廓是一条单一的实线。
-
dotted − 轮廓是一系列点。
-
dashed − 轮廓是一系列短线。
-
double − 外边框有两条实线。
-
groove − 外边框看起来就像雕刻在页面中一样。
-
ridge − 外边框看起来与槽状相反。
-
inset − 外边框让盒子看起来像嵌入在页面中。
-
outset − 外边框让盒子看起来像从画布中冒出来。
-
hidden − 同无。
示例如下：
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>它将产生以下结果 −
The outline-color Property
轮廓颜色属性允许你指定轮廓颜色。其值应该是一个颜色名称、十六进制颜色或 RGB 值，与颜色和边框颜色属性相同。
示例如下：
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>它将产生以下结果 −
The outline Property
轮廓属性是一个简写属性，允许你指定之前讨论过的任意三个属性的值，顺序不限，但需要在单一语句中。
示例如下：
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>它将产生以下结果 −
CSS - Dimension
-
max-width 属性用于设置框的最大宽度。
-
min-width 属性用于设置框的最小宽度。
The Height and Width Properties
高度和宽度属性允许你设置框的高度和宽度。它们可以接受长度、百分比或关键字自动的值。
示例如下：
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>它将产生以下结果 −
The line-height Property
行高属性允许你增加文本行之间的间隔。行高属性的值可以是数字、长度或百分比。
示例如下：
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>它将产生以下结果 −
The max-height Property
最大高度属性允许你指定框的最大高度。最大高度属性的值可以是数字、长度或百分比。
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
示例如下：
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>它将产生以下结果 −
The min-height Property
最小高度属性允许你指定框的最小高度。最小高度属性的值可以是数字、长度或百分比。
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
示例如下：
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>它将产生以下结果 −
The max-width Property
最大宽度属性允许你指定框的最大宽度。最大宽度属性的值可以是数字、长度或百分比。
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
示例如下：
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>这将生成以下结果：
The min-width Property
最小宽度属性允许你指定框的最小宽度。最小宽度属性的值可以是数字、长度或百分比。
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
示例如下：
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>它将产生以下结果 −
CSS - Scrollbars
示例如下：
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>它将产生以下结果 −
CSS - Visibility
示例如下：
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>它将产生以下结果 −
CSS - Positioning
-
向上移动 - 对上部使用负值。
-
向下移动 - 对上部使用正值。
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
示例如下：
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>它将产生以下结果 −
Absolute Positioning
具有 position: absolute 的元素相对于屏幕左上角指定坐标定位。
您可以使用两个值“顶部”和“左侧”以及位置属性在 HTML 文档中的任意位置移动 HTML 元素。
-
向左移动-对左侧使用负值。
-
向右移动-对左侧使用正值。
-
向上移动 - 对上部使用负值。
-
向下移动 - 对上部使用正值。
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
示例如下：
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>Fixed Positioning
固定定位允许您将元素的定位固定到网页的特定点，而无论滚动位置如何。指定坐标将相对于浏览器窗口。
您可以使用两个值“顶部”和“左侧”以及位置属性在 HTML 文档中的任意位置移动 HTML 元素。
-
向左移动-对左侧使用负值。
-
向右移动-对左侧使用正值。
-
向上移动 - 对上部使用负值。
-
向下移动 - 对上部使用正值。
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
示例如下：
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>CSS - Layers
<body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>它将产生以下结果 −
CSS - Pseudo Classes
最常用的伪类如下 -
在 <style>…</style> 块中定义伪类时，应注意以下事项 -
-
在 CSS 定义中，a:hover 必须在 a:link 和 a:visited 之后，才能生效。
-
在 CSS 定义中，a:active 必须在 a:hover 之后，才能生效。
-
伪类名称不区分大小写。
-
伪类不同于 CSS 类，但它们可以组合在一起。
The :link pseudo-class
以下示例演示如何使用 :link 类设置链接颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>它将产生以下黑色链接 −
The :visited pseudo-class
以下示例演示如何使用 :visited 类设置已访问链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>这将生成以下链接。单击此链接后，它将变为绿色。
The :hover pseudo-class
以下示例演示如何使用 :hover 类在鼠标指针悬停在该链接上时更改链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>它将生成以下链接。现在，将鼠标悬停在此链接上，您会看到它的颜色变为黄色。
The :active pseudo-class
以下示例演示如何使用 :active 类更改活动链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>它将生成以下链接。当用户单击时，颜色将变为粉色。
The :focus pseudo-class
以下示例演示如何使用 :focus 类来更改获得焦点的链接的颜色。可能的值可以是任何有效格式中的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>它将生成以下链接。当此链接获取焦点时，其颜色变为橙色。当它失去焦点时，颜色变回原样。
The :first-child pseudo-class
:first-child 伪类匹配另一个元素为其第一个子元素指定元素，并向作为某个其他元素的第一个子元素的该元素添加特殊样式。
若要在 IE 中使用 :first-child，必须在文档顶部声明 <!DOCTYPE>。
例如，若要缩进所有 <div> 元素的第一个段落，可以使用以下定义 −
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>它将产生以下结果 −
The :lang pseudo-class
语言伪类 :lang 允许基于特定标记的语言设置构建选择器。
此类在必须满足不同语言惯例的多种语言的文档中很有用。例如，法语通常使用尖括号 (< 和 >) 进行引用，而英语使用引号 (' 和 ')。
在需要解决此差异的文档中，可以使用 :lang 伪类来适当地更改引号。以下代码适当地更改 <blockquote> 标记，以用于正在使用的语言 −
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>:lang 选择器将应用于文档中的所有元素。但是，并非所有元素都使用引号属性，因此对于大多数元素来说效果是透明的。
它将产生以下结果 −
CSS - Pseudo Elements
最常用的伪元素如下 −
The :first-line pseudo-element
以下示例演示如何使用 :first-line 元素向文档中的元素的第一行添加特效。
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>它将生成以下链接 −
The :first-letter pseudo-element
以下示例演示如何使用 :first-letter 元素向文档中的元素的第一个字母添加特效。
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>它将产生以下黑色链接 −
The :before pseudo-element
以下示例演示如何使用 :before 元素在任何元素之前添加一些内容。
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>它将产生以下黑色链接 −
The :after pseudo-element
以下示例演示如何使用 :after 元素在任何元素之后添加一些内容。
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>它将产生以下黑色链接 −
CSS - @ Rules
The @import rule
@import 规则允许您从另一个样式表导入样式。它应出现在任何规则之前，在样式表的开始处，并且其值为 URL。
它可以以下两种方式之一编写 −
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>@import 规则的重要性在于，它允许您通过模块化方法开发样式表。您可以创建各种样式表，然后将它们包含在需要它们的任何地方。
The @charset Rule
如果您使用的是除 ASCII 或 ISO-8859-1 之外的字符集编写文档，您可能希望在样式表的顶部设置 @charset 规则，以指示样式表以哪种字符集编写。
@charset 规则必须写在样式表的开头，前面甚至不能有空格。该值放在引号内，并且应该是标准字符集之一。例如 −
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>The @font-face Rule
@font-face 规则用于详尽描述文档中使用的字体字样。@font-face 也可以用于定义要下载的字体的位置，但可能会遇到特定于实现的限制。
一般来说，@font-face 非常复杂，不建议除字体度量专家之外的任何人使用。
示例如下：
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>The !important Rule
层叠样式表会层叠。这意味着样式的应用顺序与浏览器读取的顺序相同。首先应用第一种样式，然后应用第二种样式，依此类推。
!important 规则提供了一种使 CSS 级联的方法。它还包括始终要应用的规则。无论该规则出现在 CSS 文档中的何处，具有 !important 属性的规则总是会被应用。
例如，在下面的样式表中，段落文本为黑色，即使应用的第一个样式属性为红色：
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>因此，如果您想确保总是应用属性，则可以将 !important 属性添加到标记。因此，要始终使段落文本为红色，您应该按如下方式编写 −
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>您已使 p {color：#ff0000 !important；} 成为强制性的，现在无论您定义了另一个规则 p {color：#000000；}，此规则都始终适用。
它将产生以下结果 −
CSS Filters - Text and Image Effects
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Motion Blur
动态模糊用于创建具有方向和强度的模糊图片或文本。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>它将产生以下结果 −
Chroma Filter
色度滤镜用于使任何特定颜色变为透明，通常与图像一起使用。您还可以将其与滚动条一起使用。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Drop Shadow Effect
投影阴影用于在指定的 X（水平）和 Y（垂直）偏移和颜色下创建对象的阴影。
此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Flip Effect
翻转效果用于创建对象的镜像。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Glow Effect
发光效果用于创建围绕对象的辉光。如果它是透明图像，则其周围的不透明像素会创建辉光。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Grayscale Effect
灰度效果用于将对象的色彩转换为 256 级灰度。此滤镜中使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Invert Effect
反转效果用于将对象的色彩映射到色谱中的相反值，即创建负图像。此滤镜中使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>它将产生以下结果 −
Mask Effect
遮罩效果用于将透明像素转换为指定颜色，并使不透明像素变为透明。此滤镜中使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>它将产生以下结果 −
Shadow Filter
阴影滤镜用于在指定的方向和颜色中创建衰减阴影。这是一个介于 Drophadow 和 Glow 之间的滤镜。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>它将产生以下结果 −
Wave Effect
波浪效果用于给对象一个正弦波失真，使其看起来波浪起伏。此滤镜中可以使用以下参数 −
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>它将产生以下结果 −
X-Ray Effect
X 射线效果以灰度显示并降低色彩深度。此滤镜中使用以下参数：
Example
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>它将产生以下结果 −
CSS - Media Types
下面是一个例子 −
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>The Document Language
在 HTML 4.0 中，LINK 元素的 media 属性指定了外部样式表的目标媒体 −
以下是示例 −
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>CSS Paged Media - @page Rule
CSS2 定义了一个“页面框”，一个内容被渲染的有限维度框。页面框是一个包含两个区域的矩形区域 −
-
The page area − 页面区域包括布局在该页面上的框。页面区域的边缘充当了在分页之间发生的布局的初始容纳块。
-
The margin area − 它包围页面区域。
可以在 @page 规则内指定页面框的尺寸、方向、边距等。页面框的尺寸通过 'size' 属性设置。页面区域的尺寸是页面框减去边距区域后的尺寸。
例如，以下 @page 规则将页面框大小设置为 8.5 × 11 英寸，并在页面框边缘和页面区域之间所有边上创建 2 厘米的边距 −
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>可以在 @page 规则内使用 margin、margin-top、margin-bottom、margin-left 和 margin-right 属性为自己的页面设置边距。
最后，marks 属性在 @page 规则内用于在目标纸上的页面框外部创建裁剪和对齐标记。默认情况下，不会打印任何标记。你可以使用 crop 和 cross 关键字的其中一个或同时使用，以在目标打印页面上创建裁剪标记和对齐标记。
Setting Page Size
size 属性指定了页面框的大小和方向。用于页面大小的值有四个 −
-
auto − 页框将被设置为目标纸张的大小和方向。
-
landscape − 覆盖目标方向。纸张大小与目标相同，且较长边水平。
-
portrait − 覆盖目标方向。纸张大小与目标相同，且较短边水平。
-
length − 'size' 属性的长度值创建了一个绝对页面框。如果只指定了一个长度值，它将同时设置页框的宽度和高度。'size' 属性不允许使用百分比值。
在下面的示例中，页框的外边缘将与目标对齐。'margin' 属性上的百分比值相对于目标大小，所以如果目标纸张尺寸为 21.0 厘米 × 29.7 厘米（即 A4），则边距为 2.10 厘米和 2.97 厘米。
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>以下示例将页框的宽度设置为 8.5 英寸，高度设置为 11 英寸。此示例中的页框需要目标纸张尺寸为 8.5" × 11" 或更大。
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>创建命名页面布局后，可以通过向样式添加页面属性来在文档中使用该布局，然后将该样式应用于文档中的元素。例如，此样式将文档中的所有表格都呈现为横向页面 -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>由于上述规则，在打印时，如果浏览器在文档中遇到<table>元素而当前页面布局是默认纵向布局，则它会开始一个新页面并在横向页面上打印表格。
Left, Right, and First pages
在打印双面文档时，左右页面的页面框应该不同。可以通过以下两个 CSS 伪类来表达 -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>可以使用 :first 伪类来指定文档第一页的样式 -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Controlling Pagination
除非另有指定，否则只有在页面格式更改或内容溢出当前页面框时才会出现分页符。要强制或禁止分页符，请使用 page-break-before、page-break-after 和 page-break-inside 属性。
page-break-before 和 page-break-after 都接受 auto、always、avoid、left 和 right 关键字。
关键字 auto 是默认值，它让浏览器根据需要生成分页符。关键字 always 强制在元素之前或之后分页，而 avoid 禁止在元素之前或之后立即分页。left 和 right 关键字强制分页一次或两次，以便在左手或右手页上渲染元素。
使用分页属性非常简单。假设您的文档包含一级标题，并以二级标题开始新章节来表示小节。您希望每一章节都从一个新的右手页面开始，但您不希望章节标题因分页符而与后续内容分隔。您可以使用以下规则来实现此目的 -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>仅在 page-break-inside 属性中使用 auto 和 avoid 值。如果您希望在可能的情况下不跨页拆分表格，则可以编写以下规则 -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Controlling Widows and Orphans
在印刷术语中，孤行是指由于分页而滞留在一页底部的段落行，而寡妇行是指在分页后仍留在页面顶部的行。通常，带有滞留在顶部或底部的单行文本的印刷页面看起来并不好看。大多数打印机都会尝试在每页顶部或底部至少留出两行或更多行文本。
-
orphans 属性指定必须留在页面底部的段落行的最小行数。
-
widows 属性指定必须留在页面顶部的段落行的最小行数。
以下示例在每一页的底部创建 4 行，在顶部创建 3 行 -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>CSS - Aural Media
-
Medical documentation
使用听觉属性时，画布包括一个三维物理空间（声音环绕）和一个时间空间（可以指定在其他声音之前、期间和之后的声音）。
CSS 属性还允许您改变合成语音的质量（语音类型、频率、语调等）。
示例如下：
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>它将产生以下结果 −
它将指示语音合成器以称为“paul”的语音（一种音频字体）平稳地朗读标题，但声音非常丰富。在朗读标题之前，将从给定的 URL 播放声音样本。
带有类‘heidi’的段落似乎来自左前方（如果音响系统能够产生空间音频），而带有类‘peter’的段落则来自右侧。
现在我们将看到与听觉媒体相关的各种属性。
-
azimuth 属性设置声音在水平方向上应该来自哪里。
-
elevation 属性集，其中声音应垂直于哪里传播。
-
*cue-after * 指定一个在朗读某个元素的内容后播放的声音，以将其与其他元素区分开。
-
*cue-before * 指定一个在朗读某个元素的内容前播放的声音，以将其与其他元素区分开。
-
cue 是设置 cue-before 和 cue-after 的缩写。
-
*pause-after * 指定在朗读某个元素的内容后观察到的暂停。
-
*pause-before * 指定在朗读某个元素的内容前观察到的暂停。
-
pause 是设置 pause-before 和 pause-after 的缩写。
-
pitch 指定朗读声音的平均音高（频率）。
-
*pitch-range * 指定平均音高的变化。
-
play-during 指定在朗读某个元素的内容时作为背景播放的声音。
-
richness 指定朗读声音的饱满度或亮度。
-
speak 指定文本是否将通过声音呈现，如果会，则以何种方式呈现。
-
speak-numeral 控制如何朗读数字。
-
speak-punctuation 指定如何朗读标点符号。
-
speech-rate 指定朗读速率。
-
stress 指定语音语调轮廓中“局部峰值”的高度。
-
voice-family 指定语族名称的优先列表。
-
volume 指代声音的中值音量。
The azimuth Property
方位角属性集声音应水平上来自何处。可能值列在下方：
-
angle − 位置以 -360 度到 360 度范围内的一个角度描述。0 度表示声场中间正前方。90 度在右边，180 度在后面，270 度（或者等效地更方便地说，-90 度）在左边。
-
left-side − 与“270 度”相同。在“后面”，为“270 度”。
-
far-left − 与“300 度”相同。在“后面”，为“240 度”。
-
left − 与“320 度”相同。在“后面”，为“220 度”。
-
center-left − 与“340 度”相同。在“后面”，为“200 度”。
-
center − 与“0 度”相同。在“后面”，为“180 度”。
-
center-right − 与“20 度”相同。在“后面”，为“160 度”。
-
right − 与“40 度”相同。在“后面”，为“140 度”。
-
far-right − 与“60 度”相同。在“后面”，为“120 度”。
-
right-side − 与“90 度”相同。在“后面”，为“90 度”。
-
leftwards − 将声音移到与当前角度相关的左边。更具体地说，减去 20 度。
-
rightwards − 将声音移到与当前角度相关的右边。更具体地说，加上 20 度。
示例如下：
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>The elevation Property
elevation 属性设置声音垂直方向的来源。可能值如下 −
-
angle − 以 -90 度到 90 度之间的角度指定仰角。0 度表示前视水平线，大致上与听众同水平。90 度表示正上方，-90 度表示正下方。
-
below − 与“-90 度”相同。
-
level − 与“0 度”相同。
-
above − 与“90 度”相同。
-
higher − 在当前仰角上加 10 度。
-
lower − 在当前仰角上减去 10 度。
示例如下：
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>The cue-after Property
cue-after 属性指定在元素的内容说完后播放一段声音，以将其与其他内容区分开来。可能的取值包括：
-
url - 要播放的声音文件的 URL。
-
none - 无需播放任何内容。
示例如下：
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>The cue-before Property
此属性指定在元素的内容说完前播放一段声音，以将其与其他内容区分开来。可能的值为：
-
url - 要播放的声音文件的 URL。
-
none - 无需播放任何内容。
示例如下：
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>The cue Property
cue 属性是用于设置 cue-before 和 cue-after 的简写。如果给出了两个值，则第一个值是 cue-before，第二个是 cue-after。如果只给出了一个值，则该值适用于这两个属性。
例如，以下两个规则是等效的：
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>The pause-after Property
此属性指定在元素内容说完后要保留的暂停时间。可能的值包括：
-
time - 以绝对时间单位（秒和毫秒）表示暂停时间。
-
percentage - 指 speech-rate 属性值的反数。例如，如果 speech-rate 为 120 个单词/分钟（即一个单词需要半秒或 500 毫秒），那么 pause-after 为 100% 意味着暂停时间为 500 毫秒，而 pause-after 为 20% 意味着暂停时间为 100 毫秒。
The pause-before Property
此属性指定在元素内容说完前要保留的暂停时间。可能的值包括：
-
time - 以绝对时间单位（秒和毫秒）表示暂停时间。
-
percentage - 指 speech-rate 属性值的反数。例如，如果 speech-rate 为 120 个单词/分钟（即一个单词需要半秒或 500 毫秒），那么 pause-before 为 100% 意味着暂停时间为 500 毫秒，而 pause-before 为 20% 意味着暂停时间为 100 毫秒。
The pause Property
该属性是用于设置 pause-before 和 pause-after 的简写。如果给出了两个值，则第一个值是 pause-before，第二个是 pause-after。
示例如下：
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>The pitch Property
此属性指定说话声音的平均音高（频率）。声音的平均音高取决于声音类型。例如，标准男性声音的平均音高约为 120 赫兹，而女性声音的平均音高约为 210 赫兹。可能的值包括：
-
frequency - 以赫兹 (Hz) 指定说话声音的平均音高。
-
x-low, low, medium, high, x-high - 这些值不会映射到绝对频率，因为这些值取决于声音类型。
The pitch-range Property
此属性指定平均音高的变化。可能的值包括：
-
number - '0' 到 '100' 之间的一个值。'0' 的音高范围产生平淡、单调的声音。50 的音高范围产生正常的抑扬顿挫。大于 50 的音高范围产生生动的声音。
The play-during Property
此属性指定在元素内容被朗读时作为背景播放的声音。可能的值可以是以下任何一个：
-
URI - 由该 <uri> 指定的声音会在元素内容被朗读时作为背景播放。
-
mix - 当存在时，此关键字表示从父元素的 play-during 属性继承的声音将继续播放，而由 uri 指定的声音将与它混合。如果未指定混合，元素的背景声音将替换父元素的背景声音。
-
repeat - 当存在时，此关键字表示如果声音太短而无法填充元素的整个持续时间，则声音将重复。否则，声音播放一次然后停止。
-
auto - 父元素的声音继续播放。
-
none - 此关键字表示沉默。
示例如下：
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>The richness Property
此属性指定说话声音的丰富度或明亮程度。可能的值有：
-
number - '0' 和 '100' 之间的值。值越高，声音的响度越大。较低的值会产生柔和、悦耳的声音。
The speak Property
此属性指定文本是否以听觉方式呈现，如果呈现，将以何种方式呈现。可能的值有：
-
none - 禁止听觉呈现，以便元素不需要时间来呈现。
-
normal - 使用与语言相关的发音规则来呈现元素及其子元素。
-
spell-out - 一次一个字母地拼写文本。
请注意“音量”属性值设为“静音”的元素与“说话”属性值设为“无”的元素之间的区别。前者占用的时间与说话时相同，包括元素前后任何停顿的时间，但不会产生声音。后者不需要时间并且不会被呈现。
The speak-numeral Property
此属性控制数字如何被说出来。可能的值有：
-
digits - 将数字读作单独的数字。因此，“237”被读作“二三七”。
-
continuous - 将数字读作一个完整的数字。因此，“237”被读作“二百三十七”。单词表示与语言相关。
The speak-punctuation Property
此属性指定标点符号如何被说出来。可能的值有：
-
code - 标点符号（例如分号、大括号等）要逐字读出来。
-
none - 标点符号不应被读出来，而应自然地呈现为各种停顿。
The speech-rate property
此属性指定说话速度。请注意，允许同时使用绝对关键字值和相对关键字值。可能的值有：
-
number - 以每分钟字数指定说话速度。
-
x-slow − 等同于每分钟 80 个单词。
-
slow − 等同于每分钟 120 个单词。
-
medium − 等同于每分钟 180 - 200 个单词。
-
fast − 等同于每分钟 300 个单词。
-
x-fast − 等同于每分钟 500 个单词。
-
faster − 将每分钟 40 个单词添加到当前语速。
-
slower − 将每分钟 40 个单词从当前语速中减去。
The stress Property
该属性指定了语调轮廓中“局部峰值”的高度。英语是一种有重音的语言，句子的不同部分被指定为主要、次要或三级重音。可能的值为 −
-
number − '0' 到 '100' 之间的值。值的含义取决于所说话的语言。例如，对于一个具有标准英语口音的男性声音（平均音高 = 122Hz），以正常的语调和重点进行说话时，“50” 的级别与一个意大利语声音的“50”会有不同的含义。
The voice-family Property
该值为逗号分隔、按优先级排列的语音族姓氏列表。它可以具有以下值 −
-
generic-voice − 值是语音族。可能的值包括“男性”、“女性”和“儿童”。
-
specific-voice − 值是特定实例（例如，喜剧演员、trinoids、Carlos、Lani）。
示例如下：
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>The volume Property
音量是指语音的中值音量。它可以具有以下值 −
-
numbers − '0' 到 '100' 之间的任何数字。'0' 代表最小可听音量级，而 100 对应于最大的舒适级。
-
percentage − 这些值相对于继承的值计算得来，然后将其截取到 '0' 到 '100' 的范围内。
-
silent − 完全没有声音。值“0”并不表示与“静音”相同。
-
x-soft − 等同于“0”。
-
soft − 等同于“25”。
-
medium − 等同于“50”。
-
loud − 与 '75' 相同。
-
x-loud − 与 '100' 相同。
示例如下：
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>具有类 goat 的段落将非常柔和。
CSS Printing - @media Rule
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}如果您在单独的文件中定义样式表，那么当链接到外部样式表时，也可以使用媒体属性 −
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS - Layouts
-
CSS 是 Web 文档未来的关键，并且将得到大多数浏览器的支持。
-
与表格相比，CSS 更加精确，允许您的文档按您的预期进行查看，而不管浏览器窗口如何。
-
跟踪嵌套表可能是一件真正痛苦的事情。CSS 规则往往条理清晰，易读且易于更改。
最后，我们会建议您使用对您有意义的任何技术，并使用您所了解或以最佳方式呈现您文档的内容。
CSS 还提供了 table-layout 属性，可以使您的表格加载得更快。以下是示例 −
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>您将在大型表格上更明显地看到好处。对于传统 HTML，浏览器必须计算每个单元格，才能最终呈现表格。但是，当您将 table-layout 算法设置为固定时，在呈现整个表格之前，它只需要查看第一行即可。这意味着您的表格需要具有固定的列宽和行高。
Sample Column Layout
以下是使用 CSS 创建简单列布局的步骤 −
将整个文档的页边距和页内距设置为以下内容 −
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>现在，我们将定义一个黄色列，稍后会将此规则附加到 <div> −
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>到这个时候，我们会得到一个带有黄色背景的文档，所以让我们现在在 level0 内定义另一个分隔 −
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>现在，我们将在 level1 内再嵌套一个分隔，并且只更改背景颜色 −
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>最后，我们将使用同样的技术，在 level2 内嵌套一个 level3 分隔，以获得右列的可视化布局 −
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>将源代码完成如下所示 −
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>同样，您可以在页面的顶部添加一个顶部导航栏或一个广告栏。
它将产生以下结果 −
CSS3 - Tutorial
CSS3 是 CSS2 规范和新规范的协作成果，我们可以称这种协作为 module 。下面展示了一些模块 −
-
Selectors
-
Box Model
-
Backgrounds
-
图像值和已替换内容
-
Text Effects
-
2D Transformations
-
3D Transformations
-
Animations
-
Multiple Column Layout
-
User Interface
CSS3 - Rounded Corners
下表展示了圆角可能的如下值 −
Example
此属性可以具有三个值。以下示例使用了这两个值 −
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>它将产生以下结果 −
Each Corner property
我们可以按如下示例指定每个角的属性 −
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>它将产生以下结果 −
CSS3 - Border Image
Example
以下是一个演示如何将图像设置为元素边框的示例。
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>它将产生以下结果 −
CSS3 - Multi Background
下面展示了最常用的值 −
Example
以下是一个演示多背景图像的示例。
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>它将产生以下结果 −
Size of Multi background
多背景属性能够为不同的图像添加不同的尺寸。一个示例语法如下所示 −
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}如上所示的一个示例中，每个图像具有特定的尺寸，如 50px、130px 和自动尺寸。
CSS3 - Colors
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL 代表 hue, saturation, lightness 。此处大色相是一个色轮上的度数，饱和度和明度是介于 0 到 100% 之间的百分比值。一个 HSL 示例语法如下所示 −
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA 代表 hue, saturation, lightness and alpha 。不透明度值指定不透明度，如 RGBA 所示。一个 HSLA 示例语法如下所示 −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacity 是不透明性的一种需要添加黑色来增加不透明度的稀释颜料。一个不透明度示例语法如下所示 −
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}以下示例展示了 rgba 颜色属性。
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>它将产生以下结果 −
以下示例展示了 HSL 颜色属性。
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>它将产生以下结果 −
以下示例显示 HSLA 颜色属性。
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>它将产生以下结果 −
以下示例显示不透明度属性。
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>它将产生以下结果 −
CSS3 - Gradients
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>它将产生以下结果 −
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>它将产生以下结果 −
Diagonal
对角线从左上角到右下角。
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>它将产生以下结果 −
Multi color
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>它将产生以下结果 −
CSS3 Radial Gradients
放射状渐变出现在中心。
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>它将产生以下结果 −
CSS3 Repeat Radial Gradients
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>它将产生以下结果 −
CSS3 - Shadow
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>它将产生以下结果 −
CSS3 - Text
Text-overflow
text-overflow 属性确定如何向用户发出有关未显示的溢出内容的信号。text-overflow 的示例如下所示 -
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>它将产生以下结果 −
CSS3 Word Breaking
用于换行，以下代码显示单词换行的示例代码。
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>它将产生以下结果 −
CSS3 - Web Fonts
以下代码显示字体字体的示例代码 -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>它将产生以下结果 −
CSS3 - 2d Transforms
以下示例显示了上面所有属性的示例。
Rotate 20 degrees
如下所示，以 20 度角旋转盒子 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
Rotate -20 degrees
如下所示，以 -20 度角旋转盒子 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
Skew X axis
如下所示，沿着 x 轴倾斜旋转盒子 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
Skew Y axis
如下所示，沿着 y 轴倾斜旋转盒子 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
Matrix transform
如下所示，采用矩阵变换旋转盒子 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
采用矩阵变换，沿另一个方向变换。
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>它将产生以下结果 −
CSS3 - 3D Transforms
X-axis 3D transforms
以下示例显示 x 轴 3D 变换。
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>它将产生以下结果 −
Y-axis 3D transforms
以下示例展示了 y 轴的 3D 转换：
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>它将产生以下结果 −
Z-axis 3D transforms
以下示例展示了 Z 轴的 3D 转换：
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>它将产生以下结果 −
CSS3 - Animation
上面的示例展示了动画的高度、宽度、颜色、名称和持续时间以及关键帧语法。
Moving left animation
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>它将产生以下结果 −
Moving left animation with keyframes
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>它将产生以下结果 −
CSS3 - Multi Columns
Example
下面的示例展示了文本作为新纸张结构的排列。
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>它将产生以下结果 −
假设用户想要制作没有行的文字作为新纸张，我们可以通过移除样式语法来实现，如下所示：
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}它将产生以下结果 −
CSS3 - User Interface
CSS3 - Box Sizing
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>它将产生以下结果 −
上面图片的两个元素具有相同的宽度和高度，但呈现结果不同，因为第二张图片包含了填充属性。
CSS3 box sizing property
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>上面的样本具有与 box-sizing:border-box 相同的高度和宽度。结果如下所示。
它将产生以下结果 −
上面的元素具有相同的宽度和高度，并带 inline-block ，以便即使结果始终对这两个元素均相同，如下所示。
CSS - Responsive
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>它将产生以下结果 −
Media queries
媒体查询适用于不同尺寸设备（如移动设备、台式机等）的不同样式规则。
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>它将产生以下结果 −
Bootstrap responsive web design
Bootstrap 是基于 HTML、CSS 和 Java 脚本的最流行的 Web 设计框架，它的帮助您为所有设备以响应式方式设计网页。
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>它将产生以下结果 −