210802 replit study

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

Font style

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}
「Times New Romanのみ」(二重引用符).
フォント名にスペースがある場合は、「」(二重引用符)を使用する必要があります.
カラー値
color picker
color picker hex color #0000ffhex表示からrgb表示に変更したい場合は、googleでキーワード「color hex to rgb」を検索します.

text style


text-align

  • <span>クラスを右揃えにしますが、右揃えはしていません.
  • <span>はいinline-elementですので、「spanの右揃え」テキストのようにエリアを占有しており、揃えられません.
    この要素が占める領域内でソート

    • indent

    .js-description {
  text-indent: 50px;
}
    インデントサイズ50 px

    ⭐️ margin & padding


    273 pxという名前の水平値は、充填領域のマージの水平長です.
    余白はborder外部で生成された余白です

    margin(オレンジ)へのマージの横方向の長さ
    273(要素)+50(左端)+50(右端)=373
    純コンテンツ(青色領域)はpaddingとborderを除く長さであり、計算すると163 pxである.
    純コンテンツ(青色領域)はpaddingとborderを除く長さであり、計算すると163 pxである.

    border


    spanラベルで下線のように見えます


    下線の厚さや色など、完璧にカスタマイズするのは難しいです.
    border-bottom、私の欲しいスタイルで下線を引くことができます
    span {
  border-bottom: 3px solid black;
  padding: 5px;
}

    divラベル、blackquoteのように見えます


    margin-left
    border-left
    padding-left
    div {
  margin-left: 20px;
  border-left: 2px solid black;
  padding-left: 20px;
}
    css 3練習
    ドラッグ可能なレイヤ