HTMLベース-3

6274 ワード
html CSS テキストリンク

01.テキストの色

  • 色名
    • color : orange;
  • RGB値
    • color : rgb(83, 237, 65);
  • HEX値(16進数)
    • color : #61F96B;
    💡 色に透明度を適用した場合:hexコード6文字後にFFを追加した場合、最も効果が不透明になります.00を追加した場合、最も効果が高くなります.

    02.いくつかのテキストスタイル


    font-weight:テキストの太さ

  • 400普通粗
    • 太い
  • 700 bタグ、例えば
    • font-weight : 400;
    ｣font-weightは100200300のように提供されているので、110のような提供されていない数字は適用されません.また、fontやブラウザごとに異なる太さがサポートされているため、事前に使用して判断する必要があります.

    text-align:テキストの整列


    左
  • :左揃え
  • 右:右揃え
  • center:中央揃え
    • 普通左揃え
    text-align : center;

    text-装飾:テキスト下線

  • 下線:テキスト下線
  • 上線:文字の下線
  • line-through:削除行
  • none:ロープを消すという意味は
    • です
     a { 
 	text-decoration : none;
}
    💡 text-lexto-color:色<-テキストの装飾色を変更できます

    03中央揃えできません!


    aタグの場合、中央揃えができない場合があります.これは、aタグが文章の一部のみを占め、画面全体の一部ではないため、中央揃えができないためです->aラベルをdivで包んで設定すればいいです.(divタグが画面全体を占めているため)
    <div class="menu">
	<a href="#">Link</a>
</div>

.menu {
	text-align: center;
}
    💡 # ハッシュとはページの一番上を指します.

    04フォントサイズ


    絶対絶対的な方法

  • px
  • pt:pxの1.33倍サイズ

    • 相対関係メソッド

  • em : 1em(100%), 2em(200%), 1.5em(150%) ...
  • %:親要素のフォントサイズに基づいています.
    • <body>
	<div1>
    	<div2>
        	<div3>
            </div3>
        </div2>
    </div1>
</body>

.div1 {
	font-size : 100%  // body font-size의 100%
}
.div2 {
	font-size : 200% // div1 font-size의 200% (2배)
}
.div3 { 
	font-size : 200% // div2 font-size의 200%
}

    05. line-height


    line-heightを使用すると、行間を調整できます.

    上の図の青い線の間は「content area(コンテンツ領域)」で、line-heightは「content area」に影響しません.上図に示すように、line-heghtは99 pxがcontent areaより40 px多いように設定されているので、上下20 pxのスペースが増加します.

    line-heightを40 pxに設定すると、content areaより19 px少ないため、上下-9.5 pxのスペースが減少します.

    06.フォント設定

  • Serif:Times New Roman,宮書体
  • Sans-Serif:Arial,転動体
  • Monospace : Courier, Courier New
  • Cursive : Comic Sans MS, Monotype Corsiva
  • Fantasy : Impact, Haettenschweiler

    • フォント設定はfont-family!

    h1 { 
	font-family : "Times New Roman(제1의 폰트)", Times(제2의 폰트), 
    	serif(설치되어 있는 폰트 찾으려고 함);
}

    07.フォントの使い方


    1.Webフォントの使用


    💡 fonts.google.com:googleが提供するフォント->追加->linkラベルのコピー->headラベルへの貼り付け
    💡 fonts.google.com/earlyaccess:beta上場フォントセットを検索->ctrl+f韓国語、次に->アドレス部分をコピー->リンクラベルに貼り付け->font familyに適用

    2.フォントファイルの使用


    cssファイルに次の例を作成します.
    📁 test
	📁 css
		📔 style.css
    📁 fonts
    	📔 BMJUA_otf.otf 

@font-face {
	src: url("../fonts/BMJUA_otf.otf")
    font-family: "Jua";
}

    08.spanラベル


    义齿

  • 共通点:要素を組み合わせる
  • 区別:div tagは文章を新しい行に置き、span tagは改行しない.
    • <p>내용<span class="red">내용</span></p>
    ポンゴネットの二分検索の挑戦
    白駿1931会議室手配[C+]