デフォルトCSS 3スタイル属性

19366 ワード
html5 CSS3 テキストリンク
スタイルのプロパティは1つずつ暗記されていません.慣れろ!

  • CSS 3単位
     1.キーワード:none...
     2.サイズ単位:%、em(乗数単位)-->相対、px-->絶対
     * 多くのテクニックを使用して、タグ全体の絶対サイズを指定し、一部のタグを相対的に変更します.
     3.色単位:キーワード、HEX、RGB、RGBA、HSL、HSLA(Aは透明度)
     4.URL単位:url()関数にパスを入力

  • 表示される属性
    *画面に表示される表示方法の属性を指定します.
    display
    none:タグを画面に表示しない
    block:タグをblock形式に指定する
    inline:タグをinline形式に指定する
    inline block:タグをinline block形式に指定する
    inline vs inline-block
    inline:width,height属性はxを適用し,margin属性は左右のみ適用する
    inline-block:width、heightプロパティを適用し、上下左右にmarginプロパティを適用
    visibility
    visible:タグを表示する
    hidden:タグを非表示にする
    折りたたみ:表ラベルを非表示にする
    visibility: hidden vs display: none
    可視性ヒョウジ:hidden-->スペースの使用(hidden-->Use Space)
    display:none-->スペース占有x、削除
    opacity
    0～1の範囲:0は透明、1は不透明

  • ボックスのプロパティ
    *Webレイアウトで最も重要なスタイル属性
    width, height
    テキストを囲む領域のサイズを指定するスタイルプロパティ.
    margin, padding
    数式
     合計幅=幅+2*(余白+枠線+塗りつぶし)
     全高=height+2*(マージン+枠線+塗りつぶし)
    上、下、左、右はそれぞれ適用できます.
    box-sizing
    -->width属性とheight属性の範囲を指定
    content-box:デフォルト
     合計幅=幅+2*(余白+枠線+塗りつぶし)
     全高=height+2*(マージン+枠線+塗りつぶし)
    border-box:width,heightプロパティ枠線を含む領域のサイズを指定
     合計幅=幅+2*margin
     全高=height+2*マージン

  • 枠線のプロパティ
    border-width, border-style, border-color
    border-width:枠線の幅
    border-style:枠線の形状
    border-color:枠線の色
    -->3つのborderプロパティを同時に使用できます(幅、スタイル、色別)
    border-radius
    -->枠線を丸くする

  • 背景プロパティ
    background-image
    -->背景に入れる画像を指定しurl単位で
    background-size
    -->背景の幅と高さを指定します.1番目の位置は幅、2番目の位置は高さです.
    background-repeat
    repeat:画像形成パターン
    repeat-x:X軸方向繰り返し画像
    repeat-y:Y軸方向繰り返し画像
    No-repeat:xを繰り返す
    background-attachment
    -->背景画像を画面に貼り付ける方法を指定します
    スクロール:既定値、背景画像はスクロールとともに移動
    fixed:スクロール時に背景画像を固定する
    background-position
    キーワード:bottom,left,right,top...
    X軸サイズ:絶対位置の設定
    X軸サイズY軸サイズ:絶対位置設定

  • フォントのプロパティ
    *テキストに関連するスタイル属性
    font-size
    -->文字サイズを指定するスタイルプロパティ(数値またはキーワードに設定)
    font-size: 32px; <!-- 숫자로 사이즈 지정 -->
font-size: large; <!-- 키워드로 사이즈 지정 -->
    font-family
    -->フォントのスタイル属性の指定
    *はフォントを表します
    Serif, Sans-serif
    font-family: '폰트명', sans-serif; <!-- 첫 번째 폰트가 존재하지 않으면 sans-serif 적용 -->
    font-style, font-weight
    -->フォントの傾き、厚みのあるスタイル
    *font-style属性キーワード
    inherit, initial, italic, normal, oblique, unset
    *font-weight属性キーワード
    数字、bold、bolder、継承...
    line-height
    -->テキストの高さを指定します.
     CSSはブロック形式のタグを垂直に揃えることができない.したがって、親ラベルの高さと同じ直線の高さを指定すると、垂直方向の中央揃えが可能になります.
    text-align
    -->テキストの位置合わせのプロパティ(水平方向)
    Inline要素に幅は存在しないためtext-alignプロパティは適用できません.
    text-decoration

  • 位置プロパティ
    要素の位置を設定する2つの方法
    1.絶対位置座標:要素のX、Y座標を設定して絶対位置を指定する
    2.相対位置座標:要素を入力する順番で相対位置を指定する
    position
    -->タグの位置設定方法の変更
    static:タグを上から下に順に配置(相対)
    相対:初期位置状態から上下左右に位置を移動(相対)
    absolute:絶対位置座標(絶対)の設定
    fixed:画面に対する絶対位置座標(絶対)の設定
    position: absolute
     特定のラベルにposition: absolute属性を付けた場合、position: relative属性を持つ最近の親を基準に絶対移動します.bodyタグは、実質的にposition: relative属性を有する.
    <div class= "box red"></div>
