简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS スタイルのグラフィックとテキストの詳細な説明: css スタイル シートと selector_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:35:56
オリジナル
1515 人が閲覧しました

メインコンテンツ

  • CSSの概要
  • CSSとHTMLを組み合わせる3つの方法: インラインスタイルシート、埋め込みスタイルシート、外部スタイルシート
  • CSSの4つの基本セレクター: タグセレクター、クラスセレクター、IDセレクター、ユニバーサルselector
  • 3種類のCSS拡張セレクター: 組み合わせセレクター、子孫セレクター、擬似クラスセレクター
  • CSSスタイルの優先順位

    • CSSの概要

    CSS: カスケードスタイルシート、カスケードスタイルシート。 CSS の機能は、HTML ページのタグにさまざまなスタイルを追加し、Web ページの表示効果を定義することです。簡単に言うと、CSSはWebページのコンテンツと表示スタイルを分離し、表示機能を向上させます。 次に、なぜ CSS を使用する必要があるのか​​について話したいと思います。

    HTMLの欠点:

    複数のデバイスに適応できない

    1. インテリジェントで十分な容量のブラウザが必要

    2. データと表示が分離されていない

    3. 十分な能力がない
    CSS利点:

    データと表示を分離する

    1. ネットワークトラフィックを削減する

    2. Webサイト全体の視覚効果を一貫させる

    3. 開発効率を向上させる（カップリングが減少し、1人がHTMLを書く責任を負い、1人がHTMLを書く責任を負います） CSS の記述を担当します)
      5. たとえば、HTML で実装すると、100 回記述する必要があるスタイルがあります。一度書いた。現在、HTML はデータと一部のコントロールのみを提供し、さまざまなスタイルの提供は完全に CSS に任せています。

    CSS 構文

    文法形式: 

    选择器{	属性名: 属性值;	属性名: 属性值;}
    ログイン後にコピー

    説明:

    セレクターはページ上の特定のタイプの要素を表し、セレクターの後には中括弧が必要です。 属性名はコロンで区切る必要があり、属性値はセミコロンで区切る必要があります (最後の属性にはセミコロンは必要ありません)。
    属性名とコロンの間にスペースを入れないことが最善です (経験)。
    属性に複数の値がある場合、複数の値はスペースで区切られます

    例: 

    p{color: red;}
    ログイン後にコピー

    完全版のコード例: 

    <style type="text/css">	p{		font-weight: bold;		font-style: italic;		color: red;	}</style> <body>	<p>洗白白</p>	<p>你懂得</p>	<p>我不会就这样轻易的狗带</p> </body>
    ログイン後にコピー
    効果:

    CSS コードに関するコメント:

    形式: 

    <style type="text/css">	/*		具体的注释	*/	p{		font-weight: bold;		font-style: italic;		color: red;	}</style>
    ログイン後にコピー
    注: コメントは /* */ のみあり、// コメントはありません。コメントを有効にするには、