テキストの背景に色をつける　背景の角を丸くするCSS

今日は初歩的なcssです。テキストの背景に色を付けたい、そしてその背景の角を丸くしたいを叶えるCSSです。

まずはテキストの背景に色を付けます。
テキストの背景に色を付ける場合二通り考えられます。
テキスト部分のみに背景色をつける
テキストの段落に背景色をつける
が考えられます。

これはHTMLの記述自体が異なります。
テキスト部分のみに背景色をつける場合は以下のようにspanで括ってあげる必要があります。

<p><span class="txt_bg_blue_white">SPF</span></p>

テキストの段落に背景色をつける場合はspanで括らずpやdivに直接クラスをあてます。

<p class="txt_bg_blue_white">SPF</p>

cssは以下のようにします。
これは背景色を指定し、背景色を表示した部分に余白を持たせて大きくしたいのでpaddingで増やしています。
角を丸くしているのはborder-radiusで2pxが角の丸みの指定です。数値を大きくするともっと丸くなります。
テキストは見やすく白にしました。

.txt_bg_blue_white{
	background:#58A7D2;
	padding:0.35em;
	border-radius:2px;
	color:white
}