装飾された引用符

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、CSS の quotes プロパティを調べます。これにより、インライン引用符に使用する引用符をカスタマイズできます。このプロパティを使って独自の開始引用符と終了引用符を定義し、HTML の <q> 要素に適用する方法を学びます。この実験が終わるとき、Web ページのスタイリングに個性を加える方法をより深く理解しているでしょう。

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

装飾された引用符

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

インライン引用符をカスタマイズするには、<q> 要素内の quotes プロパティを変更します。

たとえば:

<p><q>Do or do not, there is no try.</q> – Yoda</p>

は、CSS を使って丸括弧付きの引用符でスタイリングできます:

q {
  quotes: "“" "”";
}

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

まとめ

おめでとうございます!あなたは装飾された引用符の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。