CSS で選択されたテキストを自在にスタイリッシュする

はじめに

この実験では、CSS プログラミングの世界を探り、さまざまな CSS プロパティとセレクタを使って Web ページをスタイリッシュにする方法を学びます。この実験の目的は、初心者や中級者の開発者に実践的な経験を提供し、視覚的に魅力的な Web ページを作成するスキルを向上させることです。この実験を通じて、一般的な CSS の問題のトラブルシューティング方法やコーディングにおけるベストプラクティスも学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

選択されたテキストのカスタマイズ

VM には既に index.html と style.css が用意されています。

選択されたテキストのスタイルを変更するには、::selection 疑似セレクタを使用します。以下は、段落要素内のテキストを選択してスタイル付けするコードの例です。

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは「選択されたテキストのカスタマイズ」の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。