フロントエンドの基礎 (ゼロ) CSS の基礎_html/css_WEB-ITnose

私は最近、Baidu Front-end Technology Academy でフロントエンド関連の知識を勉強しました。以下のシリーズのブログでは、その学習プロセスと知識のポイントを記録します。これは最初の記事です。

開発ツール: sublime text 3

主なプラグイン: Emmet

CSS

CSS とは

カスケード スタイル シート (CSS と略されることもよくあります) は、HTML、XML (SVG、XHTML などのさまざまな XML 言語を含む) ドキュメント

のプレゼンテーションを記述するために使用されるスタイルシート

(スタイルシート) 言語です。

。 CSS は、構造化された要素を画面上にレンダリングする方法を記述します。

CSS を使用する理由

HTML ファイルは主にコンテンツを運ぶことができますが、ブラウザのデフォルトのレンダリング ルールでは表示できない場合に HTML はレイアウト関連の操作も実行できることはわかっています。定義したレイアウトは一貫性のない表示につながる可能性があるため、CSS が収益化を担当し、HTML がコンテンツの伝達を担当します。これは、たとえば、更新が必要な場合に適切に分離でき、拡張が容易になります。インターフェースのレイアウトをグローバルに変更する場合は、CSS を変更するだけで済みます。 CSSの導入で作業効率が大幅に向上したと言えるでしょう。これは Android 開発のスタイルに似ており、さまざまなビュー関連の属性値の構成のみを担当します。XML 宣言は HTML に似ていますが、ImageView が特定のビューを表すことを宣言し、式を完全に処理できる点が異なります。スタイルによって。ただし、個人的には、CSS セレクターの存在により、Android ではスタイルよりも CSS の方がはるかに優れていると感じています。

CSS 基本構文

写真を見る

例

body { font-family: Verdana, sans-serif; }

body 要素内のすべてのテキストのフォントは Verdana です。

CSS にはデフォルトで属性が統合されています。つまり、デフォルトでは、本文の下にあるすべての単語要素が本文の属性を継承します。Android レイアウトと同様に、親コントロールの属性も同じになります。たとえば、ルート レイアウトで backgroud="#eee" を設定すると、インターフェイスの基本色は #eee になり、CSS にも同じことが当てはまります。

セレクター

CSS の威力はセレクターの設定可能性にあり、複雑なインターフェイスの表示に非常に役立ちます

セレクター

h1,h2,h3,h4,h5,h6 { color: green; }

上記のコードは、各セレクターが互いに影響を与えず、単に一緒に記述されることを意味します。

派生セレクター

派生セレクターは、マークアップをより簡潔にするために、その位置にある要素のコンテキストに従ってスタイルを定義します。

div p { font-style: italic; font-weight: normal; }

上記の例では、div 要素内の p 要素のみが斜体でスタイル設定されており、特別な定義を行う必要はありません強力な要素のクラスまたは ID を設定すると、コードがより簡潔になります。もちろん、div と p が単独で出現する場合は影響を受けません。

id セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。 # を使用して

を定義します。 例

#red {color:red;}#green {color:green;}

html は次のように記述されます

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

ただし、同じ ID は同じ HTML ファイル内で 1 回しか使用できないことに注意してください。具体的な理由については、ここを参照してください。

> 要素を設定する class 属性を使用すると、要素のクラス名を指定できます。 IDとは異なり、同じHTMLファイル内で同じクラスを再利用できます。

を 🎜>

関係ベースのセレクター

で定義します。CSS には要素の関係に基づいたさまざまなセレクターがあります。それらを通じて、要素をより正確に選択できます。共通の関係セレクター

伪类选择器

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。

示例

a:link {color: #FF0000}		/* 未访问的链接 */a:visited {color: #00FF00}	/* 已访问的链接 */a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */a:active {color: #0000FF}	/* 选定的链接 */

上面表示a链接的各种状态的表示。

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

简单的示例

*[title] {color:red;}

上面表示把包含标题（title）的所有元素变为红色

在css中 * 可以替代任何元素

上面所讲到的任意选择器，都可以通过组合的方式表达更复杂的元素间的关系，产生复杂的显示效果。