H5学習_番外編_CSS3その他の属性_html/css_WEB-ITnose-htmlチュートリアル-php.cn

QR code.jpg

0.今日のコース概要

サーバーサイドフォント：font-face
アウトライン：outline
スケール属性：resize
列レイアウト：column
Flexibleレイアウト: フレックス-box

1. サーバーサイドのフォントフェイス

CSS スタイルの 3 日目では、使用する特定のフォントを定義する機能を学びました。対応するフォント付き。たとえば、一般的なフォントには Song-ti や Hei-ti などが含まれます。これらは通常、コンピュータシステムに付属のフォントライブラリに直接インストールされます。

しかし、フォントなどを変更したい場合はどうすればよいでしょうか?ユーザーに表示されるフォントがコンピューターに設定したフォントと同じである場合はどうすればよいでしょうか?

ここでサーバーフォントという概念を導入します。属性は @font-face です。その機能は、サーバー側のフォントファイルをロードし、クライアントにインストールされていないフォントをクライアントが表示できるようにすることです。具体的にはどうやって実装すればいいのでしょうか？

まず、必要なフォントファイルライブラリをオンラインでダウンロードし、フォント (コンピューターによってはフォントディレクトリ) ディレクトリに配置する必要があります。

2 番目のステップは、ダウンロードしたファイルをページに配置することです。このとき、属性 font-face も使用します。

そうです

具体的な実装プロセスを見てみましょう。

    @font-face{        font-family:“你的web字体名称”;        src:url(“字体路径”);        font-weight:bold;    }

ログイン後にコピー

2. アウトラインのアウトライン

アウトラインは、要素の周囲に描かれた線で、位置エッジの周囲に位置し、要素を強調表示する役割を果たします。

定義によれば、境界線に非常に似ていることがわかります。

border の構文では、border の後に 3 つの属性があります。つまり、

ボーダーの色

ボーダーの幅
ボーダーの種類

アウトラインは要素の寸法の一部ではないため、要素の幅と高さのプロパティにはアウトラインの幅は含まれません。

注:

あるWebサイトで確認したところ、outline-style属性は必ずoutline-color属性の前に宣言してくださいと書いてありました。要素は、アウトラインを取得した後にのみ、アウトラインの色を変更できます。 , しかし、実際のテストプロセス中に、スタイルの前後に設定しても、Webサイトで与えられた効果が反映されないことがわかりました。もちろん、これは私の個人的な間違いである可能性もあります。読者が何か問題を見つけた場合は、時間内にご連絡ください。

効果のデモ

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        /*@font-face {            font-family: "唐菜也体";            src: url("fonts/FuturaBTLtIt.otf");        }        div{            font-family: "唐菜也体";            font-size: 50px;        }*/        @font-face{            font-family: "郜慧姣体";            src: url("fonts/FuturaBTHv.otf");        }        div{            font-family: "郜慧姣体";            font-size: 30px;        }        </style>    </head>    <body>        <div>hello world!!</div>    </body>    </html>

ログイン後にコピー

3. スケーリング属性のサイズ変更

要素の幅と高さを指定することで要素のサイズを固定できる場合があります。ソースコードに移動して幅と高さを変更することもできますが、これは非常に面倒なため、ページ内で幅と高さを直接調整するにはどうすればよいでしょうか?

スケール属性と呼ばれる新しい属性サイズ変更が、すべての要素に適用されるため、ユーザーはページ上で要素の幅と高さを直接調整できます。

