TIL # 1

4325 ワード
TIL CSS html テキストリンク
画像に大きな時間を指定
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
cssファイルをhtmlに関連付ける場合
<link href="index.css" rel="stylesheet" type="text/css" />
クラスにスタイルを適用する場合

スタイルをidに適用する場合

フォント名にスペースが含まれている場合は、「」(二重引用符)を付けます.
#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}
font-weightはフォントの厚さを調整する特性があります
  • 数字400と正常です.数字700とboldの厚さは同じです.
    • .bold-font {
  font-weight: bold;
}
    spanは右揃えできません.inline-elementなので
    text-indent: 50px; 들여쓰기
    &nbsp;  스페이스를 의미하는 코드
    セレクタの適用の優先度
    tag <<<<< class <<<< id <<<<<< inline css
    セレクタの貼り付け時
    p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}
    画像タグのプロパティ
  • alt:画像が表示されていない場合(画像がサーバから削除された場合、または画像アドレスが無効な場合)、
    • テキスト代替画像
  • src:画像ファイルパスまたは画像URLアドレス
  • は、1つの縦/横の値だけを設定、残りの寸法
    • を同じ割合で縮小することができる.
    画像をCSSに入れる
    <div class="bg-img">배경이미지</div>

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
    divタグの内部コンテンツの垂直サイズはdivタグの垂直サイズであり、内部に物がある限り、画面全体の幅はそれ自体の水平サイズである.
    中身がなければdiv.bg-imgのサイズは0 px*0 pxです
    横と縦の長さを固定すれば、中身がなくても画像は消えません.
    background-sizeは100%で、画像全体が長さに一致するように見えます.
    .bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%
}
    明日学習団制作チャレンジ6期(1)
    プログラマ-中間文字を入力(Lv 1)