index

セレクタ {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.6;
    font-family: century, serif;
    }

セレクタ {
  font: italic small-caps bold 22px/1.6 century, serif;
  }

セレクタ {
  font: italic small-caps bold 21px/1.5 century, serif;
  }

セレクタ {
  font: bold 21px/1.5 century, serif;
  }

問題が生じるショートハンドによる指定例の図解

［ダミーテキスト（１）］のhtmlソース

<div class="test"> 
    <p>［ダミーテキスト（１）］英文テキスト　
    abcdefghijklmnopqrsituvwxyzabcdefghijklmnopqrsituvwxyzabcdefghijklmnopqrsituvwxyz
    </p>
</div>

［ダミーテキスト（４）］のhtmlソース

<div class="test"> 
    <p>［ダミーテキスト（１）］英文テキスト　
    abcdefghijklmnopqrsituvwxyz<wbr>abcdefghijklmnopqrsituvwxyz<wbr>abcdefghijklmnopqrsituvwxyz
    </p>
</div>

CSSソース・75%のほう（上側）のみ

.box1 {
	width: 75%;
	min-width: 420px;
	height: 200px;
	margin: 20px auto;
	border: 1px solid #bbb;
	background-image: url(img3/gin-11.png), url(img3/gin-22.png); /* パス */
	background-position: left bottom, right bottom; /* position */
	background-repeat: no-repeat;
	}

CSSを使って、blink要素の代替サンプル

赤いテキスト部分が点滅します

サンプルのCSSソース

span.winker {
    color:#c33333;
    -webkit-animation:wink 1.3s ease-in-out infinite alternate;  
    -moz-animation:wink 1.3s ease-in-out infinite alternate;  
    animation:wink 1.3s ease-in-out infinite alternate;   
    }
@-webkit-keyframes wink{
    0% {opacity:0;}
    100% {opacity:1;}
    }
@-moz-keyframes wink{
    0% {opacity:0;}
    100% {opacity:1;}
    }
@keyframes wink{
    0% {opacity:0;}
    100% {opacity:1;}
    }

blank.htmlのソース（一部）

<p><a href="javaScript:ctrlp()">リンク元のlocationを変更する</a></p>
<script>
  function ctrlp() {
    window.opener.location.href = "destination.html";
  }
</script>

元のindex.htmlの2つのリンク部分のソース

 <a href="blank.html" target="_blank">target blankで開くリンク</a>
 <a href="blank.html" target="_blank" rel="noopener">target blankで開くリンク・「 rel="noopener"」付き</a>

（注） 古めブラウザやEdgeなどで、機能しない場合があるようです。

サンプル１

親要素sample1のCSS

.sample1 {
	width:500px;
	padding:10px;
	border:1px solid #37d;
	font-size:20px;
	color:green;
	}

サンプル１のhtmlソース

<div class="sample1">親要素sample1のスタイル
	<div style="border: inherit;"> border: inheritを指定した子要素1</div>
	<div> border: inheritを指定していない子要素2</div>
</div>

サンプル１-2

サンプル１-2のhtmlソース（親要素sample1のCSSは同じです）

<div class="sample1">親要素sample1のスタイル<br>
	<div style="all:initial;">  all:initialを指定した子要素1</div><br>
	<div style="all:initial;color:unset;">　all:initialとcolor:unsetを指定した子要素2</div>
</div>

• [○属性="△□"]　○属性の値が、「△□」と同じ場合（完全一致）
• [○属性~="△□"]　○属性の値が、空白区切りの語のリストで、その中の1つが「△□」と同じ場合
• [○属性|="△□"]　○属性の値が、「△□」と完全一致するか、「△□」の直後に-（ハイフン）が続く場合
• [○属性^="△□"]　○属性の値が、「△□」で始まる場合（前方一致）
• [○属性$="△□"]　○属性の値が、「△□」で終わる場合（後方一致）
• [○属性*="△□"]　○属性の値が、「△□」を含む場合

サンプル

サンプルa要素・区別無し

サンプルa要素・区別有り

サンプルのhtmlソース

  <p class="samp1"><a href="#JavaScript">サンプルa要素・区別無し</a></p>
  <p class="samp2"><a href="#JavaScript">サンプルa要素・区別有り</a></p>

サンプルのCSSソース

.samp1 a[href*="java" i] {
	background: #7bf;
	}
.samp2 a[href*="java" s] {
	background: #7bf;
	}