属性値説明なしユーザーは要素のサイズを調整できません（デフォルト値）両方ユーザーは要素の幅と高さを調整できます水平ユーザーは要素の幅を調整できます垂直ユーザーは要素の高さを調整できます

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        textarea{            resize:both;        }        div{            width: 100px;            height: 100px;            background-color: #ccc;            resize: both;        }        </style>    </head>    <body>        <textarea></textarea>        <div></div>    </body>    </html>

ログイン後にコピー

我们给一个 textarea 元素还有一个 div 元素分别设置了resize:both 之后，按照语法来说，这两个元素都可以进行拉伸，但实际上，只有 textarea 元素可以进行拉伸，而 div 元素却不可以，原因是，除了 textarea 元素之外，其他元素想要使用缩放，必须设置 overflow 属性（overflow:visible 除外）。

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">        textarea{            resize:both;        }        div{            width: 100px;            height: 100px;            background-color: #ccc;            resize: both;            overflow: auto;        }        </style>    </head>    <body>        <textarea></textarea>        <div></div>    </body>    </html>

ログイン後にコピー

4. 分栏布局 column

在我们经常阅读的报纸中，一般下一个版面会被分成多个列去进行排版，在 CSS3出台之前，实现这个效果需要非常多的代码，而CSS3规范中对多栏布局进行了定义，我们可以使用 CSS表单样式轻松搞定这个效果。

属性	解释
column-count:number;	栏的数量控制
column-gap:长度单位；	栏与栏之间的距离
column-rule	宽度，颜色

    <!DOCTYPE html>    <html lang="en">    <head>      <meta charset="UTF-8">      <title>分栏</title>      <style type="text/css">      body{          /*设置分栏数*/        -webkit-columns: 3;        -moz-columns: 3;        -o-columns: 3;        columns: 3;        /*设置间距 100px*/        -webkit-column-gap: 100px;        -moz-column-gap: 100px;        -o-column-gap: 100px;        column-gap: 100px;        /*设置分栏间隔线*/        -webkit-column-rule: 10px solid red;        -moz-column-rule: 10px solid red;        -o-column-rule: 10px solid red;        column-rule: 10px solid red;      }      div{        height: 50px;        margin-top: 10px;        background-color: cyan;      }      </style>    </head>    <body>        <div>我是divA</div>        <div>我是divB</div>        <div>我是divC</div>    </body>    </html>

ログイン後にコピー

但是我们发现，随着我们将窗口去拉伸，我们的 column-rule还停留在原位置，需要重新刷新才能适应界面，这是我们现在不好解决的，所以接下来要介绍另外一种布局方式，弹性布局。

5. 弹性布局 flex-box

引用一下别人打得比方，“box-flex”直译为“房子-分配”，假如马林大叔省吃俭用一辈子，终于在上海郊外买了间150平米的商品房。后来，马林大叔想回老家养老，决定把房子分配给他的三个儿子。

ok，先暂停下，这里提到的“房子”就是”box-flex”中的”box”，“分配”就是”box-flex”中的”flex”，于是，这个“分配房子”的举动就称为”box-flex”，而box-flex属性的值就是说的如何分配，分配比例是什么。

继续我们的例子，马林大叔的三个儿子分别叫做大马，中马和小马，其中大马已经结婚多年，有一堆双胞胎女儿，拖家带口的人多；而中马和小马是优秀的光棍人士。

所以，大马要求分配更多的房子，最终，家人一番协商有了下面的分配结果，就是：

    #大马 { 房子-分配: 2; }    #中马 { 房子-分配: 1; }    #小马 { 房子-分配: 1; }

ログイン後にコピー

如果装换成CSS表示就是：

    #first_boy { box-flex: 2; }    #second_boy { box-flex: 1; }    #three_boy { box-flex: 1; }

ログイン後にコピー

box-flex的含义与作用理解瞬间柳暗花明：用来按比例分配父标签的宽度(或高度)空间。

box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配，因为还要看其老爸的意思。

只有父元素同意了，几个孩子才能分配这房子，所以，父元素中也是需要添加声明的，体现在代码中就是：

    #father { display: box; }

ログイン後にコピー

display: box;的声明其实就是弹性盒模型的声明。

我们试着将上面的案例写成代码：

弹性布局1.html

    <!DOCTYPE html>    <html>        <head>            <meta charset="utf-8">            <title></title>            <style type="text/css">                *{                    padding: 0;                    margin: 0;                }                .father{                    display: box;                    display: -webkit-box;                    display: -moz-box;                    display: -o-box;                }                .one{                    box-flex:2;                    -webkit-box-flex:2;                    -moz-box-flex:2;                    -o-box-flex:2;                    background: red;                }                .two{                    background: pink;                }                .three{                    background: blue;                }                .two,.three{                    box-flex:1;                    -webkit-box-flex:1;                    -moz-box-flex:1;                    -o-box-flex:1;                }            </style>        </head>        <body>            <div class="father">                <div class="son one">11111</div>                <div class="son two">22222</div>                <div class="son three">33333</div>            </div>        </body>    </html>

ログイン後にコピー

上面的案例是三个子元素按照一定的比例去分配父元素的宽度，接下来再来看第二个案例，

当第一个头元素和最后一个尾部元素给了固定的高度之后，中间的内容元素如何自适应屏幕的高度，

使得三个子元素占据满屏的高度。

弹性布局2.html

    <!DOCTYPE html>    <html lang="en">    <head>      <meta charset="UTF-8">      <title>弹性布局</title>      <style type="text/css">        *{          margin: 0px;          padding: 0px;        }        body,html,.wrap{          height: 100%;        }        .wrap{          /*开启弹性盒子 让子元素弹性自适应布局*/          display: -webkit-box;          /*弹性布局盒子中 子元素的排列方式（横向或者竖向）horizontal(默认横向)*/          -webkit-box-orient:vertical;          /*翻转 子元素的排列顺序*/          -webkit-box-direction:reverse;        }        .header{          height: 100px;          background-color: cyan;        }        .content{          background-color: #ccc;          /*占据剩余的空间*/          -webkit-box-flex:2;        }        .footer{          height: 100px;          background-color: orange;        }      </style>    </head>    <body>          <div class="wrap">              <div class="header">头部</div>              <div class="content">内容</div>              <div class="footer">底部</div>          </div>    </body>    </html>

ログイン後にコピー

当然，除了按比例分配父元素的宽度或者高度之后，我们还有一些其他的属性。这里不做更多介绍。

属性	含义
box-orient	子元素的方向,默认是横排(horizontal:横着排；vertical:竖着排。)
box-direction	子元素的排列顺序，默认是正常（normal：正常；reverse：反转。）
box-align	子元素在垂直方向上的对齐表现（start 、end、center）
box-pack	子元素在水平方向上的对齐表现（start、end、center）