CSS 3ダミークラス、背景サイズ、テキストオーバーフロー、word-break、column-count等(学習31日目TIL)

1670 ワード
CSS3 word-break テキストリンク
210721期間に学んだ選択者を復習し,新しい属性選択者,修多類選択者,背景サイズを学習した.

CSS3 tips

  • プロパティセレクタを使用してスタイルを適用できます.
    • a[href^="http"] { 
  color: orange;
}
a[href$="html"] {
  color: red;
}
a[href*="www"] {
  font-weight: bold;
  font-style: italic;
}
/* 속성^="속성값 시작", 속성$="속성값 마지막", 속성*="속성값 포함" */
  • 新しい認識の擬似クラスセレクタ
    • li:empty { /* 빈 항목 선택(공백,텍스트 없어야 함) */
  border: 1px solid red;
  padding: 50px;
}
/*
only-child 유일한 자식을 선택
only-of-type 해당 유형의 유일한 항목 선택
*/
  • resizeプロパティを使用すると、要素のサイズを任意に調整できます.
    • (resize:both/水平/垂直の3種類)
  • 背景-原点は画像の位置を指定します.
    {padding-box(default), content-box, border-box}
  • バックグラウンド-クリップを使用してバックグラウンド属性の適用を開始します.
    {padding-box, content-box, border-box(default)}
  • appearance:noneは、フォーム属性の固有設計を初期化できます.
  • outlineは外枠の画像です.
  • white-space:nowrapは改行しません.pre、pre-wrap、per-lineもあり、
  • text-overflow:省略されたテキストで省略...
  • 単語-wrap:break-wordが長い英語でスペルされている場合、改行時に
    • が適用されます.
  • word-break:break-all単語を中断するために使用
    英語の句読点を使用すると、1つ以上のスペースが表示され、この問題を解決できます}
  • column-countプロパティを使用してセグメント化できます.
    (column-gap段落間隔、column-rule区切り線属性を追加することもできます)
    • [Java] 1. 変数と定数
    プログラマ8級【Even or Odd (偶数または奇数)】このプログラミング問題があなたに解けるでしょうか！！