文字スタイル、ボックス、レイアウトとフローティングの関係
3491 ワード
テキスト段落のスタイル属性
テキストスタイル:
デフォルトのテキスト表示:placeholder color:ラベル内の文字の色を設定し、色値は英語の単語、16進数文法、rgb文法を使用できます:color:red;color: #f0fcf8; color:rgb(123, 88, 205); font-size:文字サイズを設定し、単位は通常画素(px)--一般的なビジネスサイトの文字サイズは通常12 pxである. font-weight:文字の太字または非太字を設定します. font-style:文字斜体(italic)または非斜体(normal) を設定する font-family:文字のフォント名を設定し、複数のフォント名を使用できます.真ん中をカンマで区切って、まず最初のフォントを使用します.ユーザーのパソコンに最初のフォントがなければ、2番目のフォントを使用します.例: font-family:宋体、模宋、マイクロソフト雅黒、arial、「Times New roman」; line-height:文字の行の高さを設定します.単位も通常pxです.つまり、1行の文字が占める空間の高さです.行の高さは文字の高さではありません. letter-spacing:文字(またはアルファベット)間の間隔を設定します.中国語は実は「字」の間隔です. word-spacing:単語間の間隔を設定します.通常は西洋ラテン語系の文字にのみ有効です. text-align:文字の水平位置合わせを設定します.その機能は、ラベル属性のalign属性に相当します.ただし、alignはhtmlプロパティとして、実際にはいくつかのラベルでのみ使用されますが、text-alignはほとんどのラベルで使用できる です. text-indent:段落の最初の行のインデント距離を設定します.単位も通常pxです. text-decoration:文字を設定する「修飾線」:下線(underline)、中線(line-through)、上線(overline)、none(なし) vertical-align:文字の表ボックス(セル)での垂直位置合わせを設定する:top(トップ位置合わせ)、middle(中位置合わせ)、bottom(ボトム位置合わせ) 箱の模型の初歩
まず、ほとんどのラベルが実は箱であるという観念を確立します.箱とは、「矩形の領域範囲」にすぎません.実はウェブページとは、一つの箱に一つの箱をつけることにほかならない.1つの箱には、次のような領域(構造)があります.枠線(border):実線または破線または他の形状の線型の領域. 外距(margin):境界とも呼ばれ、枠線の外の空白領域であり、「物体を置くことができない」 を意味する.内マージン(padding):「補白」とも呼ばれ、枠線内の空白領域であり、その意味も「物体を置くことができない」 である.コンテンツ領域(対応するcss属性名なし):1つのボックスに「物体」を置くことができる領域、すなわちボックスの主要領域を指す.その中に置かれている物体は普通の文字や他のラベルであってもよい--私たちが前に学んだhtmlの「内容部分」に対応している.コンテンツ領域は、通常、その幅の高い属性(width,height) のみを設定することができる.
Webデザインにおける「コンテンツと表現の分離」の考え方
私たちは以前htmlを勉強して、ラベルには「表形表意」の役割があると言っていました.内容とその表現が混在しているとも言える.現在:css技術は実際には1つのページの中の各ラベルの表現をすべて“提出”して1つの専門の地方(例えばstyleラベルの中で)に置くことができて、残りの部分(ラベルと文字の内容など)は全体的に“構造/内容”と呼ばれます.このようなやり方は「内容と表現の分離思想」と呼ばれている.
箱の2つの初期状態(基本的な表現): divのような箱:1つの箱は自動的に「1行を占有する」(内部の内容にかかわらず):これが「ブロック箱」(ブロック要素)です.常用ブロックボックス:p,hr,h 1~h 6,table,form,ul,li,ol,dl,dt,dd,blockquote,pre,特徴:固定幅高,margin,padding を設置できる類似span箱:1つの箱の内容は同類の箱と並んで1行に現れ、その行が満たされていない限り、自然に次の行になります.類似文字の表現特性.:これがラインボックス(ラインエレメント)です.行内ボックスには通常、テキスト、画像などの「最終的なデータ内容」が配置されます.その他の行内箱:b,strong,font,i,u,a,img,input,textarea,select,特徴:幅の高さは設定できないが、その内容によって「突き出す」ことができ、marginとpaddingは上下の表現がない.通常、行内箱は「小さな箱」、ブロック箱は「大きな箱」 です.
レイアウトの初歩(原理):
レイアウトとは、ページの内容を一定の方法で適切な位置に置くことを意味します.レイアウトの基本手順:1、「現在のレイアウト」を視覚的に明らかな方法でいくつかのブロックを分割し、分割は2つの方法でのみ使用されます:a)上下構造:この場合、いくつかの箱を使用すれば、自然と上下構造であり、他の設定は必要ありません.b)左右の構造:この場合、いくつかの箱を使用し、対応するフローティングを行い、通常のモード:i.2つの箱:一左一右ii.3つの箱:2つの左または2つの右または1つの左、または1つの倒れ.iii.もっと箱:通常は片側倒しです.
フローティングの説明:
浮動は表現上他の要素と地盤を奪わない以外に、その最も主要な特性(つまり破壊効果)は実は:父の箱に合理的な高さを失わせます--父の箱はすでにこれらの浮動の内部の箱を包むことができません!これはレイアウトでは基本的に許されません!では、親の箱が子の箱を包んでいるという補完的な方法を使用しなければなりません.親ボックスに正確な有効高さを得る方法は3つあります.1、(固定高さ)親ボックスに固定高さを設定します.通常、設計時に高さが既知で、変更されない場合です.2、(自動高さ)親ボックスの内部の最後尾にフローティングをクリアする空のボックスを追加します.3、(自動高さ)親ボックスにcssプロパティを設定します.overflow:hidden;レイアウトは左右に並べ、左右に並べて浮動する必要があり、浮動は破壊効果を修正する必要がある--親箱に子箱を合理的に包む.
テキストスタイル:
デフォルトのテキスト表示:placeholder
placeholder=" " css ::-webkit-input-placeholder { color: white; } 同じdivのフォントに関連するすべての色をwhiteに変更する必要があります. ：color
：font-size:
：font-weight:
：font-style:
：font-family:
：text-decoration
：line-height:
：text-indent:
：letter-spacing:
：word-spacing:
：vertical-align:
まず、ほとんどのラベルが実は箱であるという観念を確立します.箱とは、「矩形の領域範囲」にすぎません.実はウェブページとは、一つの箱に一つの箱をつけることにほかならない.1つの箱には、次のような領域(構造)があります.
Webデザインにおける「コンテンツと表現の分離」の考え方
私たちは以前htmlを勉強して、ラベルには「表形表意」の役割があると言っていました.内容とその表現が混在しているとも言える.現在:css技術は実際には1つのページの中の各ラベルの表現をすべて“提出”して1つの専門の地方(例えばstyleラベルの中で)に置くことができて、残りの部分(ラベルと文字の内容など)は全体的に“構造/内容”と呼ばれます.このようなやり方は「内容と表現の分離思想」と呼ばれている.
箱の2つの初期状態(基本的な表現):
レイアウトの初歩(原理):
レイアウトとは、ページの内容を一定の方法で適切な位置に置くことを意味します.レイアウトの基本手順:1、「現在のレイアウト」を視覚的に明らかな方法でいくつかのブロックを分割し、分割は2つの方法でのみ使用されます:a)上下構造:この場合、いくつかの箱を使用すれば、自然と上下構造であり、他の設定は必要ありません.b)左右の構造:この場合、いくつかの箱を使用し、対応するフローティングを行い、通常のモード:i.2つの箱:一左一右ii.3つの箱:2つの左または2つの右または1つの左、または1つの倒れ.iii.もっと箱:通常は片側倒しです.
フローティングの説明:
， “ ”
： （ ） “ ”， ， “ ” ， “ ”。
浮動は表現上他の要素と地盤を奪わない以外に、その最も主要な特性(つまり破壊効果)は実は:父の箱に合理的な高さを失わせます--父の箱はすでにこれらの浮動の内部の箱を包むことができません!これはレイアウトでは基本的に許されません!では、親の箱が子の箱を包んでいるという補完的な方法を使用しなければなりません.親ボックスに正確な有効高さを得る方法は3つあります.1、(固定高さ)親ボックスに固定高さを設定します.通常、設計時に高さが既知で、変更されない場合です.2、(自動高さ)親ボックスの内部の最後尾にフローティングをクリアする空のボックスを追加します.3、(自動高さ)親ボックスにcssプロパティを設定します.overflow:hidden;レイアウトは左右に並べ、左右に並べて浮動する必要があり、浮動は破壊効果を修正する必要がある--親箱に子箱を合理的に包む.