CSS - 快速指南
What is CSS?
Superior styles to HTML - CSS具有比HTML更广泛的属性,因此与HTML属性相比,您可以更好地查看HTML页面。
Multiple Device Compatibility - 样式表允许针对多种类型的设备优化内容。 通过使用相同的HTML文档,可以为诸如PDA和手机之类的手持设备呈现不同版本的网站或用于打印。
Global web standards - 现在不推荐使用HTML属性,建议使用CSS。 因此,最好在所有HTML页面中开始使用CSS,以使它们与未来的浏览器兼容。
谁创建和维护CSS?
CSS是由W3C中称为CSS工作组的一组人员创建和维护的。 CSS工作组创建称为规范的文档。 当W3C成员讨论并正式批准规范时,它就成了推荐。
这些已批准的规范称为建议,因为W3C无法控制该语言的实际实施。 独立的公司和组织创建该软件。
NOTE - 万维网联盟(W3C)是一个向互联网如何运作以及如何发展的建议组。
CSS版本
层叠样式表1级(CSS1)在1996年12月作为推荐出自W3C。该版本描述了CSS语言以及所有HTML标签的简单可视化格式化模型。
CSS2于1998年5月成为W3C推荐标准,并以CSS1为基础。 此版本增加了对特定媒体样式表的支持,例如打印机和听觉设备,可下载字体,元素定位和表格。
CSS - Syntax
selector {property:value}Example - 您可以按如下方式定义表格边框 -
table{ border :1px solid #C00; }
这里的表是一个选择器,border是一个属性,给定值为1px solid #C00是该属性的值。
您可以根据自己的舒适度以各种简单的方式定义选择器。 让我把这些选择器逐一放入。
类型选择器
这与我们上面看到的选择器相同。 再一次,为所有1级标题提供颜色的另一个例子 -
h1 {
color: #36CFFF;
}
通用选择器
通用选择器非常简单地匹配任何元素类型的名称,而不是选择特定类型的元素 -
* {
color: #000000;
}
此规则将文档中每个元素的内容呈现为黑色。
后裔选择器
假设您希望仅在特定元素位于特定元素内时才将样式规则应用于特定元素。 如以下示例所示,样式规则仅在元素位于标记内时才适用于元素。
ul em {
color: #000000;
}
类选择器
您可以根据元素的class属性定义样式规则。 具有该类的所有元素将根据定义的规则进行格式化。
.black {
color: #000000;
}
此规则在文档中将class属性设置为black每个元素呈现为黑色内容。 你可以把它变得更加特别。 例如 -
h1.black {
color: #000000;
}
此规则仅将
元素的内容设置为black并将class属性设置为black 。
您可以将多个类选择器应用于给定元素。 考虑以下示例 -
<p class = "center bold">
This para will be styled by the classes <i>center</i> and <i>bold</i>.
</p>
ID选择器
您可以根据元素的id属性定义样式规则。 具有该id所有元素将根据定义的规则进行格式化。
#black {
color: #000000;
}
对于我们的文档中id属性设置为black每个元素,此规则将内容呈现为black 。 你可以把它变得更加特别。 例如 -
h1#black {
color: #000000;
}
此规则仅将id属性设置为black <h1>元素呈现为black 。
id选择器的真正强大之处在于它们被用作后代选择器的基础,例如 -
#black h2 {
color: #000000;
}
在此示例中,当这些标题位于id属性设置为black标签中时,所有2级标题将以黑色显示。
子选择器
你已经看到了后代选择器。 还有一种类型的选择器,它与后代非常相似,但具有不同的功能。 考虑以下示例 -
body > p {
color: #000000;
}
如果它们是元素的直接子元素,则此规则将呈现所有黑色段落。 放在其他元素(如
属性选择器
您还可以将样式应用于具有特定属性的HTML元素。 下面的样式规则将匹配具有text属性值的text属性的所有输入元素 -
input[type = "text"] {
color: #000000;
}
此方法的优点是<input type="submit"/>元素不受影响,并且颜色仅应用于所需的文本字段。
以下规则适用于属性选择器。
p[lang] - 选择具有lang属性的所有段落元素。
p[lang="fr"] - 选择其lang属性值恰好为“fr”的所有段落元素。
p[lang~="fr"] - 选择其lang属性包含单词“fr”的所有段落元素。
p[lang|="en"] - 选择所有段落元素,其lang属性包含完全为“en”的值,或以“en-”开头。
多种风格规则
您可能需要为单个元素定义多个样式规则。 您可以定义这些规则,以将多个属性和相应的值组合到一个块中,如以下示例中所定义 -
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
这里所有的属性和值对都用semicolon (;) 。 您可以将它们保存在一行或多行中。 为了更好的可读性,我们将它们分开。
有一段时间,请不要理会上面提到的属性。 这些属性将在后面的章节中介绍,您可以在CSS References中找到有关属性的完整详细信息
分组选择器
如果您愿意,可以将样式应用于许多选择器。 只需用逗号分隔选择器,如下例所示 -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
此定义样式规则也适用于h1,h2和h3元素。 列表的顺序无关紧要。 选择器中的所有元素都将应用相应的声明。
您可以将各种id选择器组合在一起,如下所示 -
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
CSS - Inclusion
} h1 {color:maroon; margin-left:40px; } style> head>这是一个标题 h1>
这是一个段落。 p> body> html>
它会产生以下结果 -
新页面打开属性 (Attributes)
与
属性 | 值 | 描述 |
---|---|---|
type | text/css | 将样式表语言指定为内容类型(MIME类型)。 这是必需属性。 |
media | screen tty tv projection handheld braille aural all | 指定将在其上显示文档的设备。 默认值为all 。 这是一个可选属性。 |
内联CSS - style属性
您可以使用任何HTML元素的style属性来定义样式规则。 这些规则仅适用于该元素。 这是通用语法 -
<element style = "...style rules....">
属性 (Attributes)
属性 | 值 | 描述 |
---|---|---|
style | 风格规则 | style属性的值是由分号(;)分隔的样式声明的组合。 |
例子 (Example)
以下是基于上述语法的内联CSS示例 -
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
它会产生以下结果 -
新页面打开外部CSS - 元素
元素可用于在HTML文档中包含外部样式表文件。
外部样式表是具有.css扩展名的单独文本文件。 您可以在此文本文件中定义所有样式规则,然后可以使用“link”元素将此文件包含在任何HTML文档中。
以下是包含外部CSS文件的通用语法 -
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
属性 (Attributes)
与
属性 | 值 | 描述 |
---|---|---|
type | 文字css | 将样式表语言指定为内容类型(MIME类型)。 此属性是必需的。 |
href | URL | 指定具有样式规则的样式表文件。 此属性是必需的。 |
media |
screen tty tv projection handheld braille aural all | 指定将在其上显示文档的设备。 默认值为all 。 这是可选属性。 |
例子 (Example)
考虑一个名为mystyle.css的简单样式表文件,其中包含以下规则 -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
现在,您可以在任何HTML文档中包含此文件mystyle.css ,如下所示 -
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>
导入的CSS - @import规则
@import用于以类似于元素的方式导入外部样式表。 这是@import规则的通用语法。
<head>
<@import "URL";
</head>
此处URL是具有样式规则的样式表文件的URL。 您也可以使用其他语法 -
<head>
<@import url("URL");
</head>
例子 (Example)
以下是演示如何将样式表文件导入HTML文档的示例 -
<head>
@import "mystyle.css";
</head>
CSS规则覆盖
我们已经讨论了在HTML文档中包含样式表规则的四种方法。 以下是覆盖任何样式表规则的规则。
任何内联样式表都具有最高优先级。 因此,它将覆盖在任何外部样式表文件中定义的
style 标记中定义的任何规则都将覆盖任何外部样式表文件中定义的规则。
外部样式表文件中定义的任何规则都具有最低优先级,并且仅当上述两个规则不适用时,才会应用此文件中定义的规则。
处理旧浏览器
仍然有许多旧浏览器不支持CSS。 因此,我们应该在HTML文档中编写嵌入式CSS时注意。 以下代码段显示了如何使用注释标记隐藏旧浏览器中的CSS -
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>
CSS评论
很多时候,您可能需要在样式表块中添加其他注释。 因此,在样式表中评论任何部分都非常容易。 你可以简单地把你的评论放在/*.这是样式表中的评论..... * /。
您可以使用/ * .... * /以与C和C ++编程语言类似的方式注释多行块。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Measurement Units
%将测量值定义为相对于另一个值的百分比,通常是封闭元素。 p {font-size:16pt; line-height:125%;} cm以厘米为单位定义测量值。 div {margin-bottom:2cm;} em em空间中字体高度的相对测量值。 因为em单位等于给定字体的大小,如果你将字体分配给12pt,每个“em”单位将是12pt; 因此,2em将是24pt。 p {letter-spacing:7em;} ex此值定义相对于字体x高度的测量值。 x高度由字体的小写字母x的高度决定。 p {font-size:24pt; line-height:3ex;} in以英寸为单位定义测量值。 p {字距:.15in;} mm定义以毫米为单位的测量值。 p {字距:15mm;} pc定义皮卡的测量值。 异食癖相当于12分; 因此,每英寸有6皮卡。 p {font-size:20pc;} pt以点为单位定义测量值。 一个点定义为1/72英寸。 body {font-size:18pt;} px以屏幕像素定义测量值。 p {padding:25px;}CSS - Colors
十六进制代码#RRGGBB p {颜色:#FF0000;}短十六进制代码#RGB p {颜色:#6A7;} RGB%rgb(rrr%,ggg%,bbb%)p {颜色:rgb(50%,50%, 50%);} RGB绝对rgb(rrr,ggg,bbb)p {color:rgb(0,0,255);}关键字浅绿色,黑色等p {color:teal;}以下各节将详细介绍这些格式 -
CSS颜色 - 十六进制代码
十六进制是颜色的6位数表示。 前两位(RR)表示红色值,接下来的两位是绿色值(GG),最后两位是蓝色值(BB)。
十六进制值可以从Adobe Photoshop,Jasc Paintshop Pro等任何图形软件中获取,甚至可以使用Advanced Paint Brush。
每个十六进制代码前面都会有一个井号或井号“#”。 以下是使用十六进制表示法的示例。
颜色 | 颜色HEX |
---|---|
#000000 | |
#FF0000 | |
#00FF00 | |
#0000FF | |
#FFFF00 | |
#00FFFF | |
#FF00FF | |
#C0C0C0 | |
#FFFFFF |
CSS颜色 - 短十六进制代码
这是六位数表示法的缩写形式。 在这种格式中,每个数字都被复制以获得等效的六位数值。 例如:#6A7成为#66AA77。
十六进制值可以从Adobe Photoshop,Jasc Paintshop Pro等任何图形软件中获取,甚至可以使用Advanced Paint Brush。
每个十六进制代码前面都会有一个井号或井号“#”。 以下是使用十六进制表示法的示例。
颜色 | 颜色HEX |
---|---|
#000 | |
#F00 | |
#0F0 | |
#0FF | |
#FF0 | |
#0FF | |
#F0F | |
#FFF |
CSS颜色 - RGB值
使用rgb( )属性指定此颜色值。 此属性有三个值,分别为红色,绿色和蓝色。 该值可以是0到255之间的整数或百分比。
NOTE - 所有浏览器都不支持颜色的rgb()属性,因此建议不要使用它。
以下是使用RGB值显示少量颜色的示例。
颜色 | 颜色RGB |
---|---|
rgb(0,0,0) | |
rgb(255,0,0) | |
rgb(0,255,0) | |
rgb(0,0,255) | |
rgb(255,255,0) | |
rgb(0,255,255) | |
rgb(255,0,255) | |
rgb(192,192,192) | |
rgb(255,255,255) |
建立颜色代码
您可以使用我们的颜色代码生成器构建数百万个颜色代码。 检查我们的HTML Color Code Builder 。 要使用此工具,您需要一个Java Enabled Browser。
浏览器安全颜色
以下是216种颜色的列表,这些颜色应该是最安全和独立于计算机的颜色。 这些颜色从六进制代码000000到FFFFFF不等。 这些颜色可以安全使用,因为它们确保所有计算机在运行256色调色板时都能正确显示颜色 -
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
CSS - Backgrounds
设置背景颜色
以下是演示如何设置元素背景颜色的示例。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "background-color:yellow;"</b>>
This text has a yellow background color.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置背景图像
我们可以通过调用本地存储的图像来设置背景图像,如下所示 -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>
它会产生以下结果 -
新页面打开重复背景图像
以下示例演示了如果图像很小,如何重复背景图像。 如果您不想重复图像,则可以对background-repeat属性使用no-repeat值,在这种情况下,图像只显示一次。
默认情况下, background-repeat属性将具有repeat值。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何垂直重复背景图像。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何水平重复背景图像。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置背景图像位置
以下示例演示如何将背景图像位置设置为距离左侧100像素。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何将背景图像位置设置为距离左侧100像素,距离顶部200像素。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置背景附件
背景附件确定背景图像是固定的还是与页面的其余部分一起滚动。
以下示例演示如何设置固定背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何设置滚动背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
它会产生以下结果 -
新页面打开速记属性
您可以使用background属性一次设置所有背景属性。 例如 -
<p <b class="notranslate">style = "background:url(/images/pattern1.gif) repeat fixed;"</b>>
This parapgraph has fixed repeated background image.
</p>
CSS - Fonts
设置字体系列
以下是示例,演示如何设置元素的字体系列。 可能的值可以是任何字体系列名称。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-family:georgia,garamond,serif;"</b>>
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>
这将产生以下结果 -
新页面打开设置字体样式
以下是示例,演示如何设置元素的字体样式。 可能的值为normal, italic and oblique 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-style:italic;"</b>>
This text will be rendered in italic style
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体变体
以下示例演示如何设置元素的字体变体。 可能的值是normal and small-caps 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-variant:small-caps;"</b>>
This text will be rendered as small caps
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体粗细
以下示例演示如何设置元素的字体粗细。 font-weight属性提供指定字体粗体的功能。 可能的值可以是normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-weight:bold;"</b>>
This font is bold.
</p>
<p <b class="notranslate">style = "font-weight:bolder;"</b>>
This font is bolder.
</p>
<p <b class="notranslate">style = "font-weight:500;"</b>>
This font is 500 weight.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体大小
以下示例演示如何设置元素的字体大小。 font-size属性用于控制字体的大小。 可能的值可以是xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in % 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-size:20px;"</b>>
This font size is 20 pixels
</p>
<p <b class="notranslate">style = "font-size:small;"</b>>
This font size is small
</p>
<p <b class="notranslate">style = "font-size:large;"</b>>
This font size is large
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体大小调整
以下示例演示如何设置元素的字体大小调整。 使用此属性可以调整x高度以使字体更清晰。 可能的值可以是任何数字。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-size-adjust:0.61;"</b>>
This text is using a font-size-adjust value.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置Font Stretch
以下示例演示如何设置元素的字体拉伸。 此属性依赖于用户的计算机来使用所使用字体的扩展版或精简版。
可能的值可以是normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-stretch:ultra-expanded;"</b>>
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>
这将产生以下结果 -
新页面打开速记属性
您可以使用font属性一次设置所有字体属性。 例如 -
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font:italic small-caps bold 15px georgia;"</b>>
Applying all the properties on the text at once.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开CSS - Text
text-decoration属性用于下划线,上划线和删除文本。
text-transform属性用于大写文本或将文本转换为大写或小写字母。
white-space属性用于控制文本的流和格式。
text-shadow属性用于设置文本周围的文本阴影。
设置文本颜色
以下示例演示如何设置文本颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "color:red;"</b>>
This text will be written in red.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置文本方向
以下示例演示如何设置文本的方向。 可能的值是ltr or rtl 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "direction:rtl;"</b>>
This text will be rendered from right to left
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置字符之间的空格
以下示例演示如何设置字符之间的空格。 可能的值是normal or a number specifying space. 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "letter-spacing:5px;"</b>>
This text is having space between letters.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置单词之间的空间
以下示例演示如何设置单词之间的空格。 可能的值是normal or a number specifying space 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "word-spacing:5px;"</b>>
This text is having space between words.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文本缩进
以下示例演示如何缩进段落的第一行。 可能的值为% or a number specifying indent space 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-indent:1cm;"</b>>
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置文本对齐方式
以下示例演示如何对齐文本。 可能的值为left, right, center, justify 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-align:right;"</b>>
This will be right aligned.
</p>
<p <b class="notranslate">style = "text-align:center;"</b>>
This will be center aligned.
</p>
<p <b class="notranslate">style = "text-align:left;"</b>>
This will be left aligned.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开装饰文本
以下示例演示如何装饰文本。 可能的值为none, underline, overline, line-through, blink 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-decoration:underline;"</b>>
This will be underlined
</p>
<p <b class="notranslate">style = "text-decoration:line-through;"</b>>
This will be striked through.
</p>
<p <b class="notranslate">style = "text-decoration:overline;"</b>>
This will have a over line.
</p>
<p <b class="notranslate">style = "text-decoration:blink;"</b>>
This text will have blinking effect
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文本案例
以下示例演示如何设置文本的大小写。 可能的值为none, capitalize, uppercase, lowercase 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-transform:capitalize;"</b>>
This will be capitalized
</p>
<p <b class="notranslate">style = "text-transform:uppercase;"</b>>
This will be in uppercase
</p>
<p <b class="notranslate">style = "text-transform:lowercase;"</b>>
This will be in lowercase
</p>
</body>
</html>
这将产生以下结果 -
新页面打开在文本之间设置空格
以下示例演示如何处理元素内的空白。 可能的值是normal, pre, nowrap 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "white-space:pre;"</b>>
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文字阴影
以下示例演示如何在文本周围设置阴影。 所有浏览器可能都不支持此功能。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-shadow:4px 4px 8px blue;"</b>>
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Using Images
图像边框属性
图像的border属性用于设置图像边框的宽度。 此属性的长度或值可以是%。
零像素宽度表示没有边框。
这是一个例子 -
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>
它会产生以下结果 -
新页面打开图像高度属性
图像的height属性用于设置图像的高度。 此属性的长度或值可以是%。 虽然以%表示值,但它适用于图像可用的框。
这是一个例子 -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>
它会产生以下结果 -
新页面打开图像宽度属性
图像的width属性用于设置图像的宽度。 此属性的长度或值可以是%。 虽然以%表示值,但它适用于图像可用的框。
这是一个例子 -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>
它会产生以下结果 -
新页面打开-moz-opacity属性
图像的-moz-opacity属性用于设置图像的不透明度。 此属性用于在Mozilla中创建透明图像。 IE使用filter:alpha(opacity=x)来创建透明图像。
在Mozilla中(-moz-opacity:x)x可以是0.0到1.0之间的值。 较低的值使元素更透明(CSS3有效语法不透明度相同:x)。
在IE中(filter:alpha(opacity = x))x可以是0到100之间的值。较低的值使元素更透明。
这是一个例子 -
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Links
通常,所有这些属性都保存在HTML文档的标题部分中。
记住a:hover必须在a:link和a:在CSS定义中访问才能生效。 此外,a:主动必须在a:hover之后出现在CSS定义中,如下所示 -
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
现在,我们将看到如何使用这些属性为超链接提供不同的效果。
设置链接的颜色
以下示例演示如何设置链接颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
它将产生以下黑色链接 -
新页面打开设置访问链接的颜色
以下示例演示如何设置已访问链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>
它将产生以下链接。 单击此链接后,它会将其颜色更改为绿色。
新页面打开鼠标结束时更改链接的颜色
以下示例演示了当我们将鼠标指针悬停在该链接上时如何更改链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
它将产生以下链接。 现在,您将鼠标悬停在此链接上,您将看到它将其颜色更改为黄色。
新页面打开更改活动链接的颜色
以下示例演示如何更改活动链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
它将产生以下链接。 当用户点击它时,它会将其颜色更改为粉红色。
新页面打开CSS - Tables
现在,我们将看到如何将这些属性与示例一起使用。
边界崩溃的财产
此属性可以有两个值collapse和separate 。 以下示例使用两个值 -
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
它会产生以下结果 -
新页面打开border-spacing属性
border-spacing属性指定分隔相邻单元格的距离。 边界。 它可以采用一个或两个值; 这些应该是长度单位。
如果提供一个值,它将应用于垂直和水平边框。 或者您可以指定两个值,在这种情况下,第一个引用水平间距,第二个引用垂直间距 -
NOTE - 不幸的是,此属性在Netscape 7或IE 6中不起作用。
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
现在让我们修改前面的例子,看看效果 -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
它会产生以下结果 -
新页面打开标题侧属性
标题侧属性允许您指定
此属性可以具有top, bottom, left或right四个值中的一个。 以下示例使用每个值。
NOTE - 这些属性可能不适用于您的IE浏览器。
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
它会产生以下结果 -
新页面打开空单元格属性
empty-cells属性指示没有任何内容的单元格是否应显示边框。
此属性可以具有三个值之一 - show, hide或inherit 。
以下是用于隐藏
<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>
它会产生以下结果 -
新页面打开表格布局属性
table-layout属性可以帮助您控制浏览器呈现或布置表的方式。
此属性可以具有以下三个值之一: fixed, auto或inherit 。
以下示例显示了这些属性之间的差异。
NOTE - 许多浏览器不支持此属性,因此不要依赖此属性。
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Borders
border-color属性允许您更改元素周围边框的颜色。 您可以使用属性单独更改元素边框的底部,左侧,顶部和右侧的颜色 -
border-bottom-color更改底部边框的颜色。
border-top-color更改顶部边框的颜色。
border-left-color更改左边框的颜色。
border-right-color更改右边框的颜色。
以下示例显示了所有这些属性的效果 -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开边境式物业
border-style属性允许您选择以下边框样式之一 -
none - 没有边界。 (相当于border-width:0;)
solid - Border是一条实线。
dotted - 边框是一系列点。
dashed - 边界是一系列短线。
double - Border是两条实线。
groove - 边框看起来好像刻在页面上。
ridge - 边框看起来与沟槽相反。
inset - 边框使框看起来像嵌入在页面中。
outset - 边框使框看起来像是从画布中出来的。
hidden - 与none无关,除了表元素的边界冲突解决方案。
您可以使用以下属性单独更改元素的底部,左侧,顶部和右侧边框的样式 -
border-bottom-style改变底部边框的样式。
border-top-style改变顶部边框的样式。
border-left-style改变左边框的样式。
border-right-style改变右边框的样式。
以下示例显示了所有这些边框样式 -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开border-width属性
border-width属性允许您设置元素边框的宽度。 此属性的值可以是px,pt或cm的长度,也可以设置为thin, medium or thick.
您可以使用以下属性单独更改元素的底部,顶部,左侧和右侧边框的宽度 -
border-bottom-width更改底部边框的宽度。
border-top-width更改顶部边框的宽度。
border-left-width更改左边框的宽度。
border-right-width更改右边框的宽度。
以下示例显示了所有这些边框宽度 -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开使用速记的边界属性
border属性允许您在一个属性中指定行的颜色,样式和宽度 -
以下示例显示如何将所有三个属性用于单个属性。 这是在任何元素周围设置边框的最常用属性。
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Margins
margin-right指定元素的右边距。
现在,我们将看到如何将这些属性与示例一起使用。
保证金财产
margin属性允许您在一个声明中设置四个边距的所有属性。 以下是在段落周围设置边距的语法 -
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>
它会产生以下结果 -
新页面打开保证金底部属性
margin-bottom属性允许您设置元素的下边距。 它可以有一个长度值,%或auto。
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开保证金最高的财产
margin-top属性允许您设置元素的上边距。 它可以有一个长度值,%或auto。
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开保证金左边的财产
margin-left属性允许您设置元素的左边距。 它可以有一个长度值,%或auto。
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开保证金权利
margin-right属性允许您设置元素的右边距。 它可以有一个长度值,%或auto。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Lists
现在,我们将看到如何将这些属性与示例一起使用。
list-style-type属性
list-style-type属性允许您在无序列表的情况下控制项目符号的形状或样式(也称为标记)以及有序列表中编号字符的样式。
以下是可用于无序列表的值 -
Sr.No. | 价值和描述 |
---|---|
1 | none NA |
2 | disc (default) 一个填充的圆圈 |
3 | circle 一个空的圆圈 |
4 | square 一个填充的广场 |
以下是可用于有序列表的值 -
值 | 描述 | 例 |
---|---|---|
decimal | Number | 1,2,3,4,5 |
decimal-leading-zero | 数字前面的0 | 01, 02, 03, 04, 05 |
lower-alpha | 小写字母数字字符 | a, b, c, d, e |
upper-alpha | 大写字母数字字符 | A, B, C, D, E |
lower-roman | 小写罗马数字 | i, ii, iii, iv, v |
upper-roman | 大写罗马数字 | I, II, III, IV, V |
lower-greek | 标记是低希腊语 | alpha, beta, gamma |
lower-latin | 标记是低拉丁语 | a, b, c, d, e |
upper-latin | 标记是上拉丁语 | A, B, C, D, E |
hebrew | 标记是传统的希伯来语编号 | |
armenian | 标记是传统的亚美尼亚编号 | |
georgian | 标记是传统的格鲁吉亚编号 | |
cjk-ideographic | 标记是简单的表意数字 | |
hiragana | 标记是平假名 | a, i, u, e, o, ka, ki |
katakana | 标记是片假名 | A, I, U, E, O, KA, KI |
hiragana-iroha | 标记是平假名 - iroha | i, ro, ha, ni, ho, he, to |
katakana-iroha | 标记是片假名 - iroha | I, RO, HA, NI, HO, HE, TO |
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开list-style-position属性
list-style-position属性指示标记是否应出现在包含项目符号点的框的内部或外部。 它可以有两个值 -
Sr.No. | 价值和描述 |
---|---|
1 | none NA |
2 | inside 如果文本进入第二行,则文本将包裹在标记下方。 如果列表的值为outside,它也会缩进到文本开始的位置。 |
3 | outside 如果文本转到第二行,则文本将与第一行的开头(子弹的右侧)对齐。 |
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开list-style-image属性
list-style-image允许您指定图像,以便您可以使用自己的项目符号样式。 语法类似于background-image属性,其中字母url以属性值开头,后跟括号中的URL。 如果找不到给定的图像,则使用默认的项目符号。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开列表样式的属性
list-style允许您将所有列表属性指定为单个表达式。 这些属性可以按任何顺序出现。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开marker-offset属性
marker-offset属性允许您指定标记与该标记相关的文本之间的距离。 它的值应该是一个长度,如下例所示 -
不幸的是,IE 6或Netscape 7不支持此属性。
这是一个例子 -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Paddings
padding用作前面属性的简写。
现在,我们将看到如何将这些属性与示例一起使用。
填充底部属性
padding-bottom属性设置元素的底部填充(空格)。 这可以采用%的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充顶部属性
padding-top属性设置元素的顶部填充(空格)。 这可以采用%的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充左侧属性
padding-left属性设置元素的左边距(空格)。 这可以采用%的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充权属性
padding-right属性设置元素的右边距(空格)。 这可以采用%的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>
它会产生以下结果 -
新页面打开填充属性
padding属性设置元素的左,右,上和下填充(空格)。 这可以采用%的长度值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Cursors
1auto
光标的形状取决于它结束的上下文区域。 例如,我在文本上,在链接上移动,等等......
2crosshair
十字准线或加号
3default
一个箭头
4pointer
指针(在IE 4中这个值是手)
五move
我吧
6e-resize
光标指示框的边缘要向右移动(向东)
7ne-resize
光标指示框的边缘向上和向右移动(北/东)
8nw-resize
光标指示框的边缘向上和向左移动(北/西)
9n-resize
光标指示框的边缘向上移动(北)
10se-resize
光标指示框的边缘向下和向右移动(南/东)
11sw-resize
光标指示框的边缘向下和向左移动(南/西)
12s-resize
光标指示框的边缘向下移动(向南)
13w-resize
光标指示框的边缘向左(西)移动
14text
我吧
15wait
一小时玻璃
16help
问号或气球,非常适合在帮助按钮上使用
17《url》
光标图像文件的来源
NOTE - 您应该尝试仅使用这些值为用户添加有用的信息,并且在某些地方,他们希望看到该光标。 例如,当某人悬停在链接上时使用十字准线可能会使访问者感到困惑。
这是一个例子 -
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Outlines
outline-width属性用于设置轮廓的宽度。
outline-style属性用于设置轮廓的线条样式。
outline-color属性用于设置轮廓的颜色。
outline属性用于在单个语句中设置上述所有三个属性。
outline-width属性
outline-width属性指定要添加到框中的轮廓的宽度。 它的值应该是一个长度或thin, medium, or thick,的值之一thin, medium, or thick,就像border-width属性一样。
零像素宽度表示没有轮廓。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开大纲样式属性
outline-style属性指定围绕元素的线条(实线,点线或虚线)的样式。 它可以采用以下值之一 -
none - 没有边界。 (相当于outline-width:0;)
solid - Outline是一条实线。
dotted - 大纲是一系列点。
dashed - 大纲是一系列短线。
double - Outline是两条实线。
groove - 轮廓看起来好像刻在页面上。
ridge - 轮廓看起来与凹槽相反。
inset - Outline使框看起来像是嵌入在页面中。
outset - Outline使框看起来像是从画布中出来的。
hidden - 与无相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开轮廓颜色属性
outline-color属性允许您指定轮廓的颜色。 它的值应该是颜色名称,十六进制颜色或RGB值,与颜色和边框颜色属性一样。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开大纲属性
outline属性是一个速记属性,允许您以任何顺序但在单个语句中指定前面讨论的三个属性中的任何一个的值。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Dimension
max-width属性用于设置框的最大宽度。
min-width属性用于设置框的最小宽度。
高度和宽度属性
height和width属性允许您设置框的高度和宽度。 他们可以获取长度,百分比或关键字auto的值。
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开行高属性
line-height属性允许您增加文本行之间的空间。 line-height属性的值可以是数字,长度或百分比。
这是一个例子 -
<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>
它会产生以下结果 -
新页面打开最大高度属性
max-height属性允许您指定框的最大高度。 max-height属性的值可以是数字,长度或百分比。
NOTE - 此属性在Netscape 7或IE 6中不起作用。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>
它会产生以下结果 -
新页面打开最小高度属性
min-height属性允许您指定框的最小高度。 min-height属性的值可以是数字,长度或百分比。
NOTE - 此属性在Netscape 7或IE 6中不起作用。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>
它会产生以下结果 -
新页面打开最大宽度属性
max-width属性允许您指定框的最大宽度。 max-width属性的值可以是数字,长度或百分比。
NOTE - 此属性在Netscape 7或IE 6中不起作用。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>
这将产生以下结果 -
新页面打开最小宽度属性
min-width属性允许您指定框的最小宽度。 min-width属性的值可以是数字,长度或百分比。
NOTE - 此属性在Netscape 7或IE 6中不起作用。
这是一个例子 -
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Scrollbars
1visible
允许内容溢出其包含元素的边框。
2hidden
嵌套元素的内容只是在包含元素的边界处被截断,并且没有可见的滚动条。
3scroll
包含元素的大小不会更改,但会添加滚动条以允许用户滚动以查看内容。
4auto
其目的与滚动相同,但仅当内容溢出时才会显示滚动条。
这是一个例子 -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Visibility
1visible
该框及其内容将显示给用户。
2hidden
该框及其内容不可见,但它们仍会影响页面的布局。
3collapse
这仅适用于动态表列和行效果。
这是一个例子 -
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Positioning
NOTE - 您也可以使用bottom或right值,方法与top和left相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b class="notranslate">position:relative; left:80px; top:2px;</b> background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开绝对定位
position: absolute的元素position: absolute相对于屏幕左上角的指定坐标处。
您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 左侧使用负值。
- 向右移动 - 使用left的正值。
- 上移 - 使用top的负值。
- 下移 - 为top使用正值。
NOTE - 您也可以使用bottom或right值,方法与顶部和左侧相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b class="notranslate">position:absolute; left:80px; top:20px; </b>background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
新页面打开固定定位
固定定位允许您将元素的位置固定到页面上的特定位置,而不管滚动。 指定的坐标将相对于浏览器窗口。
您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。
- 向左移动 - 左侧使用负值。
- 向右移动 - 使用left的正值。
- 上移 - 使用top的负值。
- 下移 - 为top使用正值。
NOTE - 您也可以使用bottom或right值,方法与top和left相同。
这是一个例子 -
<html>
<head>
</head>
<body>
<div style = "<b class="notranslate">position:fixed; left:80px; top:20px; </b>background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
新页面打开CSS - Layers
它会产生以下结果 -
新页面打开CSS - Pseudo Classes
最常用的伪类如下 -
Sr.No. | 价值和描述 |
---|---|
1 | :link 使用此类可以为未访问的链接添加特殊样式。 |
2 | :visited 使用此类可以为访问链接添加特殊样式。 |
3 | :hover 将鼠标悬停在元素上时,可以使用此类为元素添加特殊样式。 |
4 | :active 使用此类可以向活动元素添加特殊样式。 |
5 | :focus 当元素具有焦点时,使用此类为元素添加特殊样式。 |
6 | :first-child 使用此类可以向作为某个其他元素的第一个子元素的元素添加特殊样式。 |
7 | :lang 使用此类指定要在指定元素中使用的语言。 |
在
a:hover必须在a:link和a:在CSS定义中访问才能生效。
a:主动必须在a:hover in CSS定义后才能生效。
伪类名称不区分大小写。
伪类与CSS类不同,但它们可以组合在一起。
:link伪类
以下示例演示如何使用:link类设置链接颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>
它将产生以下黑色链接 -
新页面打开:访问伪类
以下是演示如何使用:visited类设置访问过的链接的颜色的示例。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>
这将产生以下链接。 单击此链接后,它会将其颜色更改为绿色。
新页面打开:hover伪类
下面的示例演示如何使用:hover类在我们将鼠标指针悬停在该链接上时更改链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>
它将产生以下链接。 现在,您将鼠标悬停在此链接上,您将看到它将其颜色更改为黄色。
新页面打开:active伪类
以下示例演示如何使用:active类更改活动链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>
它将产生以下链接。 当用户点击它时,颜色变为粉红色。
新页面打开:焦点伪类
以下示例演示如何使用:focus类更改聚焦链接的颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>
它将产生以下链接。 当此链接聚焦时,其颜色变为橙色。 失去焦点时颜色会变回。
新页面打开:first-child伪类
:first-child伪类匹配指定的元素,该元素是另一个元素的第一个子元素,并为该元素添加特殊样式,该元素是某个其他元素的第一个子元素。
要使:IE中的第一个孩子工作必须在文档顶部声明。
例如,要缩进所有
<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>
它会产生以下结果 -
新页面打开:lang伪类
语言伪类:lang允许根据特定标记的语言设置构造选择器。
此类在必须吸引多种语言的文档中非常有用,这些语言对于某些语言结构具有不同的约定。 例如,法语通常使用尖括号()进行引用,而英语则使用引号('和')。
在需要解决此差异的文档中,您可以使用:lang伪类来适当地更改引号。 以下代码针对所使用的语言适当更改
标记 -
<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选择器将应用于文档中的所有元素。 但是,并非所有元素都使用quotes属性,因此对大多数元素的效果都是透明的。
它会产生以下结果 -
新页面打开CSS - Pseudo Elements
最常用的伪元素如下 -
Sr.No. | 价值和描述 |
---|---|
1 | :first-line 使用此元素可将特殊样式添加到选择器中文本的第一行。 |
2 | :first-letter 使用此元素将特殊样式添加到选择器中文本的第一个字母。 |
3 | :before 使用此元素在元素前插入一些内容。 |
4 | :after 使用此元素在元素后插入一些内容。 |
:第一行伪元素
以下示例演示如何使用:first-line元素向文档中的第一行元素添加特殊效果。
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>
它将产生以下链接 -
新页面打开:第一个字母的伪元素
以下示例演示如何使用:first-letter元素将特殊效果添加到文档中元素的第一个字母。
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>
它将产生以下黑色链接 -
新页面打开:之前的伪元素
以下示例演示如何使用:before元素在任何元素之前添加一些内容。
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>
它将产生以下黑色链接 -
新页面打开:伪后元素
以下示例演示如何使用:after元素在任何元素之后添加一些内容。
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>
它将产生以下黑色链接 -
新页面打开CSS - @ Rules
@import规则
@import规则允许您从另一个样式表导入样式。 它应该出现在任何规则之前的样式表的开头,它的值是一个URL。
它可以用以下两种方式之一编写 -
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>
@import规则的重要性在于它允许您使用模块化方法开发样式表。 您可以创建各种样式表,然后将它们包含在您需要的任何位置。
@charset规则
如果使用ASCII或ISO-8859-1以外的字符集编写文档,则可能需要在样式表的顶部设置@charset规则,以指示样式表的写入字符集。
@charset规则必须直接写在样式表的开头,甚至没有空格。 该值保存在引号中,应该是标准字符集之一。 例如 -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>
@ font-face规则
@ font-face规则用于详尽地描述在文档中使用的字体。 @ font-face也可用于定义要下载的字体的位置,尽管这可能会遇到特定于实现的限制。
一般来说,@ font-face非常复杂,除了那些专业的字体指标外,不推荐使用它。
这是一个例子 -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>
重要的规则
级联样式表级联。 这意味着样式的应用顺序与浏览器读取的顺序相同。 应用第一种样式,然后应用第二种样式,依此类推。
!important规则提供了一种制作CSS级联的方法。 它还包括始终应用的规则。 无论CSS文档中出现何种规则,都将始终应用具有!important属性的规则。
例如,在以下样式表中,段落文本将为黑色,即使应用的第一个样式属性为红色:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>
因此,如果要确保始终应用属性,则应将!important属性添加到标记中。 因此,要使段落文本始终为红色,您应该按如下方式编写 -
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>iowiki.com</p>
</body>
</html>
在这里你做了p { color: #ff0000 !important; } 强制性,现在这个规则总是适用,即使你已经定义了另一个规则p { color: #000000; } p { color: #000000; }
它会产生以下结果 -
新页面打开CSS Filters - Text and Image Effects
1opacity
不透明度。 0是完全透明的,100是完全不透明的。
2finishopacity
对象另一端的不透明度级别。
3style
不透明度渐变的形状。
0 =均匀
1 =线性
2 =径向
3 =矩形
4startX
开始使用不透明度渐变的X坐标。
五startY
开始使用不透明度渐变的Y坐标。
6finishX
不透明度渐变的X坐标结束。
7finishY
不透明度渐变的Y坐标结束。
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></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><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开运动模糊
运动模糊用于创建带有方向和强度的模糊图片或文本。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | add 对或错。 如果为true,则将图像添加到模糊图像中; 如果为false,则图像不会添加到模糊图像中。 |
2 | direction 模糊的方向,顺时针方向,四舍五入到45度增量。 默认值为270(左)。 0 =顶部 45 =右上角 90 =对 135 =右下角 180 =底部 225 =左下角 270 =左 315 =左上角 |
3 | strength 模糊将延伸的像素数。 默认值为5像素。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开色度滤镜
色度滤镜用于使任何特定颜色透明,通常用于图像。 您也可以将它与滚动条一起使用。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | color 你想要透明的颜色。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开投影效果
投影用于在指定的X(水平)和Y(垂直)偏移和颜色处创建对象的阴影。
此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | color Drophadow的颜色,采用#RRGGBB格式。 |
2 | offX 阴影沿着x轴从视觉对象偏移的像素数。 正整数将阴影移动到右侧,负整数将阴影移动到左侧。 |
3 | offY 投影阴影沿y轴偏离视觉对象的像素数。 正整数向下移动阴影,负整数向下移动投影。 |
4 | positive 如果为true,则对象的所有不透明像素都有阴影。 如果为false,则所有透明像素都有阴影。 默认值为true。 |
例子 (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>
它会产生以下结果 -
新页面打开翻转效果
翻转效果用于创建对象的镜像。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | FlipH 创建水平镜像 |
2 | FlipV 创建垂直镜像 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></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><b class="notranslate">Text Example:</b></p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>
它会产生以下结果 -
新页面打开发光效果
发光效果用于在对象周围创建发光。 如果它是透明图像,则会在其不透明像素周围创建发光。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | color 你希望发光的颜色。 |
2 | strength 发光强度(从1到255)。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开灰度效应
灰度效果用于将对象的颜色转换为256灰度。 此过滤器中使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | grayscale 将对象的颜色转换为256种灰度。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p><b class="notranslate">Text Example:</b></p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>
它会产生以下结果 -
新页面打开反转效果
反转效果用于将对象的颜色映射到它们在色谱中的相反值,即,创建负像。 此过滤器中使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | Invert 将对象的颜色映射到颜色光谱中的相反值。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p><b class="notranslate">Text Example:</b></p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>
它会产生以下结果 -
新页面打开面具效果
蒙版效果用于将透明像素转换为指定颜色,并使不透明像素透明。 此过滤器中使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | color 透明区域将变成的颜色。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开阴影过滤器
阴影滤镜用于在指定的方向和颜色上创建衰减阴影。 这是一个位于Dropshadow和Glow之间的过滤器。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | color 你想要阴影的颜色。 |
2 | direction 模糊的方向,顺时针方向,四舍五入到45度增量。 默认值为270(左)。 0 =顶部 45 =右上角 90 =对 135 =右下角 180 =底部 225 =左下角 270 =左 315 =左上角 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p><b class="notranslate">Text Example:</b></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>
它会产生以下结果 -
新页面打开波浪效应
波浪效应用于给对象提供正弦波失真,使其看起来呈波浪状。 此过滤器中可以使用以下参数 -
Sr.No. | 参数和描述 |
---|---|
1 | add 值为1会将原始图像添加到波形图像,0则不会。 |
2 | freq 波浪的数量。 |
3 | light 波浪上的光强度(从0到100)。 |
4 | phase 正弦波应该在何种程度上开始(从0到100)。 |
5 | strength 波浪效应的强度。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></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><b class="notranslate">Text Example:</b></p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>
它会产生以下结果 -
新页面打开X-Ray Effect
X射线效果灰度和颜色深度变平。 此过滤器中使用以下参数:
Sr.No. | 参数和描述 |
---|---|
1 | xray 灰度和颜色深度变平。 |
例子 (Example)
<html>
<head>
</head>
<body>
<p><b class="notranslate">Image Example:</b></p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p><b class="notranslate">Text Example:</b></p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS - Media Types
以下是一个例子 -
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>
文件语言
在HTML 4.0中,LINK元素上的media属性指定外部样式表的目标媒体 -
以下是一个例子 -
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>
认可的媒体类型
为CSS媒体类型选择的名称反映了相关属性有意义的目标设备。 它们可以让您了解媒体类型所指的设备。 以下是各种媒体类型的列表 -
Sr.No. | 价值和描述 |
---|---|
1 | all 适用于所有设备。 |
2 | aural 用于语音合成器。 |
3 | braille 用于盲文触觉反馈设备。 |
4 | embossed 适用于分页盲文打印机。 |
5 | handheld 适用于手持设备(通常为小屏幕,单色,有限带宽)。 |
6 | 适用于分页,不透明材质以及在打印预览模式下在屏幕上查看的文档。 请参阅分页媒体部分。 |
7 | projection 用于投影演示,例如投影仪或打印到透明胶片。 请参阅分页媒体部分。 |
8 | screen 主要用于彩色电脑屏幕。 |
9 | tty 适用于使用固定间距字符网格的媒体,例如电视类型,终端或具有有限显示功能的便携式设备。 |
10 | tv 用于电视类设备。 |
NOTE - 媒体类型名称不区分大小写。
CSS Paged Media - @page Rule
CSS2定义了一个“页面框”,一个有限维度的框,其中呈现内容。 页面框是一个包含两个区域的矩形区域 -
The page area - 页面区域包括在该页面上布置的框。 页面区域的边缘充当在分页符之间发生的布局的初始包含块。
The margin area - 它围绕页面区域。
您可以在@page规则中指定页面框的尺寸,方向,边距等。 页面框的尺寸使用'size'属性设置。 页面区域的尺寸是页面框的尺寸减去边距区域。
例如,以下@page规则将页面框大小设置为8.5×11英寸,并在页面框边缘和页面区域之间的所有边上创建“2cm”边距 -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>
您可以使用@page规则中的margin, margin-top, margin-bottom, margin-left, and margin-right属性来设置页面的边距。
最后,在@page规则中使用marks属性在目标工作表的页面框外创建裁剪和注册标记。 默认情况下,不打印任何标记。 您可以使用crop和cross关键字中的一个或两个分别在目标打印页面上创建裁剪标记和注册标记。
设置页面大小
size属性指定页面框的大小和方向。 有四个值可用于页面大小 -
auto - 页面框将设置为目标工作表的大小和方向。
landscape - 覆盖目标的方向。 页面框与目标大小相同,长边是水平的。
portrait - 覆盖目标的方向。 页面框与目标尺寸相同,短边是水平的。
length - 'size'属性的长度值创建一个绝对页面框。 如果只指定了一个长度值,则会设置页面框的宽度和高度。 'size'属性不允许使用百分比值。
在以下示例中,页面框的外边缘将与目标对齐。 'margin'属性的百分比值是相对于目标尺寸的,因此如果目标纸张尺寸为21.0cm×29.7cm(即A4),则边距为2.10cm和2.97cm。
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>
以下示例将页面框的宽度设置为8.5英寸,高度设置为11英寸。 此示例中的页面框要求目标图纸尺寸为8.5“×11”或更大。
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>
创建命名页面布局后,可以通过将页面属性添加到稍后应用于文档中元素的样式,在文档中使用它。 例如,此样式会在横向页面上呈现文档中的所有表格 -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>
由于上述规则,在打印时,如果浏览器在文档中遇到
Left, Right, and First pages
打印双面文档时,左右页面上的页面框应不同。 它可以通过两个CSS伪类表示如下 -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>
您可以使用以下命令为文档的第一页指定样式:first 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>
控制分页
除非您另行指定,否则仅在页面格式更改或内容溢出当前页面框时才会发生分页符。 要以其他方式强制或抑制分页符,请使用page-break-before, page-break-after,和page-break-inside属性。
page-break-before和page-break-after接受auto, always, avoid, left,和right关键字。
关键字auto是默认值,它允许浏览器根据需要生成分页符。 关键字always在元素之前或之后强制分页,同时avoid在元素之前或之后立即停止分页。 right关键字强制执行一个或两个分页符,以便在左侧或右侧页面上呈现该元素。
使用分页属性非常简单。 假设您的文档具有level-1标题,则开始使用level-2标题的新章节来表示节。 您希望每个章节都从一个新的右侧页面开始,但您不希望在后续内容的分页符中拆分节标题。 您可以使用以下规则来实现此目的 -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>
仅使用page-break-inside属性中的auto和avoid值。 如果您希望表格尽可能不在页面中划分,您可以编写规则 -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>
控制Widows 和 Orphans
在排版术语中,孤儿是由于分页而滞留在页面底部的段落的行,而寡妇是在分页后留在页面顶部的那些行。 通常,打印的页面看起来并不吸引人,在顶部或底部搁浅的单行文本。 大多数打印机尝试在每页的顶部或底部留下至少两行或更多行文本。
orphans属性指定必须保留在页面底部的段落的最小行数。
widows属性指定必须保留在页面顶部的段落的最小行数。
以下是在底部创建4行和在每页顶部创建3行的示例 -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>
CSS - Aural Media
当使用听觉属性时,画布由三维物理空间(声音环绕)和时间空间(可以在其他声音之前,期间和之后指定声音)组成。
CSS属性还允许您改变合成语音的质量(语音类型,频率,变形等)。
这是一个例子 -
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>iowiki.com</h1>
<h2>iowiki.com</h2>
<h3>iowiki.com</h3>
<h4>iowiki.com</h4>
<h5>iowiki.com</h5>
<h6>iowiki.com</h6>
<p>iowiki.com</p>
</body>
</html>
它会产生以下结果 -
新页面打开它将指示语音合成器以一种称为“paul”的语音(一种音频字体)说出标题,在平坦的音调上,但是声音非常丰富。 在说出标题之前,将从给定的URL播放声音样本。
类'heidi'的段落似乎来自左前方(如果音响系统具有空间音频),以及来自右侧的类'peter'的段落。
现在我们将看到与听觉媒体相关的各种属性。
azimuth属性设置,声音应来自水平。
elevation属性设置,声音应垂直来自。
cue-after指定在说出元素的内容以将其与其他内容分隔之后要播放的声音。
cue-before指定在说出元素的内容之前要播放的声音以将其与其他内容分隔。
cue是设置cue-before和cue-after的简写。
pause-after指定在说出元素内容后要观察的暂停。
pause-before指定在说出元素内容之前要观察的暂停。
pause是设置暂停前和暂停后的简写。
pitch指定说话声音的平均音调(频率)。
pitch-range指定平均音高的变化。
play-during指定在说出元素内容时要作为背景播放的声音。
richness指定说话声音的丰富度或亮度。
speak指定文本是以听觉方式呈现,如果是,则以何种方式呈现。
speak-numeral控制数字的说话方式。
speak-punctuation指定如何说出标点符号。
speech-rate指定speech-rate 。
stress指定语音的语调轮廓中的“局部峰值”的高度。
voice-family指定语音系列名称的优先级列表。
volume指的是声音的中位音量。
方位角属性
方位角属性设置声音应该来自水平方向的位置。 可能的值列在下面 -
angle - 位置以-360deg至360deg范围内的角度描述。 值0deg表示在声场的中心正前方。 90deg度位于右侧, 180deg位于后方, 180deg (或等效且更方便地, -90deg )位于左侧。
left-side - 与'270deg'相同。 有'后面','270deg'。
far-left - 与'300deg'相同。 有'后面','240deg'。
left - 与'320deg'相同。 有'后面','220deg'。
center-left - 与'340deg'相同。 有'后面','200deg'。
center - 与'0deg'相同。 有'后面','180deg'。
center-right - 与'20deg'相同。 有'后面','160deg'。
right - 与'40deg'相同。 有'后面','140deg'。
far-right - 与'60deg'相同。 有'后面','120deg'。
right-side - 与'90deg'相同。 有'后面','90deg'。
leftwards - 将声音leftwards移动并相对于当前角度。 更确切地说,减去20度。
rightwards - 相对于当前角度rightwards移动声音。 更确切地说,增加20度。
这是一个例子 -
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>
elevation属性
高程属性设置声音应垂直的位置。 可能的值如下 -
angle - 将高程指定为角度,介于-90deg和90deg之间。 0deg表示前向地平线,松散意味着与听众0deg 。 90deg表示直接开销, -90deg表示直接在下方。
below - 与'-90deg'相同。
level - 与'0deg'相同。
above - 与'90deg'相同。
higher - 向当前高程添加10度。
lower - 从当前高程减去10度。
这是一个例子 -
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>
cue-after属性
cue-after属性指定在说出元素的内容以将其与其他内容分隔之后要播放的声音。 可能的价值包括 -
url - 要播放的声音文件的URL。
none - 无需播放任何内容。
这是一个例子 -
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>
cue-before属性
此属性指定在说出元素的内容以将其与其他内容分隔之前要播放的声音。 可能的值是 -
url - 要播放的声音文件的URL。
none - 无需播放任何内容。
这是一个例子 -
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>
cue-after属性
cue属性是设置cue-before和cue-after的简写。 如果给出两个值,则第一个值为cue-before ,第二个值为cue-after 。 如果只给出一个值,则它适用于两个属性。
例如,以下两条规则是等效的 -
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>
pause-after属性
此属性指定在说出元素内容后要观察的暂停。 可能的值是 -
time - 以绝对时间单位(秒和毫秒)表示暂停。
percentage - 指speech-rate属性值的倒数。 例如,如果语速为每分钟120个字(即一个字需要半秒或500毫秒),则100%的暂停pause-after意味着500毫秒的pause-after ,20%的pause-after意味着100毫秒。
pause-before属性
此属性指定在说出元素内容之前要观察的暂停。 可能的值是 -
time - 以绝对时间单位(秒和毫秒)表示暂停。
percentage - 指speech-rate属性值的倒数。 例如,如果语速为每分钟120个字(即一个字占用半秒或500毫秒),则100%的暂停pause-before意味着500毫秒的pause-before ,20%的pause-before意味着100毫秒。
pause属性
此属性是设置pause-before和pause-after的简写。 如果给出两个值,则第一个值为pause-before ,第二个值为pause-after。
这是一个例子 -
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>
pitch属性
该属性指定说话语音的平均音调(频率)。 语音的平均音高取决于语音系列。 例如,标准男声的平均音高约为120Hz,但对于女声,则约为210Hz。 可能的值是 -
frequency - 以赫兹(Hz)为单位指定说话语音的平均音高。
x-low, low, medium, high, x-high - 这些值不映射到绝对频率,因为这些值取决于语音系列。
pitch-range属性
此属性指定平均音高的变化。 可能的值是 -
number - “0”和“100”之间的值。 音高范围'0'产生平坦,单调的声音。 50的音高范围产生正常的拐点。 音高范围大于50会产生动画声音。
play-during属性
此属性指定在说出元素内容时要作为背景播放的声音。 可能的值可以是以下任何一项 -
URI - 此“uri”指定的声音作为背景播放,同时说出元素的内容。
mix - 如果存在,此关键字表示从父元素的play-during属性继承的声音继续播放,并且uri指定的声音与其混合。 如果未指定mix ,则元素的背景声音将替换父项。
repeat - 如果存在,此关键字表示如果声音太短而无法填充元素的整个持续时间,则声音将重复出现。 否则,声音播放一次然后停止。
auto - 父元素的声音继续播放。
none - 此关键字表示存在沉默。
这是一个例子 -
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>
richness属性
此属性指定说话声音的丰富度或亮度。 可能的值是 -
number - “0”和“100”之间的值。 值越高,语音携带的越多。 较低的值将产生柔和,流畅的声音。
speak属性
此属性指定是否以可听方式呈现文本,如果是,则以何种方式呈现。 可能的值是 -
none - 禁止听觉渲染,以便元素不需要时间渲染。
normal - 使用与语言相关的发音规则来渲染元素及其子元素。
spell-out拼写一个字母。
请注意'volume'属性值为'silent'的元素与'speak'属性值为'none'的元素之间的区别。 前者占用的时间与说出的时间相同,包括元素前后的任何暂停,但不会产生声音。 后者不需要时间,也不会呈现。
speak-numeral属性
此属性控制数字的使用方式。 可能的值是 -
digits - 将数字说成个别数字。 因此,“237”被称为“二三七”。
continuous - 将数字称为完整数字。 因此,“237”被称为“二百三十七”。 Word表示依赖于语言。
speak-punctuation属性
此属性指定标点符号的使用方式。 可能的值是 -
code - 字面上将使用分号,大括号等标点符号。
none - 不会说出标点符号,而是自然地呈现为各种暂停。
speech-rate属性
此属性指定语速。 请注意,允许使用绝对和相对关键字值。 可能的值是 -
number - 以每分钟字数指定语速。
x-slow - 与每分钟80个单词相同。
slow - 相当于每分钟120个单词。
medium - 相当于每分钟180至200字。
fast - 相当于每分钟300字。
x-fast - 与每分钟500字相同。
faster - 每分钟添加40个单词到当前语速。
slower - 从当前语速降低每分钟40个单词。
stress属性
此属性指定语音的语调轮廓中“局部峰值”的高度。 英语是一种强调语言,句子的不同部分被分配为一级,二级或三级压力。 可能的值是 -
number - “0”和“100”之间的值。 价值观的含义取决于所说的语言。 例如,对于标准的,说英语的男性声音(平均音高= 122Hz),用正常语调和强调说话的“50”水平对于意大利语音具有与“50”不同的含义。
voice-family属性
该值是以逗号分隔的优先级语音系列名称列表。 它可以具有以下值 -
generic-voice - 值是语音系列。 可能的值是“男性”,“女性”和“孩子”。
specific-voice - 值是特定情况(例如,喜剧演员,三角琴,卡洛斯,拉尼)。
这是一个例子 -
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>
volume属性
音量是指语音的中位音量。 它可以具有以下值 -
numbers - “0”和“100”之间的任何数字。 “0”表示最小可听音量水平,100表示最大舒适水平。
percentage - 这些值是相对于继承值计算的,然后被剪切到范围“0”到“100”。
silent - 根本没有声音。 值“0”与“静音”并不相同。
x-soft - 与'0'相同。
soft - 与'25'相同。
medium - 与'50'相同。
loud - 与'75'相同。
x-loud - 与'100'相同。
这是一个例子 -
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>
类goat段落会非常柔软。
CSS Printing - @media Rule
} @media print {p.bodyText {font-family:georgia,times,serif;}} @media screen,print {p.bodyText {font-size:10pt}} - > style>如果要在单独的文件中定义样式表,则在链接到外部样式表时也可以使用media属性 -
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">
CSS - Layouts
CSS对Web文档的未来至关重要,大多数浏览器都支持CSS。
CSS比表格更精确,无论浏览器窗口如何,都可以按照您的意图查看文档。
跟踪嵌套表可能是一个真正的痛苦。 CSS规则往往组织良好,易于阅读和易于更改。
最后,我们建议您使用对您有意义的技术,并以最佳方式使用您所知道的或以何种方式呈现您的文档。
CSS还提供了table-layout属性,使您的表格加载速度更快。 以下是一个例子 -
<table style = "<b class="notranslate">table-layout:fixed</b>;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,浏览器必须在最终渲染表之前计算每个单元格。 但是,当您将表格布局算法设置为fixed时,它只需要在渲染整个表格之前查看第一行。 这意味着您的表需要具有固定的列宽和行高。
样本列布局
以下是使用CSS创建简单列布局的步骤 -
设置完整文档的边距和填充如下 -
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>
现在,我们将定义一个黄色的列,稍后,我们将此规则附加到
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>
到目前为止,我们将有一个带有黄色主体的文档,所以现在让我们在level0中定义另一个分区 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>
现在,我们将在level1中再嵌套一个分区,我们将改变背景颜色 -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>
最后,我们将使用相同的技术,在level2中嵌套level3分区以获得右列的可视布局 -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>
完成源代码如下 -
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>
同样,您可以在页面顶部添加顶部导航栏或广告栏。
它会产生以下结果 -
新页面打开CSS - Validations
W3C CSS Validator(万维网联盟),此验证器通过文件上载,直接输入或使用URI检查您的css - 一次一页。 此验证器可帮助您找到CSS中的所有错误。 WDG CSS检查验证器允许您通过直接输入,文件上载和使用URI来验证您的CSS。 如果您有错误,将按行号和列号列出错误。 错误通常带有解释错误原因的链接。CSS验证程序会检查您的层叠样式表,以确保它们符合W3联盟设置的CSS标准。 有一些验证器也会告诉您哪些浏览器支持哪些CSS功能(因为并非所有浏览器在CSS实现中都相同)。
为什么要验证您的HTML代码?
您应该验证代码的原因有很多。 但主要的是 -
它有助于跨浏览器,跨平台和未来的兼容性。
优质的网站可提高搜索引擎的可见性。
专业性:作为Web开发人员,您的代码不应在访问者看到时引发错误。
CSS3 - Tutorial
CSS3是CSS2规范和新规范的协作,我们可以称之为协作module 。 部分模块如下所示 -
- Selectors
- 盒子模型
- Backgrounds
- 图像值和替换内容
- 文字效果
- 2D转换
- 3D转换
- Animations
- 多列布局
- 用户界面
CSS3 - Rounded Corners
}下表显示了圆角的可能值,如下所示 -
Sr.No. | 价值和描述 |
---|---|
1 | border-radius 使用此元素设置四个边界半径属性 |
2 | border-top-left-radius 使用此元素设置左上角的边框 |
3 | border-top-right-radius 使用此元素设置右上角的边框 |
4 | border-bottom-right-radius 使用此元素设置右下角的边框 |
5 | border-bottom-left-radius 使用此元素设置左下角的边框 |
例子 (Example)
此属性可以有三个值。 以下示例使用两个值 -
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>
它会产生以下结果 -
新页面打开每个角落属性
我们可以指定每个角落属性,如下例所示 -
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>
它会产生以下结果 -
新页面打开CSS3 - Border Image
Sr.No. | 价值和描述 |
---|---|
1 | border-image-source 用于设置图像路径 |
2 | border-image-slice 用于切割边界图像 |
3 | border-image-width 用于设置边框图像宽度 |
4 | border-image-repeat 用于将边框图像设置为圆角,重复和拉伸 |
例子 (Example)
以下是将图像设置为元素边框的示例。
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - Multi Background
}最常用的值如下所示 -
Sr.No. | 价值和描述 |
---|---|
1 | background 用于在一个部分中设置所有背景图像属性 |
2 | background-clip 用于声明背景的绘画区域 |
3 | background-image 用于指定背景图像 |
4 | background-origin 用于指定背景图像的位置 |
5 | background-size 用于指定背景图像的大小 |
例子 (Example)
以下是演示多背景图像的示例。
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.iowiki.com</h1>
<p>
IOWIKI 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>
它会产生以下结果 -
新页面打开多背景的大小
接受多背景属性为不同的图像添加不同的大小。示例语法如下所示 -
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}
如上面的示例所示,每个图像具有50px,130px和自动尺寸的特定尺寸。
CSS3 - Colors
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL代表hue, saturation, lightness .Here Huge是色轮的度数,饱和度和亮度是0到100%之间的百分比值。 HSL的示例语法如下所示 -
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA代表hue, saturation, lightness and alpha 。 Alpha值指定不透明度,如RGBA所示。 HSLA的示例语法如下所示 -
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
opacity是一种更薄的涂料,需要添加黑色以增加不透明度。 不透明度的示例语法如下所示 -
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
以下示例显示了rgba color属性。
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例显示HSL颜色属性。
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例显示了HSLA颜色属性。
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例显示了Opacity属性。
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - Gradients
线性渐变
线性渐变用于以线性格式(如从上到下)排列两种或更多种颜色。
从上到下
<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>
它会产生以下结果 -
新页面打开左到右
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
它会产生以下结果 -
新页面打开Diagonal
对角线从左上角和右上角开始。
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
它会产生以下结果 -
新页面打开多色
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3径向渐变
径向渐变出现在中心。
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3重复径向渐变
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - Shadow
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>iowiki.com</h1>
<h2>iowiki.com</h2>
<h3>iowiki.com</h3>
<h4>iowiki.com</h4>
<h5>iowiki.com</h5>
<h6>iowiki.com</h6>
<p>iowiki.com</p>
</body>
</html>
它会产生以下结果 -
新页面打开盒子阴影
用于向元素添加阴影效果,以下是向元素添加阴影效果的示例。
<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>
它会产生以下结果 -
新页面打开CSS3 - Text
Sr.No. 价值与描述1text-align-last
用于对齐文本的最后一行
2text-emphasis
用于强调文字和颜色
3text-overflow
用于确定未向用户显示未显示的溢出内容的方式
4word-break
用于打破基于单词的行
五word-wrap
用于打破线并换行到下一行
Text-overflow
文本溢出属性确定如何向用户发出未显示的溢出内容的信号。 文本溢出的示例示例如下所示 -
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
IOWIKI 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">
IOWIKI 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">
IOWIKI originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 Word Breaking
用于断行,下面的代码显示了断字的示例代码。
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
IOWIKI 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">
IOWIKI 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>
它会产生以下结果 -
新页面打开CSS自动换行
自动换行用于打破行并换行到下一行。以下代码将包含示例语法 -
p {
word-wrap: break-word;
}
CSS3 - Web Fonts
1TrueType Fonts (TTF)
TrueType是Apple和Microsoft在20世纪80年代后期开发的轮廓字体标准,它成为Windows和MAC操作系统最常用的字体。
2OpenType Fonts (OTF)
OpenType是可缩放计算机字体的格式,由Microsoft开发
3The Web Open Font Format (WOFF)
WOFF用于开发网页,并于2009年开发。现在它正在使用W3C推荐。
4SVG Fonts/Shapes
SVG允许SVG文档中的SVG字体。 我们还可以使用font face属性将CSS应用于SVG。
五Embedded OpenType Fonts (EOT)
EOT用于开发网页,它嵌入在网页中,因此无需允许第三方字体
以下代码显示了字体面的示例代码 -
<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>
它会产生以下结果 -
新页面打开字体描述
以下列表包含放置在@ font-face规则中的所有字体描述 -
Sr.No. | 价值和描述 |
---|---|
1 | font-family 用于定义字体名称 |
2 | src 用于定义URL |
3 | font-stretch 用于查找字体应如何拉伸 |
4 | font-style 用于定义字体样式 |
5 | font-weight 用于定义字体粗细(粗体) |
CSS3 - 2d Transforms
1matrix(n,n,n,n,n,n)
用于定义具有六个值的矩阵变换
2translate(x,y)
用于将元素与x轴和y轴一起转换
3translateX(n)
用于将元素与x轴一起转换
4translateY(n)
用于将元素与y轴一起转换
五scale(x,y)
用于更改元素的宽度和高度
6scaleX(n)
用于更改元素的宽度
7scaleY(n)
用于更改元素的高度
8rotate(angle)
用于根据角度旋转元素
9skewX(angle)
用于定义倾斜变换以及x轴
10skewY(angle)
用于定义偏斜变换以及y轴
以下示例显示了所有上述属性的示例。
旋转20度
箱体旋转角度为20度,如下图所示 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
IOWIKI.com.
</div>
<div id = "myDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开旋转-20度
箱体旋转角度为-20度,如下图所示 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
IOWIKI.com.
</div>
<div id = "myDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开偏斜X轴
具有偏斜x轴的盒子旋转如下所示 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
IOWIKI.com.
</div>
<div id = "skewDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开歪斜Y轴
具有偏斜y轴的盒子旋转,如下所示 -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
IOWIKI.com.
</div>
<div id = "skewDiv">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开矩阵变换
使用Matrix变换的框旋转如下所示 -
<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>
IOWIKI.com.
</div>
<div id = "myDiv1">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开矩阵转换为另一个方向。
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
IOWIKI.com.
</div>
<div id = "myDiv2">
IOWIKI.com
</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - 3D Transforms
1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
用于通过使用16个矩阵值来转换元素
2translate3d(x,y,z)
用于通过使用x轴,y轴和z轴转换元素
3translateX(x)
用于通过使用x轴转换元素
4translateY(y)
用于通过使用y轴转换元素
五translateZ(z)
用于通过使用y轴转换元素
6scaleX(x)
用于缩放通过使用x轴转换元素
7scaleY(y)
用于缩放使用y轴转换元素
8scaleY(y)
用于通过使用z轴转换元素
9rotateX(angle)
用于旋转使用x轴转换元素
10rotateY(angle)
用于旋转使用y轴转换元素
11rotateZ(angle)
用于旋转使用z轴转换元素
X轴3D变换
以下示例显示了x轴3D变换。
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Y轴3D变换
以下示例显示了y轴3D变换 -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开Z轴3D变换
以下示例显示了Z轴3D变换 -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - Animation
} div {width:100px; 身高:100px; 背景颜色:红色; 动画名称:动画; 动画持续时间:5s; }上面的示例显示了具有关键帧语法的动画的高度,宽度,颜色,名称和持续时间。
向左移动动画
<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>IOWIKI</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>
它会产生以下结果 -
新页面打开使用关键帧移动左侧动画
<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>IOWIKI</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3 - Multi Columns
1column-count
用于计算元素应划分的列数。
2column-fill
用于决定如何填充列。
3column-gap
用于决定列之间的差距。
4column-rule
用于指定规则的数量。
五rule-color
用于指定列规则颜色。
6rule-style
用于指定列的样式规则。
7rule-width
用于指定宽度。
8column-span
用于指定列之间的跨度。
例子 (Example)
下面的例子显示了文本作为新纸张结构的排列。
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
IOWIKI originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>
它会产生以下结果 -
新页面打开假设,如果用户想要将文本作为没有行的新论文,我们可以通过删除样式语法来完成此操作,如下所示 -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
它会产生以下结果 -
新页面打开CSS3 - User Interface
1appearance
用于允许用户将元素作为用户界面元素。
2box-sizing
允许用户以清晰的方式修复区域上的元素。
3icon
用于在区域上提供图标。
4resize
用于调整区域上的元素的大小。
五outline-offset
用于绘制轮廓的背后。
6nav-down
用于在键盘上按下向下箭头按钮时向下移动。
7nav-left
按下键盘上的左箭头按钮时,向左移动。
8nav-right
用于在键盘上按下右箭头按钮时向右移动。
9nav-up
按下键盘上的向上箭头按钮时用于向上移动。
调整大小属性的示例
Resize属性有三个常见值,如下所示 -
- horizontal
- vertical
- both
在css3用户界面中使用resize属性中的both值 -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>iowiki.com</div>
</body>
</html>
它会产生以下结果 -
新页面打开CSS3轮廓偏移量
外线表示在边框外部的元素周围绘制一条线。
<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>IoWiki</div>
</body>
</html>
它会产生以下结果 -
新页面打开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">iowiki.com</div><br />
<div class = "div2">iowiki.com</div>
</body>
</html>
它会产生以下结果 -
新页面打开上图中两个元素的宽度和高度相同但给出的结果不同,导致第二个包含填充属性。
CSS3框大小属性
<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">iowiki.com</div><br />
<div class = "div2">iowiki.com</div>
</body>
</html>
上面的样本具有相同的高度和宽度与box-sizing:border-box 。 这里的结果如下所示。
它会产生以下结果 -
新页面打开上面的元素具有相同的高度和宽度与box-sizing:border-box,因此对于两个元素,结果总是相同的,如上所示。
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>
它会产生以下结果 -
新页面打开媒体查询
媒体查询适用于不同大小的设备(如手机,台式机等)的不同风格规则,
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>
它会产生以下结果 -
新页面打开Bootstrap响应式网页设计
Bootstrap是最流行的基于HTML,CSS和Java脚本的Web设计框架,它可以帮助您以响应的方式为所有设备设计网页。
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>IOWIKI</h1>
<p>
IOWIKI 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>
它会产生以下结果 -
新页面打开