目录

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)

    属性 描述
    typetext/css 将样式表语言指定为内容类型(MIME类型)。 这是必需属性。
    media

    screen

    tty

    tv

    projection

    handheld

    print

    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类型)。 此属性是必需的。
    hrefURL 指定具有样式规则的样式表文件。 此属性是必需的。
    media

    screen

    tty

    tv

    projection

    handheld

    print

    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色调色板时都能正确显示颜色 -

    0000000000330000660000990000CC0000FF
    0033000033330033660033990033CC0033FF
    0066000066330066660066990066CC0066FF
    0099000099330099660099990099CC0099FF
    00CC0000CC3300CC6600CC9900CCCC00CCFF
    00FF0000FF3300FF6600FF9900FFCC00FFFF
    3300003300333300663300993300CC3300FF
    3333003333333333663333993333CC3333FF
    3366003366333366663366993366CC3366FF
    3399003399333399663399993399CC3399FF
    33CC0033CC3333CC6633CC9933CCCC33CCFF
    33FF0033FF3333FF6633FF9933FFCC33FFFF
    6600006600336600666600996600CC6600FF
    6633006633336633666633996633CC6633FF
    6666006666336666666666996666CC6666FF
    6699006699336699666699996699CC6699FF
    66CC0066CC3366CC6666CC9966CCCC66CCFF
    66FF0066FF3366FF6666FF9966FFCC66FFFF
    9900009900339900669900999900CC9900FF
    9933009933339933669933999933CC9933FF
    9966009966339966669966999966CC9966FF
    9999009999339999669999999999CC9999FF
    99CC0099CC3399CC6699CC9999CCCC99CCFF
    99FF0099FF3399FF6699FF9999FFCC99FFFF
    CC0000CC0033CC0066CC0099CC00CCCC00FF
    CC3300CC3333CC3366CC3399CC33CCCC33FF
    CC6600CC6633CC6666CC6699CC66CCCC66FF
    CC9900CC9933CC9966CC9999CC99CCCC99FF
    CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
    CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
    FF0000FF0033FF0066FF0099FF00CCFF00FF
    FF3300FF3333FF3366FF3399FF33CCFF33FF
    FF6600FF6633FF6666FF6699FF66CCFF66FF
    FF9900FF9933FF9966FF9999FF99CCFF99FF
    FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
    FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

    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

    现在,我们将看到如何将这些属性与示例一起使用。

    边界崩溃的财产

    此属性可以有两个值collapseseparate 。 以下示例使用两个值 -

    <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, leftright四个值中的一个。 以下示例使用每个值。

    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, hideinherit

    以下是用于隐藏

    元素中空单元格边框的empty-cells属性。
    <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, autoinherit

    以下示例显示了这些属性之间的差异。

    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

    一个填充的广场

    以下是可用于有序列表的值 -

    描述
    decimalNumber1,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

    1

    auto

    光标的形状取决于它结束的上下文区域。 例如,我在文本上,在链接上移动,等等......

    2

    crosshair

    十字准线或加号

    3

    default

    一个箭头

    4

    pointer

    指针(在IE 4中这个值是手)

    move

    我吧

    6

    e-resize

    光标指示框的边缘要向右移动(向东)

    7

    ne-resize

    光标指示框的边缘向上和向右移动(北/东)

    8

    nw-resize

    光标指示框的边缘向上和向左移动(北/西)

    9

    n-resize

    光标指示框的边缘向上移动(北)

    10

    se-resize

    光标指示框的边缘向下和向右移动(南/东)

    11

    sw-resize

    光标指示框的边缘向下和向左移动(南/西)

    12

    s-resize

    光标指示框的边缘向下移动(向南)

    13

    w-resize

    光标指示框的边缘向左(西)移动

    14

    text

    我吧

    15

    wait

    一小时玻璃

    16

    help

    问号或气球,非常适合在帮助按钮上使用

    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属性用于设置框的最小宽度。

  • 高度和宽度属性

    heightwidth属性允许您设置框的高度和宽度。 他们可以获取长度,百分比或关键字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

    1

    visible

    允许内容溢出其包含元素的边框。

    2

    hidden

    嵌套元素的内容只是在包含元素的边界处被截断,并且没有可见的滚动条。

    3

    scroll

    包含元素的大小不会更改,但会添加滚动条以允许用户滚动以查看内容。

    4

    auto

    其目的与滚动相同,但仅当内容溢出时才会显示滚动条。

    这是一个例子 -

    <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

    1

    visible

    该框及其内容将显示给用户。

    2

    hidden

    该框及其内容不可见,但它们仍会影响页面的布局。

    3

    collapse

    这仅适用于动态表列和行效果。

    这是一个例子 -

    <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

  • 上移 - 使用top的负值。
  • 下移 - 为top使用正值。
  • NOTE - 您也可以使用bottomright值,方法与topleft相同。

    这是一个例子 -

    <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相对于屏幕左上角的指定坐标处。

    您可以使用topleft两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

    • 向左移动 - 左侧使用负值。
    • 向右移动 - 使用left的正值。
    • 上移 - 使用top的负值。
    • 下移 - 为top使用正值。

    NOTE - 您也可以使用bottomright值,方法与顶部和左侧相同。

    这是一个例子 -

    <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> 
    
    新页面打开

    固定定位

    固定定位允许您将元素的位置固定到页面上的特定位置,而不管滚动。 指定的坐标将相对于浏览器窗口。

    您可以使用topleft两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

    • 向左移动 - 左侧使用负值。
    • 向右移动 - 使用left的正值。
    • 上移 - 使用top的负值。
    • 下移 - 为top使用正值。

    NOTE - 您也可以使用bottomright值,方法与topleft相同。

    这是一个例子 -

    <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

    div>
    div>
    div> body> html>

    它会产生以下结果 -

    新页面打开

    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

    1

    opacity

    不透明度。 0是完全透明的,100是完全不透明的。

    2

    finishopacity

    对象另一端的不透明度级别。

    3

    style

    不透明度渐变的形状。

    0 =均匀

    1 =线性

    2 =径向

    3 =矩形

    4

    startX

    开始使用不透明度渐变的X坐标。

    startY

    开始使用不透明度渐变的Y坐标。

    6

    finishX

    不透明度渐变的X坐标结束。

    7

    finishY

    不透明度渐变的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

    print

    适用于分页,不透明材质以及在打印预览模式下在屏幕上查看的文档。 请参阅分页媒体部分。

    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属性在目标工作表的页面框外创建裁剪和注册标记。 默认情况下,不打印任何标记。 您可以使用cropcross关键字中的一个或两个分别在目标打印页面上创建裁剪标记和注册标记。

    设置页面大小

    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-beforepage-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属性中的autoavoid值。 如果您希望表格尽可能不在页面中划分,您可以编写规则 -

    <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 - 位置以-360deg360deg范围内的角度描述。 值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 - 将高程指定为角度,介于-90deg90deg之间。 0deg表示前向地平线,松散意味着与听众0deg90deg表示直接开销, -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-beforecue-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-beforepause-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. 价值与描述1

    text-align-last

    用于对齐文本的最后一行

    2

    text-emphasis

    用于强调文字和颜色

    3

    text-overflow

    用于确定未向用户显示未显示的溢出内容的方式

    4

    word-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

    1

    TrueType Fonts (TTF)

    TrueType是Apple和Microsoft在20世纪80年代后期开发的轮廓字体标准,它成为Windows和MAC操作系统最常用的字体。

    2

    OpenType Fonts (OTF)

    OpenType是可缩放计算机字体的格式,由Microsoft开发

    3

    The Web Open Font Format (WOFF)

    WOFF用于开发网页,并于2009年开发。现在它正在使用W3C推荐。

    4

    SVG 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

    1

    matrix(n,n,n,n,n,n)

    用于定义具有六个值的矩阵变换

    2

    translate(x,y)

    用于将元素与x轴和y轴一起转换

    3

    translateX(n)

    用于将元素与x轴一起转换

    4

    translateY(n)

    用于将元素与y轴一起转换

    scale(x,y)

    用于更改元素的宽度和高度

    6

    scaleX(n)

    用于更改元素的宽度

    7

    scaleY(n)

    用于更改元素的高度

    8

    rotate(angle)

    用于根据角度旋转元素

    9

    skewX(angle)

    用于定义倾斜变换以及x轴

    10

    skewY(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

    1

    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

    用于通过使用16个矩阵值来转换元素

    2

    translate3d(x,y,z)

    用于通过使用x轴,y轴和z轴转换元素

    3

    translateX(x)

    用于通过使用x轴转换元素

    4

    translateY(y)

    用于通过使用y轴转换元素

    translateZ(z)

    用于通过使用y轴转换元素

    6

    scaleX(x)

    用于缩放通过使用x轴转换元素

    7

    scaleY(y)

    用于缩放使用y轴转换元素

    8

    scaleY(y)

    用于通过使用z轴转换元素

    9

    rotateX(angle)

    用于旋转使用x轴转换元素

    10

    rotateY(angle)

    用于旋转使用y轴转换元素

    11

    rotateZ(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

    1

    column-count

    用于计算元素应划分的列数。

    2

    column-fill

    用于决定如何填充列。

    3

    column-gap

    用于决定列之间的差距。

    4

    column-rule

    用于指定规则的数量。

    rule-color

    用于指定列规则颜色。

    6

    rule-style

    用于指定列的样式规则。

    7

    rule-width

    用于指定宽度。

    8

    column-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

    1

    appearance

    用于允许用户将元素作为用户界面元素。

    2

    box-sizing

    允许用户以清晰的方式修复区域上的元素。

    3

    icon

    用于在区域上提供图标。

    4

    resize

    用于调整区域上的元素的大小。

    outline-offset

    用于绘制轮廓的背后。

    6

    nav-down

    用于在键盘上按下向下箭头按钮时向下移动。

    7

    nav-left

    按下键盘上的左箭头按钮时,向左移动。

    8

    nav-right

    用于在键盘上按下右箭头按钮时向右移动。

    9

    nav-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>
    

    它会产生以下结果 -

    新页面打开
    ↑回到顶部↑
    WIKI教程 @2018