Css 简明教程
What is CSS?
-
Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
-
Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
-
Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Who Creates and Maintains CSS?
CSS 由 W3C 中一组名为 CSS 工作组的人员创建并维护。CSS 工作组创建名为规范的文件。当一项规范经过讨论并由 W3C 成员正式批准后，它就成为建议书。
CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.
这些经过验证的规范被称为建议书，因为 W3C 无法控制语言的实际实现。独立的公司和组织创建该软件。
These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.
NOTE − 万维网联盟或 W3C 是针对因特网如何运作以及如何演进提出建议的一个小组。
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve.
CSS Versions
层叠样式表 1 级 (CSS1) 于 1996 年 12 月作为建议从 W3C 推出。该版本描述了 CSS 语言以及适用于所有 HTML 标记的简单视觉格式模型。
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.
CSS2 于 1998 年 5 月成为 W3C 建议，并建立在 CSS1 的基础上。该版本增加了对特定媒体样式表（例如打印机和听觉设备）、可下载字体、元素定位和表格的支持。
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.
CSS - Syntax
selector { property: value }
Example − 您可以定义表格边框如下所示 −
Example − You can define a table border as follows −
table{ border :1px solid #C00; }这里表格是一个选择器，边界是一个属性，并且给定的值 1px solid #C00 是该属性的值。
Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.
您可以根据您的习惯以各种简单方式定义选择器。让我逐个介绍这些选择器。
You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.
The Type Selectors
这是我们在上面看到的同一选择器。再次，提供另一个示例为所有级别 1 标题赋予颜色 −
This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings −
h1 {
color: #36CFFF;
}The Universal Selectors
通用选择器不会选择特定类型，而是简单地匹配任何元素类型的名称 −
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type −
* {
color: #000000;
}此规则以黑色渲染我们文档中每个元素的内容。
This rule renders the content of every element in our document in black.
The Descendant Selectors
假设您只希望在特定元素内部存在特定元素时才向该元素应用样式规则。如下例所示，样式规则仅在位于 <ul> 标记内部时才应用于 <em> 元素。
Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.
ul em {
color: #000000;
}The Class Selectors
您可以根据元素的 class 属性定义样式规则。 具有该类属性的所有元素都将按照定义的规则进行格式化。
You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.
.black {
color: #000000;
}对于我们文档中将 class 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −
This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example −
h1.black {
color: #000000;
}对于仅将 class 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。
This rule renders the content in black for only <h1> elements with class attribute set to black.
您可以向给定元素应用多个类选择器。 请考虑以下示例 −
You can apply more than one class selectors to given element. Consider the following example −
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>The ID Selectors
您可以根据元素的 id 属性定义样式规则。 具有该 id 属性的所有元素都将按照定义的规则进行格式化。
You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.
#black {
color: #000000;
}对于我们文档中将 id 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −
This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example −
h1#black {
color: #000000;
}对于仅将 id 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。
This rule renders the content in black for only <h1> elements with id attribute set to black.
当 id 选择器用作后代选择器的基础时，它们具有真正的强大功能，例如 −
The true power of id selectors is when they are used as the foundation for descendant selectors, For example −
#black h2 {
color: #000000;
}在此示例中，当这些标题位于将 id 属性设置为 black 的标记内时，所有级别 2 标题都将显示为黑色。
In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black.
The Child Selectors
您已经看到了后代选择器。 还有另一种选择器类型，它与后代非常相似，但具有不同的功能。 请考虑以下示例 −
You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example −
body > p {
color: #000000;
}如果此规则是 <body> 元素的直接子元素，则此规则会将所有段落渲染为黑色。 放入其他元素（例如 <div> 或 <td>）中的其他段落不会受到此规则的任何影响。
This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.
The Attribute Selectors
您还可以向具有特定属性的 HTML 元素应用样式。 下面的样式规则将匹配具有值为 text 的 type 属性的所有输入元素 −
You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text −
input[type = "text"] {
color: #000000;
}这种方法的优点是 <input type = "submit" /> 元素不受影响，且仅将颜色应用于所需的文本字段。
The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.
属性选择器应用以下规则。
There are following rules applied to attribute selector.
-
p[lang] − Selects all paragraph elements with a lang attribute.
-
p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
-
p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
-
p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".
Multiple Style Rules
您可能需要为单个元素定义多个样式规则。您可以定义这些规则来将多个属性和相应的值组合到一个块中，如以下示例中所定义 −
You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example −
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}这里所有属性和值对都用 semicolon (;) 分隔。您可以将它们放在一行或多行中。为了更好的可读性，我们将其保存在单独的行中。
Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.
暂时不用理会上述代码块中提到的属性。这些属性将在接下来的章节中进行解释，您可以在 CSS 参考中找到有关属性的完整详细信息
For a while, don’t bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find complete detail about properties in CSS References
Grouping Selectors
如果您愿意，可以将样式应用于许多选择器。只需用逗号分隔选择器，如下例所示 −
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}此定义样式规则还适用于 h1、h2 和 h3 元素。列表的顺序无关紧要。选择器中的所有元素都将应用相应的声明。
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.
您可以将各种 id 选择器组合在一起，如下所示 −
You can combine the various id selectors together as shown below −
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}CSS - Inclusion
它将产生以下结果 −
It will produce the following result −
Inline CSS - The style Attribute
您可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则只适用于该元素。以下是通用语法 −
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax −
<element style = "...style rules....">External CSS - The <link> Element
<link> 元素可用于在 HTML 文档中包含外部样式表文件。
The <link> element can be used to include an external stylesheet file in your HTML document.
外部样式表是一个带 .css 扩展名的单独文本文件。您在此文本文件中定义所有样式规则，然后可以使用 <link> 元素将此文件包含在任何 HTML 文档中。
An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
以下是在通用语法中包含外部 CSS 文件 −
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Example
考虑一个名为 mystyle.css 且具有以下规则的简单样式表文件 −
Consider a simple style sheet file with a name mystyle.css having the following rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}现在，您可以像下面这样将此文件 mystyle.css 包含在任何 HTML 文档中 −
Now you can include this file mystyle.css in any HTML document as follows −
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>Imported CSS - @import Rule
@import 用于以类似于 <link> 元素的方式导入外部样式表。以下是 @import 规则的通用语法。
@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
<head>
@import "URL";
</head>这里 URL 是包含样式规则的样式表文件的 URL。您也可以使用另一种语法 −
Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −
<head>
@import url("URL");
</head>CSS Rules Overriding
我们讨论了在 HTML 文档中包含样式表规则的四种方法。以下是重写任何样式表规则的规则。
We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.
-
Any inline style sheet takes highest priority. So, it will override any rule defined in <style>…</style> tags or rules defined in any external style sheet file.
-
Any rule defined in <style>…</style> tags will override rules defined in any external style sheet file.
-
Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.
Handling old Browsers
仍有许多旧浏览器不支持 CSS。因此，在 HTML 文档中编写嵌入式 CSS 时应注意。以下代码段展示了如何使用注释标记向较旧浏览器隐藏 CSS：
There are still many old browsers who do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers −
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>CSS Comments
很多时候，您可能需要在您的样式表块中放置额外的注释。因此，在样式表中注释任何部分非常容易。您可以将注释简单地放在 / …..this is a comment in style sheet….. / 中。
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /…..this is a comment in style sheet…../.
您可以使用 /* … */ 以与在 C 和 C++ 编程语言中类似的方式注释多行块。
You can use /* ….*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
CSS - Colors
这些格式在以下部分中有更详细的解释：
These formats are explained in more detail in the following sections −
CSS Colors - Hex Codes
十六进制数是一种包含 6 位数字的颜色表示形式。前两位数字 (RR) 表示红色值，后两位表示绿色值 (GG)，最后两位表示蓝色值 (BB)。
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
十六进制数是一种包含 6 位数字的颜色表示形式。前两位数字 (RR) 表示红色值，后两位表示绿色值 (GG)，最后两位表示蓝色值 (BB)。
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
十六进制值可以从任何图形软件获取，例如 Adobe Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush。
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
每个十六进制代码前面将加上磅号或井号“#”。以下是使用十六进制表示法的示例。
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
CSS Colors - Short Hex Codes
这是六位数字表示法的简短形式。在此格式中，会重复每个数字以得到等效的六位数字值。例如：#6A7 变为 #66AA77。
This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
十六进制值可以从任何图形软件获取，例如 Adobe Photoshop、Jasc Paintshop Pro，甚至使用 Advanced Paint Brush。
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
每个十六进制代码前面将加上磅号或井号“#”。以下是使用十六进制表示法的示例。
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to use Hexadecimal notation.
CSS Colors - RGB Values
此颜色值使用 rgb( ) 属性指定。该属性采用三个值，分别对应红色、绿色和蓝色。该值可以是介于 0 到 255 之间的整数或百分比。
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
NOTE - 所有浏览器不支持颜色的 rgb() 属性，因此建议不要使用它。
NOTE − All the browsers does not support rgb() property of color so it is recommended not to use it.
以下是使用 RGB 值显示几种颜色的示例。
Following is the example to show few colors using RGB values.
Building Color Codes
您可以使用我们的色彩代码生成器生成数百万个色彩代码。查看我们的 HTML Color Code Builder 。若要使用此工具，您需要一个支持 Java 的浏览器。
You can build millions of color codes using our Color Code Builder. Check our HTML Color Code Builder. To use this tool, you would need a Java Enabled Browser.
Browser Safe Colors
以下列出了据认为最安全且与计算机无关的 216 种颜色。这些颜色从十六进制代码 000000 变化到 FFFFFF。这些颜色可以安全使用，因为它们可以确保在运行 256 色调色板时所有计算机都能正确显示颜色：
Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −
CSS - Backgrounds
Set the Background Color
以下是演示如何为某个元素设置背景颜色的示例。
Following is the example which demonstrates how to set the background color for an element.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>这将生成以下结果：
This will produce following result −
Set the Background Image
我们可以通过调用本地存储的图像来设置背景图像，如下所示：
We can set the background image by calling local stored images as shown below −
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>它将产生以下结果 −
It will produce the following result −
Repeat the Background Image
以下示例展示了当图像很小的时候如何重复背景图像。如果您不想重复图像，您可以把背景重复属性设置为不重复，在这种情况下图像将只显示一次。
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don’t want to repeat an image, in this case image will display only once.
默认情况下，背景重复属性将重复该值。
By default background-repeat property will have repeat value.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
下面的例子展示了如何垂直重复背景图像。
The following example which demonstrates how to repeat the background image vertically.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
以下示例演示如何水平重复背景图像。
The following example demonstrates how to repeat the background image horizontally.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Set the Background Image Position
以下示例展示了如何将背景图像位置设置为距离左侧 100 像素。
The following example demonstrates how to set the background image position 100 pixels away from the left side.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
以下示例展示了如何将背景图像位置设置为距离左侧 100 像素，距离顶部 200 像素。
The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Set the Background Attachment
背景附件确定背景图像是固定还是随着页面其余部分滚动。
Background attachment determines whether a background image is fixed or scrolls with the rest of the page.
以下示例展示了如何设置固定的背景图像。
The following example demonstrates how to set the fixed background image.
<!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>它将产生以下结果 −
It will produce the following result −
以下示例展示了如何设置滚动的背景图像。
The following example demonstrates how to set the scrolling background image.
<!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>它将产生以下结果 −
It will produce the following result −
CSS - Fonts
Set the Font Family
以下是示例，展示了如何设置元素的字体系列。可能的值可以是任何字体系列名称。
Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.
<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>这将生成以下结果：
This will produce following result −
Set the Font Style
以下是示例，展示了如何设置元素的字体样式。可能的值是正常、斜体和倾斜。
Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>这将生成以下结果：
This will produce following result −
Set the Font Variant
以下示例演示如何设置元素的字体变体。可能的值是正常和小写。
The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>这将生成以下结果：
This will produce following result −
Set the Font Weight
以下示例演示如何设置元素的字体粗细。字体粗细属性提供指定字体粗细的功能。可能的值可以是正常、粗体、更粗、更细、100、200、300、400、500、600、700、800、900。
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be 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>这将生成以下结果：
This will produce following result −
Set the Font Size
以下示例演示如何设置元素的字体大小。字体大小属性用于控制字体的尺寸。可能的值可以是 xx 小、x 小、小、中、大、x 大、xx 大、小一点、大一点、以像素或百分比表示的大小。
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<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>这将生成以下结果：
This will produce following result −
Set the Font Size Adjust
以下示例演示如何设置元素的字体大小调整。此属性允许您调整 x 高度以使字体更易读。可能的值可以是任意数字。
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>这将生成以下结果：
This will produce following result −
Set the Font Stretch
以下示例演示如何设置元素的字体拉伸。此属性依赖于用户的计算机是否具有所使用字体的扩展或压缩版本。
The following example demonstrates how to set the font stretch of an element. This property relies on the user’s computer to have an expanded or condensed version of the font being used.
可能的值可以是正常、更宽、更窄、超压缩、超压缩、压缩、半压缩、半扩展、扩展、超扩展、超扩展。
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<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>这将生成以下结果：
This will produce following result −
Shorthand Property
您可以使用字体属性一次设置所有字体属性。例如 −
You can use the font property to set all the font properties at once. For example −
<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>这将生成以下结果：
This will produce following result −
CSS - Text
-
The text-decoration property is used to underline, overline, and strikethrough text.
-
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
-
The white-space property is used to control the flow and formatting of text.
-
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
以下示例演示了如何设置文本颜色。可能的值可以是任何有效格式中的任意颜色名称。
The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Set the Text Direction
以下示例演示了如何设置文本的方向。可能的值为 ltr 或 rtl。
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Set the Space between Characters
以下示例演示了如何设置字符之间的间距。可能的值为 normal 或指定间距的数字。
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Set the Space between Words
以下示例演示了如何设置单词之间的间距。可能的值为 normal 或指定间距的数字。
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>这将生成以下结果：
This will produce following result −
Set the Text Indent
以下示例演示了如何缩进段落的第一行。可能的值包括 % 或指定缩进间距的数字。
The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.
<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>它将产生以下结果 −
It will produce the following result −
Set the Text Alignment
以下示例演示了如何对齐文本。可能的值为 left、right、center、justify。
The following example demonstrates how to align a text. Possible values are 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>这将生成以下结果：
This will produce following result −
Decorating the Text
以下示例演示了如何装饰文本。可能的值包括 none、underline、overline、line-through、blink。
The following example demonstrates how to decorate a text. Possible values are 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>这将生成以下结果：
This will produce following result −
Set the Text Cases
以下示例演示了如何设置文本大小写。可能的值包括 none、capitalize、uppercase、lowercase。
The following example demonstrates how to set the cases for a text. Possible values are 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>这将生成以下结果：
This will produce following result −
Set the White Space between Text
以下示例演示了如何处理元素内部的空格。可能的值包括 normal、pre、nowrap。
The following example demonstrates how white space inside an element is handled. Possible values are 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>这将生成以下结果：
This will produce following result −
Set the Text Shadow
以下示例演示了如何设置文本周围的阴影。并非所有浏览器都支持此操作。
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<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>它将产生以下结果 −
It will produce the following result −
CSS - Using Images
The Image Border Property
图像的 border 属性用于设置图像边框的宽度。此属性的值可以是长度或百分比。
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
像素宽度为零表示没有边框。
A width of zero pixels means no border.
示例如下：
Here is the example −
<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>它将产生以下结果 −
It will produce the following result −
The Image Height Property
图像的 height 属性用于设置图像的高度。此属性的值可以是长度或百分比。以百分比形式输入值时，将以图像的可用框为参考应用此值。
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The Image Width Property
图像的宽度属性用于设置图像的宽度。此属性的值可以是长度值，也可以是百分比%。当提供百分比值时，它会根据图像所在框应用该值。
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The -moz-opacity Property
图像的 -moz-opacity 属性用于设置图像的不透明度。此属性用于在 Mozilla 中创建透明图像。IE 使用 filter:alpha(opacity=x) 创建透明图像。
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
在 Mozilla 中（-moz-opacity:x），x 可以是 0.0 - 1.0 之间的值。较低的值使元素更加透明（CSS3 有效语法 opacity:x 也适用）。
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
在 IE 中（filter:alpha(opacity=x)），x 可以是 0 - 100 之间的值。较低的值使元素更加透明。
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Links
通常，所有这些属性都保存在 HTML 文档的头部部分。
Usually, all these properties are kept in the header part of the HTML document.
记住，为了生效，a:hover 必须在 CSS 定义中位于 a:link 和 a:visited 之后。此外，a:active 必须在 CSS 定义中紧跟在 a:hover 之后，如下所示 −
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>现在，我们将看到如何使用这些属性提供不同的超链接效果。
Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
以下示例演示如何设置链接颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>它将产生以下黑色链接 −
It will produce the following black link −
Set the Color of Visited Links
以下示例演示如何设置已访问链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>它将产生以下链接。单击此链接后，其颜色将变为绿色。
It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
以下示例演示如何在我们用鼠标指针移到该链接上时更改链接颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>它将产生以下链接。现在，您将鼠标指针移到此链接上，您会看到它变为黄色。
It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
以下示例演示如何更改活动链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>它将产生以下链接。当用户单击它时，其颜色将变为粉红色。
It will produce the following link. It will change its color to pink when the user clicks it.
CSS - Tables
现在，我们将通过示例了解如何使用这些属性。
Now, we will see how to use these properties with examples.
The border-collapse Property
此属性可以有两个值，即 collapsed 和 separate。以下示例同时使用了这两个值 −
This property can have two values collapse and separate. The following example uses both the values −
<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>它将产生以下结果 −
It will produce the following result −
The border-spacing Property
border-spacing 属性指定相邻单元格之间边框的间距。它可以使用一个或两个值；这些值应为长度单位。
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
如果您提供一个值，它将应用于垂直边框和水平边框。或者您可以指定两个值，在这种情况下，第一个值表示水平间距，第二个值表示垂直间距 −
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE - 不幸的是，此属性在 Netscape 7 或 IE 6 中不起作用。
NOTE − Unfortunately, this property does not work in Netscape 7 or 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>现在让我们修改前一个示例并查看效果 −
Now let’s modify the previous example and see the effect −
<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>它将产生以下结果 −
It will produce the following result −
The caption-side Property
caption-side 属性允许您指定 <caption> 元素的内容应相对于表格放置在何处。下表列出了所有可能的值。
The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.
此属性可以有四个值之一：top、bottom、left 或 right。以下示例使用每个值。
This property can have one of the four values top, bottom, left or right. The following example uses each value.
NOTE - 这些属性可能无法与您的 IE 浏览器配合使用。
NOTE − These properties may not work with your IE Browser.
<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>它将产生以下结果 −
It will produce the following result −
The empty-cells Property
empty-cells 属性指示是否应显示不包含任何内容的单元格的边框。
The empty-cells property indicates whether a cell without any content should have a border displayed.
此属性可以有三个值之一：show、hide 或 inherit。
This property can have one of the three values - show, hide or inherit.
此处使用 empty-cells 属性来隐藏 <table> 元素中空单元格的边框。
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<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>它将产生以下结果 −
It will produce the following result −
The table-layout Property
table-layout 属性旨在帮助您控制浏览器应如何呈现或布局表格。
The table-layout property is supposed to help you control how a browser should render or lay out a table.
此属性可以有三个值之一：fixed、auto 或 inherit。
This property can have one of the three values: fixed, auto or inherit.
以下示例显示了这些属性之间的差异。
The following example shows the difference between these properties.
NOTE - 许多浏览器不支持此属性，因此不要依靠此属性。
NOTE − This property is not supported by many browsers so do not rely on this property.
<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>它将产生以下结果 −
It will produce the following result −
CSS - Borders
border-color 属性允许您更改包围元素的边框的颜色。您可以使用以下属性分别更改元素边框的底部、左侧、顶部和右侧的颜色 -
The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element’s border using the properties −
-
border-bottom-color changes the color of bottom border.
-
border-top-color changes the color of top border.
-
border-left-color changes the color of left border.
-
border-right-color changes the color of right border.
以下示例显示了所有这些属性的效果 −
The following example shows the effect of all these properties −
<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>它将产生以下结果 −
It will produce the following result −
The border-style Property
border-style 属性允许您选择以下边框样式之一 −
The border-style property allows you to select one of the following styles of border −
-
none − No border. (Equivalent of border-width:0;)
-
solid − Border is a single solid line.
-
dotted − Border is a series of dots.
-
dashed − Border is a series of short lines.
-
double − Border is two solid lines.
-
groove − Border looks as though it is carved into the page.
-
ridge − Border looks the opposite of groove.
-
inset − Border makes the box look like it is embedded in the page.
-
outset − Border makes the box look like it is coming out of the canvas.
-
hidden − Same as none, except in terms of border-conflict resolution for table elements.
可以单独更改元素的底部边界、左侧边界、顶部边界和右侧边框的样式，方法是使用以下属性：
You can individually change the style of the bottom, left, top, and right borders of an element using the following properties −
-
border-bottom-style changes the style of bottom border.
-
border-top-style changes the style of top border.
-
border-left-style changes the style of left border.
-
border-right-style changes the style of right border.
以下示例展示了所有这些边框样式：
The following example shows all these border styles −
<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>它将产生以下结果 −
It will produce the following result −
The border-width Property
border-width 属性允许设置元素边框的宽度。此属性的值可以是 px、pt 或 cm 中的长度，也可以将其设置为 thin、medium 或 thick。
The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.
可以单独更改元素的底部边界、顶部边界、左侧边界和右侧边框的宽度，方法是使用以下属性：
You can individually change the width of the bottom, top, left, and right borders of an element using the following properties −
-
border-bottom-width changes the width of bottom border.
-
border-top-width changes the width of top border.
-
border-left-width changes the width of left border.
-
border-right-width changes the width of right border.
以下示例显示了所有这些边框宽度 −
The following example shows all these border 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>它将产生以下结果 −
It will produce the following result −
Border Properties Using Shorthand
border 属性允许你在一个属性中指定颜色、样式和线条宽度 −
The border property allows you to specify color, style, and width of lines in one property −
以下示例展示了如何将所有三个属性用于一个属性。这是用于设置任何元素的边框的最常使用的属性。
The following example shows how to use all the three properties into a single property. This is the most frequently used property to set border around any element.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>它将产生以下结果 −
It will produce the following result −
CSS - Margins
-
The margin-right specifies the right margin of an element.
现在，我们将通过示例了解如何使用这些属性。
Now, we will see how to use these properties with examples.
The Margin Property
margin 属性允许你在一个声明中设置所有这四个外边距的属性。以下是围绕段落设置外边距的语法 −
The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The margin-bottom Property
margin-bottom 属性允许你设置元素的底部外边距。它可以是长度、％或自动。
The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The margin-top Property
margin-top 属性允许你设置元素的顶部外边距。它可以是长度、％或自动。
The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The margin-left Property
margin-left 属性允许你设置元素的左边外边距。它可以是长度、％或自动。
The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The margin-right Property
margin-right 属性允许你设置元素的右边外边距。它可以是长度、％或自动。
The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Lists
现在，我们将通过示例了解如何使用这些属性。
Now, we will see how to use these properties with examples.
The list-style-type Property
list-style-type 属性允许你控制无序列表中项目符号（又称标记）的形状或样式，以及有序列表中编号字符的样式。
The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.
以下是可以用于无序列表的值 −
Here are the values which can be used for an unordered list −
以下是可以用于有序列表的值 −
Here are the values, which can be used for an ordered list −
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The list-style-position Property
list-style-position 属性指示标记应该出现在包含项目符号的框的内部还是外部。它可以有一个两个值 −
The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values −
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The list-style-image Property
list-style-image允许你指定一张图片，以便你可以使用自己的项目符号样式。语法类似于 background-image 属性，属性的值以 url 字母开头，后跟括号中的 URL。如果它找不到给定的图像，则使用默认项目符号。
The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The list-style Property
list-style 允许你将所有列表属性指定到一个表达式中。这些属性可以按照任何顺序出现。
The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The marker-offset Property
marker-offset 属性允许你指定标记与其相关文本之间的距离。它的值应该是一个长度，如下面的示例所示 −
The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example −
不幸的是，这个属性不受 IE 6 或 Netscape 7 支持。
Unfortunately, this property is not supported in IE 6 or Netscape 7.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Paddings
-
The padding serves as shorthand for the preceding properties.
现在，我们将通过示例了解如何使用这些属性。
Now, we will see how to use these properties with examples.
The padding-bottom Property
padding-bottom 属性设置元素的底部填充（空格）。可以使用长度或 % 来表示该值。
The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The padding-top Property
padding-top 属性设置元素的顶部填充（空格）。可以使用长度或 % 来表示该值。
The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The padding-left Property
padding-left 属性设置元素的左部填充（空格）。可以使用长度或 % 来表示该值。
The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The padding-right Property
padding-right 属性设置元素的右部填充（空格）。可以使用长度或 % 来表示该值。
The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The Padding Property
padding 属性设置元素的向左、向右、向上和向下的填充（空格）。可以使用长度或 % 来表示该值。
The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Cursors
NOTE − 你应该只尝试使用这些值来添加对用户有帮助的信息，并且在预期看到光标的地方使用这些值。例如，在有人悬停在一个链接上的时候使用十字准星可能会让访客感到困惑。
NOTE − You should try to use only these values to add helpful information for users, and in places, they would expect to see that cursor. For example, using the crosshair when someone hovers over a link can confuse visitors.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Outlines
-
The outline-width property is used to set the width of the outline.
-
The outline-style property is used to set the line style for the outline.
-
The outline-color property is used to set the color of the outline.
-
The outline property is used to set all the above three properties in a single statement.
The outline-width Property
outline-width 属性指定要添加到框的轮廓的宽度。它的值应为长度或 thin、medium 或 thick 中的一个值，就像 border-width 属性一样。
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.
零像素的宽度意味着没有轮廓。
A width of zero pixels means no outline.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The outline-style Property
outline-style 属性指定环绕元素的线条（实线、点线或虚线）的样式。它可以采用以下值之一：
The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values −
-
none − No border. (Equivalent of outline-width:0;)
-
solid − Outline is a single solid line.
-
dotted − Outline is a series of dots.
-
dashed − Outline is a series of short lines.
-
double − Outline is two solid lines.
-
groove − Outline looks as though it is carved into the page.
-
ridge − Outline looks the opposite of groove.
-
inset − Outline makes the box look like it is embedded in the page.
-
outset − Outline makes the box look like it is coming out of the canvas.
-
hidden − Same as none.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The outline-color Property
轮廓颜色属性允许你指定轮廓颜色。其值应该是一个颜色名称、十六进制颜色或 RGB 值，与颜色和边框颜色属性相同。
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The outline Property
轮廓属性是一个简写属性，允许你指定之前讨论过的任意三个属性的值，顺序不限，但需要在单一语句中。
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Dimension
-
The max-width property is used to set the maximum width that a box can be.
-
The min-width property is used to set the minimum width that a box can be.
The Height and Width Properties
高度和宽度属性允许你设置框的高度和宽度。它们可以接受长度、百分比或关键字自动的值。
The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The line-height Property
行高属性允许你增加文本行之间的间隔。行高属性的值可以是数字、长度或百分比。
The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The max-height Property
最大高度属性允许你指定框的最大高度。最大高度属性的值可以是数字、长度或百分比。
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
NOTE − This property does not work in either Netscape 7 or IE 6.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The min-height Property
最小高度属性允许你指定框的最小高度。最小高度属性的值可以是数字、长度或百分比。
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
NOTE − This property does not work in either Netscape 7 or IE 6.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
The max-width Property
最大宽度属性允许你指定框的最大宽度。最大宽度属性的值可以是数字、长度或百分比。
The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
NOTE − This property does not work in either Netscape 7 or IE 6.
示例如下：
Here is an example −
<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>这将生成以下结果：
This will produce following result −
The min-width Property
最小宽度属性允许你指定框的最小宽度。最小宽度属性的值可以是数字、长度或百分比。
The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.
NOTE − 此属性在 Netscape 7 或 IE 6 中不起作用。
NOTE − This property does not work in either Netscape 7 or IE 6.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Scrollbars
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Visibility
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Positioning
-
Move Up - Use a negative value for top.
-
Move Down - Use a positive value for top.
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
NOTE − You can use bottom or right values as well in the same way as top and left.
示例如下：
Here is the example −
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>它将产生以下结果 −
It will produce the following result −
Absolute Positioning
具有 position: absolute 的元素相对于屏幕左上角指定坐标定位。
An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.
您可以使用两个值“顶部”和“左侧”以及位置属性在 HTML 文档中的任意位置移动 HTML 元素。
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
-
Move Left - Use a negative value for left.
-
Move Right - Use a positive value for left.
-
Move Up - Use a negative value for top.
-
Move Down - Use a positive value for top.
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
NOTE − You can use bottom or right values as well in the same way as top and left.
示例如下：
Here is an example −
<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
固定定位允许您将元素的定位固定到网页的特定点，而无论滚动位置如何。指定坐标将相对于浏览器窗口。
Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.
您可以使用两个值“顶部”和“左侧”以及位置属性在 HTML 文档中的任意位置移动 HTML 元素。
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
-
Move Left - Use a negative value for left.
-
Move Right - Use a positive value for left.
-
Move Up - Use a negative value for top.
-
Move Down - Use a positive value for top.
NOTE -您还可以像使用“顶部”和“左侧”一样使用底部或右侧值。
NOTE − You can use bottom or right values as well in the same way as top and left.
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
CSS - Pseudo Classes
最常用的伪类如下 -
The most commonly used pseudo-classes are as follows −
在 <style>…</style> 块中定义伪类时，应注意以下事项 -
While defining pseudo-classes in a <style>…</style> block, following points should be noted −
-
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
-
a:active MUST come after a:hover in the CSS definition in order to be effective.
-
Pseudo-class names are not case-sensitive.
-
Pseudo-class are different from CSS classes but they can be combined.
The :link pseudo-class
以下示例演示如何使用 :link 类设置链接颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to use the :link class to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>它将产生以下黑色链接 −
It will produce the following black link −
The :visited pseudo-class
以下示例演示如何使用 :visited 类设置已访问链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
The following is the example which demonstrates how to use the :visited class to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>这将生成以下链接。单击此链接后，它将变为绿色。
This will produce following link. Once you will click this link, it will change its color to green.
The :hover pseudo-class
以下示例演示如何使用 :hover 类在鼠标指针悬停在该链接上时更改链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to use the :hover class to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>它将生成以下链接。现在，将鼠标悬停在此链接上，您会看到它的颜色变为黄色。
It will produce the following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.
The :active pseudo-class
以下示例演示如何使用 :active 类更改活动链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
The following example demonstrates how to use the :active class to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>它将生成以下链接。当用户单击时，颜色将变为粉色。
It will produce the following link. When a user clicks it, the color changes to pink.
The :focus pseudo-class
以下示例演示如何使用 :focus 类来更改获得焦点的链接的颜色。可能的值可以是任何有效格式中的任何颜色名称。
The following example demonstrates how to use the :focus class to change the color of focused links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>它将生成以下链接。当此链接获取焦点时，其颜色变为橙色。当它失去焦点时，颜色变回原样。
It will produce the following link. When this link gets focused, its color changes to orange. The color changes back when it loses focus.
The :first-child pseudo-class
:first-child 伪类匹配另一个元素为其第一个子元素指定元素，并向作为某个其他元素的第一个子元素的该元素添加特殊样式。
The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.
若要在 IE 中使用 :first-child，必须在文档顶部声明 <!DOCTYPE>。
To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.
例如，若要缩进所有 <div> 元素的第一个段落，可以使用以下定义 −
For example, to indent the first paragraph of all <div> elements, you could use this definition −
<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>它将产生以下结果 −
It will produce the following result −
The :lang pseudo-class
语言伪类 :lang 允许基于特定标记的语言设置构建选择器。
The language pseudo-class :lang, allows constructing selectors based on the language setting for specific tags.
此类在必须满足不同语言惯例的多种语言的文档中很有用。例如，法语通常使用尖括号 (< 和 >) 进行引用，而英语使用引号 (' 和 ')。
This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').
在需要解决此差异的文档中，可以使用 :lang 伪类来适当地更改引号。以下代码适当地更改 <blockquote> 标记，以用于正在使用的语言 −
In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used −
<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 选择器将应用于文档中的所有元素。但是，并非所有元素都使用引号属性，因此对于大多数元素来说效果是透明的。
The :lang selectors will apply to all the elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.
它将产生以下结果 −
It will produce the following result −
CSS - Pseudo Elements
最常用的伪元素如下 −
The most commonly used pseudo-elements are as follows −
The :first-line pseudo-element
以下示例演示如何使用 :first-line 元素向文档中的元素的第一行添加特效。
The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.
<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>它将生成以下链接 −
It will produce the following link −
The :first-letter pseudo-element
以下示例演示如何使用 :first-letter 元素向文档中的元素的第一个字母添加特效。
The following example demonstrates how to use the :first-letter element to add special effects to the first letter of elements in the document.
<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>它将产生以下黑色链接 −
It will produce the following black link −
The :before pseudo-element
以下示例演示如何使用 :before 元素在任何元素之前添加一些内容。
The following example demonstrates how to use the :before element to add some content before any element.
<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>它将产生以下黑色链接 −
It will produce the following black link −
The :after pseudo-element
以下示例演示如何使用 :after 元素在任何元素之后添加一些内容。
The following example demonstrates how to use the :after element to add some content after any element.
<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>它将产生以下黑色链接 −
It will produce the following black link −
CSS - @ Rules
The @import rule
@import 规则允许您从另一个样式表导入样式。它应出现在任何规则之前，在样式表的开始处，并且其值为 URL。
The @import rule allows you to import styles from another style sheet. It should appear right at the start of the style sheet before any of the rules, and its value is a URL.
它可以以下两种方式之一编写 −
It can be written in one of the two following ways −
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>@import 规则的重要性在于，它允许您通过模块化方法开发样式表。您可以创建各种样式表，然后将它们包含在需要它们的任何地方。
The significance of the @import rule is that it allows you to develop your style sheets with a modular approach. You can create various style sheets and then include them wherever you need them.
The @charset Rule
如果您使用的是除 ASCII 或 ISO-8859-1 之外的字符集编写文档，您可能希望在样式表的顶部设置 @charset 规则，以指示样式表以哪种字符集编写。
If you are writing your document using a character set other than ASCII or ISO-8859-1 you might want to set the @charset rule at the top of your style sheet to indicate what character set the style sheet is written in.
@charset 规则必须写在样式表的开头，前面甚至不能有空格。该值放在引号内，并且应该是标准字符集之一。例如 −
The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character-sets. For example −
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>The @font-face Rule
@font-face 规则用于详尽描述文档中使用的字体字样。@font-face 也可以用于定义要下载的字体的位置，但可能会遇到特定于实现的限制。
The @font-face rule is used to exhaustively describe a font face for use in a document. @font-face may also be used to define the location of a font for download, although this may run into implementation-specific limits.
一般来说，@font-face 非常复杂，不建议除字体度量专家之外的任何人使用。
In general, @font-face is extremely complicated, and its use is not recommended for any except those who are expert in font metrics.
示例如下：
Here is an example −
<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
层叠样式表会层叠。这意味着样式的应用顺序与浏览器读取的顺序相同。首先应用第一种样式，然后应用第二种样式，依此类推。
Cascading Style Sheets cascade. It means that the styles are applied in the same order as they are read by the browser. The first style is applied and then the second and so on.
!important 规则提供了一种使 CSS 级联的方法。它还包括始终要应用的规则。无论该规则出现在 CSS 文档中的何处，具有 !important 属性的规则总是会被应用。
The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.
例如，在下面的样式表中，段落文本为黑色，即使应用的第一个样式属性为红色：
For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>因此，如果您想确保总是应用属性，则可以将 !important 属性添加到标记。因此，要始终使段落文本为红色，您应该按如下方式编写 −
So, if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, you should write it as follows −
<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；}，此规则都始终适用。
Here you have made p { color: #ff0000 !important; } mandatory, now this rule will always apply even you have defined another rule p { color: #000000; }
它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
Motion Blur
动态模糊用于创建具有方向和强度的模糊图片或文本。此滤镜中可以使用以下参数 −
Motion Blur is used to create blurred pictures or text with the direction and strength. The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Chroma Filter
色度滤镜用于使任何特定颜色变为透明，通常与图像一起使用。您还可以将其与滚动条一起使用。此滤镜中可以使用以下参数 −
Chroma Filter is used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also. The following parameter can be used in this 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>它将产生以下结果 −
It will produce the following result −
Drop Shadow Effect
投影阴影用于在指定的 X（水平）和 Y（垂直）偏移和颜色下创建对象的阴影。
Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.
此滤镜中可以使用以下参数 −
The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Flip Effect
翻转效果用于创建对象的镜像。此滤镜中可以使用以下参数 −
Flip effect is used to create a mirror image of the object. The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Glow Effect
发光效果用于创建围绕对象的辉光。如果它是透明图像，则其周围的不透明像素会创建辉光。此滤镜中可以使用以下参数 −
Glow effect is used to create a glow around the object. If it is a transparent image, then glow is created around the opaque pixels of it. The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Grayscale Effect
灰度效果用于将对象的色彩转换为 256 级灰度。此滤镜中使用以下参数 −
Grayscale effect is used to convert the colors of the object to 256 shades of gray. The following parameter is used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Invert Effect
反转效果用于将对象的色彩映射到色谱中的相反值，即创建负图像。此滤镜中使用以下参数 −
Invert effect is used to map the colors of the object to their opposite values in the color spectrum, i.e., to create a negative image. The following parameter is used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Mask Effect
遮罩效果用于将透明像素转换为指定颜色，并使不透明像素变为透明。此滤镜中使用以下参数 −
Mask effect is used to turn transparent pixels to a specified color and makes opaque pixels transparent. The following parameter is used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Shadow Filter
阴影滤镜用于在指定的方向和颜色中创建衰减阴影。这是一个介于 Drophadow 和 Glow 之间的滤镜。此滤镜中可以使用以下参数 −
Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that lies in between Dropshadow and Glow. The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
Wave Effect
波浪效果用于给对象一个正弦波失真，使其看起来波浪起伏。此滤镜中可以使用以下参数 −
Wave effect is used to give the object a sine wave distortion to make it look wavy. The following parameters can be used in this filter −
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>它将产生以下结果 −
It will produce the following result −
X-Ray Effect
X 射线效果以灰度显示并降低色彩深度。此滤镜中使用以下参数：
X-Ray effect grayscales and flattens the color depth. The following parameter is used in this filter:
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>它将产生以下结果 −
It will produce the following result −
CSS - Media Types
下面是一个例子 −
Given below is an example −
<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 属性指定了外部样式表的目标媒体 −
In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −
以下是示例 −
Following is an example −
<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>Recognized Media Types
为 CSS 媒体类型选择的名字反映了目标设备，相关属性适用于这些设备。它们给出了媒体类型所指设备的含义。下面列出了多种媒体类型 −
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −
NOTE − 媒体类型名称不区分大小写。
NOTE − Media type names are case-insensitive.
CSS Paged Media - @page Rule
CSS2 定义了一个“页面框”，一个内容被渲染的有限维度框。页面框是一个包含两个区域的矩形区域 −
The CSS2 defines a "page box", a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −
-
The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for layout that occurs between page breaks.
-
The margin area − It surrounds the page area.
可以在 @page 规则内指定页面框的尺寸、方向、边距等。页面框的尺寸通过 'size' 属性设置。页面区域的尺寸是页面框减去边距区域后的尺寸。
You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.
例如，以下 @page 规则将页面框大小设置为 8.5 × 11 英寸，并在页面框边缘和页面区域之间所有边上创建 2 厘米的边距 −
For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on all sides between the page box edge and the page area −
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>可以在 @page 规则内使用 margin、margin-top、margin-bottom、margin-left 和 margin-right 属性为自己的页面设置边距。
You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page.
最后，marks 属性在 @page 规则内用于在目标纸上的页面框外部创建裁剪和对齐标记。默认情况下，不会打印任何标记。你可以使用 crop 和 cross 关键字的其中一个或同时使用，以在目标打印页面上创建裁剪标记和对齐标记。
Finally, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are printed. You may use one or both of the crop and cross keywords to create crop marks and registration marks, respectively, on the target print page.
Setting Page Size
size 属性指定了页面框的大小和方向。用于页面大小的值有四个 −
The size property specifies the size and orientation of a page box. There are four values which can be used for page size −
-
auto − The page box will be set to the size and orientation of the target sheet.
-
landscape − Overrides the target’s orientation. The page box is the same size as the target, and the longer sides are horizontal.
-
portrait − Overrides the target’s orientation. The page box is the same size as the target, and the shorter sides are horizontal.
-
length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.
在下面的示例中，页框的外边缘将与目标对齐。'margin' 属性上的百分比值相对于目标大小，所以如果目标纸张尺寸为 21.0 厘米 × 29.7 厘米（即 A4），则边距为 2.10 厘米和 2.97 厘米。
In the following example, the outer edges of the page box will align with the target. The percentage value on the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>以下示例将页框的宽度设置为 8.5 英寸，高度设置为 11 英寸。此示例中的页框需要目标纸张尺寸为 8.5" × 11" 或更大。
The following example sets the width of the page box to be 8.5 inches and the height to be 11 inches. The page box in this example requires a target sheet size of 8.5" × 11" or larger.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>创建命名页面布局后，可以通过向样式添加页面属性来在文档中使用该布局，然后将该样式应用于文档中的元素。例如，此样式将文档中的所有表格都呈现为横向页面 -
Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders all the tables in your document on landscape pages −
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>由于上述规则，在打印时，如果浏览器在文档中遇到<table>元素而当前页面布局是默认纵向布局，则它会开始一个新页面并在横向页面上打印表格。
Due to the above rule, while printing, if the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it starts a new page and prints the table on a landscape page.
Left, Right, and First pages
在打印双面文档时，左右页面的页面框应该不同。可以通过以下两个 CSS 伪类来表达 -
When printing double-sided documents, the page boxes on left and right pages should be different. It can be expressed through two CSS pseudo-classes as follows −
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>可以使用 :first 伪类来指定文档第一页的样式 -
You can specify the style for the first page of a document with the :first pseudo-class −
<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 属性。
Unless you specify otherwise, page breaks occur only when the page format changes or when the content overflows the current page box. To otherwise force or suppress page breaks, use the page-break-before, page-break-after, and page-break-inside properties.
page-break-before 和 page-break-after 都接受 auto、always、avoid、left 和 right 关键字。
Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.
关键字 auto 是默认值，它让浏览器根据需要生成分页符。关键字 always 强制在元素之前或之后分页，而 avoid 禁止在元素之前或之后立即分页。left 和 right 关键字强制分页一次或两次，以便在左手或右手页上渲染元素。
The keyword auto is the default, it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.
使用分页属性非常简单。假设您的文档包含一级标题，并以二级标题开始新章节来表示小节。您希望每一章节都从一个新的右手页面开始，但您不希望章节标题因分页符而与后续内容分隔。您可以使用以下规则来实现此目的 -
Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You’d like each chapter to start on a new, right-hand page, but you don’t want section headers to be split across a page break from the subsequent content. You can achieve this using following rule −
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>仅在 page-break-inside 属性中使用 auto 和 avoid 值。如果您希望在可能的情况下不跨页拆分表格，则可以编写以下规则 -
Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule −
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Controlling Widows and Orphans
在印刷术语中，孤行是指由于分页而滞留在一页底部的段落行，而寡妇行是指在分页后仍留在页面顶部的行。通常，带有滞留在顶部或底部的单行文本的印刷页面看起来并不好看。大多数打印机都会尝试在每页顶部或底部至少留出两行或更多行文本。
In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.
-
The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
-
The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.
以下示例在每一页的底部创建 4 行，在顶部创建 3 行 -
Here is the example to create 4 lines at the bottom and 3 lines at the top of each page −
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>CSS - Aural Media
-
Medical documentation
使用听觉属性时，画布包括一个三维物理空间（声音环绕）和一个时间空间（可以指定在其他声音之前、期间和之后的声音）。
When using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).
CSS 属性还允许您改变合成语音的质量（语音类型、频率、语调等）。
The CSS properties also allow you to vary the quality of synthesized speech (voice type, frequency, inflection, etc.).
示例如下：
Here is an example −
<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>它将产生以下结果 −
It will produce the following result −
它将指示语音合成器以称为“paul”的语音（一种音频字体）平稳地朗读标题，但声音非常丰富。在朗读标题之前，将从给定的 URL 播放声音样本。
It will direct the speech synthesizer to speak headers in a voice (a kind of audio font) called "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL.
带有类‘heidi’的段落似乎来自左前方（如果音响系统能够产生空间音频），而带有类‘peter’的段落则来自右侧。
Paragraphs with class ‘heidi’ will appear to come from front left (if the sound system is capable of spatial audio), and paragraphs of class ‘peter’ from the right.
现在我们将看到与听觉媒体相关的各种属性。
Now we will see the various properties related to aural media.
-
The azimuth property sets, where the sound should come from horizontally.
-
The elevation property sets, where the sound should come from vertically.
-
The *cue-after * specifies a sound to be played after speaking an element’s content to delimit it from other.
-
The *cue-before * specifies a sound to be played before speaking an element’s content to delimit it from other.
-
The cue is a shorthand for setting cue-before and cue-after.
-
The *pause-after * specifies a pause to be observed after speaking an element’s content.
-
The *pause-before * specifies a pause to be observed before speaking an element’s content.
-
The pause is a shorthand for setting pause-before and pause-after.
-
The pitch specifies the average pitch (a frequency) of the speaking voice.
-
The *pitch-range * specifies variation in average pitch.
-
The play-during specifies a sound to be played as a background while an element’s content is spoken.
-
The richness specifies the richness, or brightness, of the speaking voice.
-
The speak specifies whether text will be rendered aurally and if so, in what manner.
-
The speak-numeral controls how numerals are spoken.
-
The speak-punctuation specifies how punctuation is spoken.
-
The speech-rate specifies the speaking rate.
-
The stress specifies the height of "local peaks" in the intonation contour of a voice.
-
The voice-family specifies the prioritized list of voice family names.
-
The volume refers to the median volume of the voice.
The azimuth Property
方位角属性集声音应水平上来自何处。可能值列在下方：
The azimuth property sets where the sound should come from horizontally. The possible values are listed below −
-
angle − Position is described in terms of an angle within the range -360deg to 360deg. The value 0deg means directly ahead in the center of the sound stage. 90deg is to the right, 180deg behind, and 270deg (or, equivalently and more conveniently, -90deg) to the left.
-
left-side − Same as '270deg'. With 'behind', '270deg'.
-
far-left − Same as '300deg'. With 'behind', '240deg'.
-
left − Same as '320deg'. With 'behind', '220deg'.
-
center-left − Same as '340deg'. With 'behind', '200deg'.
-
center − Same as '0deg'. With 'behind', '180deg'.
-
center-right − Same as '20deg'. With 'behind', '160deg'.
-
right − Same as '40deg'. With 'behind', '140deg'.
-
far-right − Same as '60deg'. With 'behind', '120deg'.
-
right-side − Same as '90deg'. With 'behind', '90deg'.
-
leftwards − Moves the sound to the left and relative to the current angle. More precisely, subtracts 20 degrees.
-
rightwards − Moves the sound to the right, relative to the current angle. More precisely, adds 20 degrees.
示例如下：
Here is an example −
<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 属性设置声音垂直方向的来源。可能值如下 −
The elevation property sets where the sound should come from vertically. The possible values are as follows −
-
angle − Specifies the elevation as an angle, between -90deg and 90deg. 0deg means on the forward horizon, which loosely means level with the listener. 90deg means directly overhead and -90deg means directly below.
-
below − Same as '-90deg'.
-
level − Same as '0deg'.
-
above − Same as '90deg'.
-
higher − Adds 10 degrees to the current elevation.
-
lower − Subtracts 10 degrees from the current elevation.
示例如下：
Here is an example −
<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 属性指定在元素的内容说完后播放一段声音，以将其与其他内容区分开来。可能的取值包括：
The cue-after property specifies a sound to be played after speaking an element’s content to delimit it from other. The possible values include −
-
url − The URL of a sound file to be played.
-
none − Nothing has to be played.
示例如下：
Here is an example −
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>The cue-before Property
此属性指定在元素的内容说完前播放一段声音，以将其与其他内容区分开来。可能的值为：
This property specifies a sound to be played before speaking an element’s content to delimit it from other. The possible values are −
-
url − The URL of a sound file to be played.
-
none − Nothing has to be played.
示例如下：
Here is an example −
<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。如果只给出了一个值，则该值适用于这两个属性。
The cue property is a shorthand for setting cue-before and cue-after. If two values are given, the first value is cue-before and the second is cue-after. If only one value is given, it applies to both properties.
例如，以下两个规则是等效的：
For example, the following two rules are equivalent −
<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
此属性指定在元素内容说完后要保留的暂停时间。可能的值包括：
This property specifies a pause to be observed after speaking an element’s content. The possible values are −
-
time − Expresses the pause in absolute time units (seconds and milliseconds).
-
percentage − Refers to the inverse of the value of the speech-rate property. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-after of 100% means a pause of 500 ms and a pause-after of 20% means 100ms.
The pause-before Property
此属性指定在元素内容说完前要保留的暂停时间。可能的值包括：
This property specifies a pause to be observed before speaking an element’s content. The possible values are −
-
time − Expresses the pause in absolute time units (seconds and milliseconds).
-
percentage − Refers to the inverse of the value of the speech-rate property. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-before of 100% means a pause of 500 ms and a pause-before of 20% means 100ms.
The pause Property
该属性是用于设置 pause-before 和 pause-after 的简写。如果给出了两个值，则第一个值是 pause-before，第二个是 pause-after。
This property is a shorthand for setting pause-before and pause-after. If two values are given, the first value is pause-before and the second is pause-after.
示例如下：
Here is an example −
<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 赫兹。可能的值包括：
This property specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it’s around 210Hz. The possible values are −
-
frequency − Specifies the average pitch of the speaking voice in hertz (Hz).
-
x-low, low, medium, high, x-high − These values do not map to absolute frequencies since these values depend on the voice family.
The pitch-range Property
此属性指定平均音高的变化。可能的值包括：
This property specifies variation in average pitch. The possible values are −
-
number − A value between '0' and '100'. A pitch range of '0' produces a flat, monotonic voice. A pitch range of 50 produces normal inflection. Pitch ranges greater than 50 produce animated voices.
The play-during Property
此属性指定在元素内容被朗读时作为背景播放的声音。可能的值可以是以下任何一个：
This property specifies a sound to be played as a background while an element’s content is spoken. Possible values could be any of the followings −
-
URI − The sound designated by this <uri> is played as a background while the element’s content is spoken.
-
mix − When present, this keyword means that the sound inherited from the parent element’s play-during property continues to play and the sound designated by the uri is mixed with it. If mix is not specified, the element’s background sound replaces the parent’s.
-
repeat − When present, this keyword means that the sound will repeat if it is too short to fill the entire duration of the element. Otherwise, the sound plays once and then stops.
-
auto − The sound of the parent element continues to play.
-
none − This keyword means that there is silence.
示例如下：
Here is an example −
<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
此属性指定说话声音的丰富度或明亮程度。可能的值有：
This property specifies the richness or brightness of the speaking voice. The possible values are −
-
number − A value between '0' and '100'. The higher the value, the more the voice will carry. A lower value will produce a soft, mellifluous voice.
The speak Property
此属性指定文本是否以听觉方式呈现，如果呈现，将以何种方式呈现。可能的值有：
This property specifies whether text will be rendered aurally and if so, in what manner. The possible values are −
-
none − Suppresses aural rendering so that the element requires no time to render.
-
normal − Uses language-dependent pronunciation rules for rendering an element and its children.
-
spell-out − Spells the text one letter at a time.
请注意“音量”属性值设为“静音”的元素与“说话”属性值设为“无”的元素之间的区别。前者占用的时间与说话时相同，包括元素前后任何停顿的时间，但不会产生声音。后者不需要时间并且不会被呈现。
Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no sound is generated. The latter requires no time and is not rendered.
The speak-numeral Property
此属性控制数字如何被说出来。可能的值有：
This property controls how numerals are spoken. The possible values are −
-
digits − Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven".
-
continuous − Speak the numeral as a full number. Thus, "237" is spoken "Two hundred thirty seven". Word representations are language-dependent.
The speak-punctuation Property
此属性指定标点符号如何被说出来。可能的值有：
This property specifies how punctuation is spoken. The possible values are −
-
code − Punctuation such as semicolons, braces, and so on are to be spoken literally.
-
none − Punctuation is not to be spoken, but instead rendered naturally as various pauses.
The speech-rate property
此属性指定说话速度。请注意，允许同时使用绝对关键字值和相对关键字值。可能的值有：
This property specifies the speaking rate. Note that both absolute and relative keyword values are allowed. The possible values are −
-
number − Specifies the speaking rate in words per minute.
-
x-slow − Same as 80 words per minute.
-
slow − Same as 120 words per minute.
-
medium − Same as 180 - 200 words per minute.
-
fast − Same as 300 words per minute.
-
x-fast − Same as 500 words per minute.
-
faster − Adds 40 words per minute to the current speech rate.
-
slower − Subtracts 40 words per minutes from the current speech rate.
The stress Property
该属性指定了语调轮廓中“局部峰值”的高度。英语是一种有重音的语言，句子的不同部分被指定为主要、次要或三级重音。可能的值为 −
This property specifies the height of "local peaks" in the intonation contour of a voice. English is a stressed language, and different parts of a sentence are assigned primary, secondary, or tertiary stress. The possible values are −
-
number − A value between '0' and '100'. The meaning of values depends on the language being spoken. For example, a level of '50' for a standard, English-speaking male voice (average pitch = 122Hz), speaking with normal intonation and emphasis would have a different meaning than '50' for an Italian voice.
The voice-family Property
该值为逗号分隔、按优先级排列的语音族姓氏列表。它可以具有以下值 −
The value is a comma-separated, prioritized list of voice family names. It can have following values −
-
generic-voice − Values are voice families. Possible values are 'male', 'female', and 'child'.
-
specific-voice − Values are specific instances (e.g., comedian, trinoids, carlos, lani).
示例如下：
Here is an example −
<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
音量是指语音的中值音量。它可以具有以下值 −
Volume refers to the median volume of the voice. It can have following values −
-
numbers − Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 corresponds to the maximum comfortable level.
-
percentage − These values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.
-
silent − No sound at all. The value '0' does not mean the same as 'silent'.
-
x-soft − Same as '0'.
-
soft − Same as '25'.
-
medium − Same as '50'.
-
loud − Same as '75'.
-
x-loud − Same as '100'.
示例如下：
Here is an example −
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>具有类 goat 的段落将非常柔和。
Paragraphs with class goat will be very soft.
CSS Printing - @media Rule
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}如果您在单独的文件中定义样式表，那么当链接到外部样式表时，也可以使用媒体属性 −
If you are defining your style sheet in a separate file, then you can also use the media attribute when linking to an external style sheet −
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS - Layouts
-
CSS is pivotal to the future of Web documents and will be supported by most browsers.
-
CSS is more exact than tables, allowing your document to be viewed as you intended, regardless of the browser window.
-
Keeping track of nested tables can be a real pain. CSS rules tend to be well organized, easily read, and easily changed.
最后，我们会建议您使用对您有意义的任何技术，并使用您所了解或以最佳方式呈现您文档的内容。
Finally, we would suggest you to use whichever technology makes sense to you and use what you know or what presents your documents in the best way.
CSS 还提供了 table-layout 属性，可以使您的表格加载得更快。以下是示例 −
CSS also provides table-layout property to make your tables load much faster. Following is an example −
<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 算法设置为固定时，在呈现整个表格之前，它只需要查看第一行即可。这意味着您的表格需要具有固定的列宽和行高。
You will notice the benefits more on large tables. With traditional HTML, the browser had to calculate every cell before finally rendering the table. When you set the table-layout algorithm to fixed, however, it only needs to look at the first row before rendering the whole table. It means your table will need to have fixed column widths and row heights.
Sample Column Layout
以下是使用 CSS 创建简单列布局的步骤 −
Here are the steps to create a simple Column Layout using CSS −
将整个文档的页边距和页内距设置为以下内容 −
Set the margin and padding of the complete document as follows −
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>现在，我们将定义一个黄色列，稍后会将此规则附加到 <div> −
Now, we will define a column with yellow color and later, we will attach this rule to a <div> −
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>到这个时候，我们会得到一个带有黄色背景的文档，所以让我们现在在 level0 内定义另一个分隔 −
Upto this point, we will have a document with yellow body, so let us now define another division inside level0 −
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>现在，我们将在 level1 内再嵌套一个分隔，并且只更改背景颜色 −
Now, we will nest one more division inside level1, and we will change just background color −
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>最后，我们将使用同样的技术，在 level2 内嵌套一个 level3 分隔，以获得右列的可视化布局 −
Finally, we will use the same technique, nest a level3 division inside level2 to get the visual layout for the right column −
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>将源代码完成如下所示 −
Complete the source code as follows −
<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>同样，您可以在页面的顶部添加一个顶部导航栏或一个广告栏。
Similarly, you can add a top navigation bar or an ad bar at the top of the page.
它将产生以下结果 −
It will produce the following result −
CSS - Validations
CSS 验证器检查您的级联样式表，以确保它们符合 W3 联盟设定的 CSS 标准。有少数验证器还将告诉您哪些 CSS 特性受哪些浏览器支持（因为并非所有浏览器在 CSS 实现都相同）。
A CSS validator checks your Cascading Style Sheets to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few validators which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation).
Why Validate Your HTML Code?
有许多原因需要验证你的代码。但主要原因有 −
There are a number of reasons why you should validate your code. But major ones are −
-
It Helps Cross-Browser, Cross-Platform, and Future Compatibility.
-
A good quality website increases search engine visibility.
-
Professionalism: As a web developer, your code should not raise errors while seen by the visitors.
CSS3 - Tutorial
CSS3 是 CSS2 规范和新规范的协作成果，我们可以称这种协作为 module 。下面展示了一些模块 −
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is module. Some of the modules are shown below −
-
Selectors
-
Box Model
-
Backgrounds
-
Image Values and Replaced Content
-
Text Effects
-
2D Transformations
-
3D Transformations
-
Animations
-
Multiple Column Layout
-
User Interface
CSS3 - Rounded Corners
下表展示了圆角可能的如下值 −
The following table shows the possible values for Rounded corners as follows −
Example
此属性可以具有三个值。以下示例使用了这两个值 −
This property can have three values. The following example uses both the values −
<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>它将产生以下结果 −
It will produce the following result −
Each Corner property
我们可以按如下示例指定每个角的属性 −
We can specify the each corner property as shown below example −
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - Border Image
Example
以下是一个演示如何将图像设置为元素边框的示例。
Following is the example which demonstrates to set image as a border for elements.
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - Multi Background
下面展示了最常用的值 −
The most commonly used values are shown below −
Example
以下是一个演示多背景图像的示例。
Following is the example which demonstrate the multi background images.
<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>它将产生以下结果 −
It will produce the following result −
Size of Multi background
多背景属性能够为不同的图像添加不同的尺寸。一个示例语法如下所示 −
Multi background property is accepted to add different sizes for different images.A sample syntax is as shown below −
#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 和自动尺寸。
As shown above an example, each image is having specific sizes as 50px, 130px and auto size.
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 示例语法如下所示 −
HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel, saturation and lightness are percentage values between 0 to 100%. A Sample syntax of HSL as shown below −
#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 示例语法如下所示 −
HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the opacity as shown RGBA. A Sample syntax of HSLA as shown below −
#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 是不透明性的一种需要添加黑色来增加不透明度的稀释颜料。一个不透明度示例语法如下所示 −
opacity is a thinner paints need black added to increase opacity. A sample syntax of opacity is as shown below −
#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 颜色属性。
The following example shows rgba color property.
<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>它将产生以下结果 −
It will produce the following result −
以下示例展示了 HSL 颜色属性。
The following example shows HSL color property.
<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>它将产生以下结果 −
It will produce the following result −
以下示例显示 HSLA 颜色属性。
The following example shows HSLA color property.
<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>它将产生以下结果 −
It will produce the following result −
以下示例显示不透明度属性。
The following example shows Opacity property.
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - Gradients
Linear gradients
线性渐变用于按照从上至下之类的线性格式排列两种以上颜色。
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.
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>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
Diagonal
对角线从左上角到右下角。
Diagonal starts at top left and right button.
<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>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
CSS3 Radial Gradients
放射状渐变出现在中心。
Radial gradients appears at center.
<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>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
box shadow
用于向元素添加阴影效果，以下示例用于向元素添加阴影效果。
Used to add shadow effects to elements, Following is the example to add shadow effects to element.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>它将产生以下结果 −
It will produce the following result −
CSS3 - Text
Text-overflow
text-overflow 属性确定如何向用户发出有关未显示的溢出内容的信号。text-overflow 的示例如下所示 -
The text-overflow property determines how overflowed content that is not displayed is signaled to users. the sample example of text overflow is shown as follows −
<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>它将产生以下结果 −
It will produce the following result −
CSS3 Word Breaking
用于换行，以下代码显示单词换行的示例代码。
Used to break the line, following code shows the sample code of 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>它将产生以下结果 −
It will produce the following result −
CSS3 - Web Fonts
以下代码显示字体字体的示例代码 -
Following code shows the sample code of font face −
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - 2d Transforms
以下示例显示了上面所有属性的示例。
The following examples are shown the sample of all above properties.
Rotate 20 degrees
如下所示，以 20 度角旋转盒子 -
Box rotation with 20 degrees angle as shown below −
<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>它将产生以下结果 −
It will produce the following result −
Rotate -20 degrees
如下所示，以 -20 度角旋转盒子 -
Box rotation with -20 degrees angle as shown below −
<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>它将产生以下结果 −
It will produce the following result −
Skew X axis
如下所示，沿着 x 轴倾斜旋转盒子 -
Box rotation with skew x-axis as shown below −
<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>它将产生以下结果 −
It will produce the following result −
Skew Y axis
如下所示，沿着 y 轴倾斜旋转盒子 -
Box rotation with skew y-axis as shown below −
<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>它将产生以下结果 −
It will produce the following result −
Matrix transform
如下所示，采用矩阵变换旋转盒子 -
Box rotation with Matrix transforms as shown below −
<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>它将产生以下结果 −
It will produce the following result −
采用矩阵变换，沿另一个方向变换。
Matrix transforms with another direction.
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - 3D Transforms
X-axis 3D transforms
以下示例显示 x 轴 3D 变换。
The following an example shows the x-axis 3D transforms.
<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>它将产生以下结果 −
It will produce the following result −
Y-axis 3D transforms
以下示例展示了 y 轴的 3D 转换：
The following an example shows the y-axis 3D transforms −
<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>它将产生以下结果 −
It will produce the following result −
Z-axis 3D transforms
以下示例展示了 Z 轴的 3D 转换：
The following an example shows the Z-axis 3D transforms −
<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>它将产生以下结果 −
It will produce the following result −
CSS3 - Animation
上面的示例展示了动画的高度、宽度、颜色、名称和持续时间以及关键帧语法。
The above example shows height, width, color, name and duration of animation with keyframes syntax.
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>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
CSS3 - Multi Columns
Example
下面的示例展示了文本作为新纸张结构的排列。
Below example shows the arrangement of text as new paper structure.
<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>它将产生以下结果 −
It will produce the following result −
假设用户想要制作没有行的文字作为新纸张，我们可以通过移除样式语法来实现，如下所示：
For suppose, if user wants to make text as new paper without line, we can do this by removing style syntax as shown below −
.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;
}它将产生以下结果 −
It will produce the following result −
CSS3 - User Interface
Example of resize property
大小属性共有三个常用值，如下所示：
Resize property is having three common values as shown below −
-
horizontal
-
vertical
-
both
在 css3 用户界面中使用 both 值的大小属性：
Using of both value in resize property in css3 user interface −
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>它将产生以下结果 −
It will produce the following result −
CSS3 Outline offset
描边是指在元素外面边框处绘制一条线。
Out line means draw a line around the element at outside of border.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>它将产生以下结果 −
It will produce the following result −
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>它将产生以下结果 −
It will produce the following result −
上面图片的两个元素具有相同的宽度和高度，但呈现结果不同，因为第二张图片包含了填充属性。
Above image is having same width and height of two element but giving result is different, cause second one is included padding property.
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 相同的高度和宽度。结果如下所示。
Above sample is having same height and width with box-sizing:border-box. here result is shown below.
它将产生以下结果 −
It will produce the following result −
上面的元素具有相同的宽度和高度，并带 inline-block ，以便即使结果始终对这两个元素均相同，如下所示。
Above elements are having same height and width with box-sizing:border-box so result is always same for both elements as shown above.
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>它将产生以下结果 −
It will produce the following result −
Media queries
媒体查询适用于不同尺寸设备（如移动设备、台式机等）的不同样式规则。
Media queries is for different style rules for different size devices such as mobiles, desktops, etc.,
<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>它将产生以下结果 −
It will produce the following result −
Bootstrap responsive web design
Bootstrap 是基于 HTML、CSS 和 Java 脚本的最流行的 Web 设计框架，它的帮助您为所有设备以响应式方式设计网页。
Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps you to design web pages in responsive way for all devices.
<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>它将产生以下结果 −
It will produce the following result −