<div class= "box green"></div>
<div class= "box blue"></div>
    .box { width: 100px; height: 100px; position: absolute; }
.red { background-color: red; left: 10px; top: 10px; }
.green { background-color: green; left: 50px; top: 50px; }
.blue { background-color: blue; left: 90px; top: 90px; }
    -->bodyタグに従って属性に指定された絶対移動コード
    *デフォルトでは、HTMLには後から入力するラベルが上向きになる機能があります.
    z-index
    -->タグの前に移動する順序を変更します.数値が大きいほど、前に移動する位置が大きくなります
    位置プロパティに関連する数式
    1.position属性にabsoluteキーワードを適用すると、親ラベルが領域を占有します. 行かない.
    2.子孫のposition属性にabsoluteキーワードを適用し、親はheightを使用することができる 属性の使用-->親ラベルを領域に配置できます.
    3.子孫のposition属性にabsoluteキーワード、親のpositionを適用 属性にrelativeキーワードを適用-->親に対する子ラベルの位置 絶対座標の設定
    overflow
    -->内部要素が親要素の範囲外である場合の処理方法を指定します.
    hidden:領域を超えた部分を非表示にする
    スクロール:範囲外の部分をスクロール
    親の属性に掛ける.
    float(重要!!)
    -->リッチターゲットを作成するためのスタイルプロパティ
          Webレイアウトの作成
    left:左側にラベルを貼り付けます
    right:右側にタグを貼り付けます
    floatプロパティを使用した水平ソートfloat: left:ex)1、2を左に水平に揃えるfloat: right:ex)2,1を右に水平に整列
    floatプロパティを使用してレイアウトを構成する
    *  子にはfloat、親にはoverflow、親にはhiddenのキーワードが適用されます.
    *   典型的なWebレイアウト
    <div id="header"></div>
<div id="navigation"></div>
<div id="wrap">
   <div id="aside"></div>
   <div id="section"></div>
</div>
<div id="footer"></div>
         中央揃えbodyラベル
    body {
     width: 960px;
     margin: 0 auto;
}
         wrapラベル内部asideで、部分を分割
    #aside {
      width: 200px;
      float: left;
}
#section {
      width: 200px;
      float: right;
}
#wrap { overflow: hidden; } <!-- wrap과 footer 나누기 위하여 사용 -->

  • clear:両方のレイアウトを使用する
    -->asideとsectionはwrapを使用して単独で巻き付けません.
         横断可能な部分に<div class="clear"></div>を入れます.
         cssプロパティを使用してclearクラスラベルに2つのキーワードを同時に追加します.
    <div id="header"></div>
<div id="navigation"></div>
<div class="clear"></div>
<div id="aside"></div>
<div id="section"></div>
<div class="clear"></div>
<div id="footer"></div>
<div class="clear"></div>
    body {
    width: 960px;
    margin: 0 auto;
} <!-- 중앙 정렬 -->
.clear {
    clear:both;
} <!-- 행으로 sector를 나눔
#aside {
    float:left;
    width:260px;
}
#section {
    float: right;
    width: 700px;
}

  • シャドウアトリビュート(Shadow Attributes)
    text-shadowtext:shadow: 오른쪽 아래 흐림도 색상box-shadow
    ----->ボックスのシャドウ属性、キーワードはtext-shadowと一致
    *コンマを使用して複数の重複シャドウを使用できます.

  • グラデーション
    -->2色以上をブレンドする機能
    linear-gradient(각도, 색상1 위치, 색상2 위치) <!-- linear-gradient 함수 -->
    • Android描画ステップの1つ:グラフィックの描画
    現代のJavaScript