タスク8 cssの一般的なスタイル
3811 ワード
1.ブロックレベルの要素と行内の要素はそれぞれどれらがありますか?4つ以上の特性の違いをテストし、リストします.
ブロックレベル要素div h 1~h 6(タイトル)p(段落)hr(横線)form ulli dl ddol dt(リスト)pre table tr td th(表)行内要素em strong span a br img buttoon input label select textarea code script code区別:ブロックレベルはブロックレベルと行内を含むことができ、行内にはテキストと行内 のみを含むことができる.ブロックレベルは行全体の空間を占有し、行内は自身の幅空間 を占有する.幅高さ設定ライン内でブロックができないレベルは 可能である.ブロックレベルの要素は上下margin行内の要素を設定することができます.行内要素paddingは実際の高さには無効ですが、要素全体の高さ を広げることができます.
2.CSS継承とは?継承できる属性とできない属性はどれですか?
親要素スタイルは、子孫の継承可能な属性に適用できます.フォント系列属性 テキスト系列属性 要素の可視性: 表レイアウト属性 リストレイアウト属性 カーソル属性: 継承不可属性
3.ブロックレベル要素を水平方向に中央に配置する方法行の要素を水平方向に中央に配置するにはどうすればいいですか?
ブロックレベル:margin:0 auto行:親要素text-align:center
4.CSSで三角形を実現する
5.単行テキストオーバーフロー加算...どのように実現しますか?
6.px,em,remの違い
px:(Pixel)相対長さ単位.画素pxは、ディスプレイ画面解像度に対するem:相対長さ単位である.現在のオブジェクト内のテキストに対するフォントサイズ.現在行内のテキストのフォントサイズが人為的に設定されていない場合、ブラウザのデフォルトのフォントサイズrem:要素にフォントサイズを設定する場合、相対的なサイズですが、相対的にHTMLルート要素だけです
ブロックレベル要素行内要素ブロックレベル(block-level);行内(インライン、inline-level) ブロックレベルはブロックレベルと行内を含むことができ、行内にはテキストと行内 のみを含むことができる.ブロックレベルは行全体の空間を占有し、行内は自身の幅空間 を占有する.幅高さ設定、内外マージンの差異 7.次のコードの役割を説明しますか?どうして引用符をつけますか.フォントの中で5 b 8 b4 f 53は何を表していますか?解釈:body要素のフォント高さは12 px、行高はフォントサイズの1.5倍、フォント選択tahoma、なければarial、順次類推.引用符をつけるのは、このフォントの名前にはもともとスペースが含まれているためで、引用符をつけるのは、Hiragino Sans GBが3つのフォント名ではなくフォント名であることを機械に認識させるためです. 5 b 8 b4 f 53 Unicodeを使用して符号化されたフォント名です.この例では、5 b 8 bはUnicodeの「宋」、4 f 53はUnicodeの「体」なので、この符号化は「宋体」を指します.
コード#コード#
task1 task2 task3 task4 task5 border-width border-color border-style
ブロックレベル要素div h 1~h 6(タイトル)p(段落)hr(横線)form ulli dl ddol dt(リスト)pre table tr td th(表)行内要素em strong span a br img buttoon input label select textarea code script code区別:
2.CSS継承とは?継承できる属性とできない属性はどれですか?
親要素スタイルは、子孫の継承可能な属性に適用できます.
font:
font-family:
font-weight:
font-size:
font-style:
font-variant: , , , 。
font-stretch: font-family 。 。
font-size-adjust: aspect , x-height。
text-indent:
text-align:
line-height:
word-spacing: ( )
letter-spacing: ( )
text-transform:
direction:
color:
visibility
caption-side、border-collapse、border-spacing、empty-cells、table-layout
list-style-type、list-style-image、list-style-position、list-style
cursor
1、display:
2、 :
vertical-align:
text-decoration:
text-shadow:
white-space:
unicode-bidi:
3、 :width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、 :background、background-color、background-image、background-repeat、background-position、background-attachment
5、 :float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、 :content、counter-reset、counter-increment
7、 :outline-style、outline-width、outline-color、outline
8、 :size、page-break-before、page-break-after
9、 :pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
3.ブロックレベル要素を水平方向に中央に配置する方法行の要素を水平方向に中央に配置するにはどうすればいいですか?
ブロックレベル:margin:0 auto行:親要素text-align:center
4.CSSで三角形を実現する
.t1 {
height: 0px;
width: 0px;
border-top: 20px solid black;
border-right: 20px solid transparent;
border-bottom:20px solid transparent;
border-left: 20px solid transparent;
}
5.単行テキストオーバーフロー加算...どのように実現しますか?
/* */
white-space:nowrap;
/* */
overflow:hidden;
/* 。*/
text-overflow:ellipsis;
6.px,em,remの違い
px:(Pixel)相対長さ単位.画素pxは、ディスプレイ画面解像度に対するem:相対長さ単位である.現在のオブジェクト内のテキストに対するフォントサイズ.現在行内のテキストのフォントサイズが人為的に設定されていない場合、ブラウザのデフォルトのフォントサイズrem:要素にフォントサイズを設定する場合、相対的なサイズですが、相対的にHTMLルート要素だけです
ブロックレベル要素行内要素
コード#コード#
task1 task2 task3 task4 task5 border-width border-color border-style