CSSの主なプロパティ一覧について

<p>文字の色を変更</p>

p {color:red}

<p>背景色を変更</p>

p {background-color:red}

<p></p>

p {
  background-image: url(○○/○○.拡張子) /* 画像リンク先/画像名.拡張子 */
  width:  画像の横幅サイズ              /* 画像サイズ指定(横幅) */
  height: 画像の縦幅サイズ              /* 画像サイズ指定(縦幅) */
}

<p> font-style : normal </p>
<p class="ital"> font-style : italic </p>
<p class="obliq"> font-style : oblique </p>
<p> text-decoration : none </p>
<p class="underl"> text-decoration : underline </p>
<p class="line"> text-decoration : line-through </p>
<p class="overl"> text-decoration : overline </p>
<p class="under-overl"> text-decoration : underline overline </p>
<p class="underl-solid"> text-decoration : underline solid 色 </p>
<p class="under-double"> text-decoration : underline double </p>
<p class="under-dotted"> text-decoration : underline dotted </p>
<p class="under-dashed"> text-decoration : underline dashed </p>
<p class="under-wavy"> text-decoration : underline wavy </p>

.ital {font-style: italic}
.obliq {font-style: oblique}
.underl {text-decoration: underline}
.line {text-decoration: line-through}
.overl {text-decoration: overline}
.under-overl {text-decoration: underline overline}
.underl-solid {text-decoration: underline solid red}
.under-double {text-decoration: underline double}
.under-dotted {text-decoration: underline dotted}
.under-dashed {text-decoration: underline dashed}
.under-wavy {text-decoration: underline wavy}

<ul>
  <li> font-weight : normal </li>
  <li class="bold"> font-weight : bold </li>
  <li class="w100"> font-weight : 100 </li>
  <li class="w200"> font-weight : 200 </li>
  <li class="w300"> font-weight : 300 </li>
  <li class="w400"> font-weight : 400 </li>
  <li class="w500"> font-weight : 500 </li>
  <li class="w600"> font-weight : 600 </li>
  <li class="w700"> font-weight : 700 </li>
  <li class="w800"> font-weight : 800 </li>
  <li class="w900"> font-weight : 900 </li>
</ul>

.bold {font-weight: bold;}
.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w600 {font-weight: 600;}
.w700 {font-weight: 700;}
.w800 {font-weight: 800;}
.w900 {font-weight: 900;}

<ul>
  <li class="xxs"> xx-smallのフォントサイズです </li>
  <li class="xs"> x-smallのフォントサイズです </li>
  <li class="s"> smallのフォントサイズです </li>
  <li class="m"> medium(標準)のフォントサイズです </li>
  <li class="l"> largeのフォントサイズです </li>
  <li class="xl"> x-largeのフォントサイズです </li>
  <li class="xxl"> xx-largeのフォントサイズです </li>
</ul>
<hr>
<ul>
  <li class="smaller"> smallerのフォントサイズです </li>
  <li> mediumのフォントサイズです </li>    
  <li class="large"> largerのフォントサイズです </li>
</ul>
<hr>
<ul>
  <li class="p50"> 50%のフォントサイズです </li>
  <li class="p80"> 80%のフォントサイズです </li>
  <li class="p100"> 100%のフォントサイズです </li>
  <li class="p150"> 150%のフォントサイズです </li>
</ul>

.xxs{font-size: xx-small;}
.xs{font-size: x-small;}
.s{font-size: small;}
.m{font-size: medium;}
.l{font-size: large;}
.xl{font-size: x-large;}
.xxl{font-size: xx-large;}

.smaller{font-size: smaller;}
.larger{font-size: larger;}

.p50{font-size: 50%;}
.p80{font-size: 80%;}
.p100{font-size: 100%;}
.p150{font-size: 150%;}

<p class="normal">
  line-heightプロパティは、<br>
  行の高さを指定するプロパティになり<br>
  マイナス値は指定できなく、<br>
  単位無しの数値と％表記はフォントサイズに対しての割合になります。
</p>
<hr>
<p class="l2">
  line-heightプロパティは、<br>
  行の高さを指定するプロパティになり<br>
  マイナス値は指定できなく、<br>
  単位無しの数値と％表記はフォントサイズに対しての割合になります。
</p>
<hr>
<p class="lp200">
  line-heightプロパティは、<br>
  行の高さを指定するプロパティになり<br>
  マイナス値は指定できなく、<br>
  単位無しの数値と％表記はフォントサイズに対しての割合になります。
</p>

.normal{line-height: normal;}
.l1.5{line-height: 2;}
.lp180{line-height: 200%;}

<p class="family1">この文章はserifです。</p>
<p class="family2">この文章はsans-serifです。</p>
<p class="family3">この文章はcursiveです。</p>
<p class="family4">この文章はfantasyです。</p>
<p class="family5">この文章はmonospaceです。</p>

.family1 {font-family: serif;}
.family2 {font-family: sans-serif;}
.family3 {font-family: cursive;}
.family4 {font-family: fantasy;}
.family5 {font-family: monospace;}