ホームページ > 記事 > ウェブフロントエンド > CSS の基本スキル - Selector_html/css_WEB-ITnose さん
CSS の基本スキル - Selector_html/css_WEB-ITnose さん
- WBOYオリジナル
- 2016-06-24 11:51:531193ブラウズ
CSS の理解とボックス モデルについては以前に述べましたが、詳細についてはこの記事を参照してください。 S s Import CSS (インポートされた名前空間)
まずは、Web ページを変更する、つまり HTML の各要素を関数と同様に集中的に処理します。しかし、特定の関数を使用したい場合、最初にその名前空間をインポートする必要がありますか? もちろん、方法は少し異なりますが、考え方は同じです。濃縮方法は以下の通りです。
//行内样式 <p style="color:#FF0000; font-size:20px; text-decoration:underline;">123</p> //链接式 <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <h2>CSS标题</h2> <p>紫色，出题，下划线</p> </body> //内嵌式 <style type="text/css"> <!-- p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } //导入样式 <style type="text/css"> <!-- @import url(1.css); --> </style>
CSS形式の#、スペース、ドット、コロン
CSSでは、このような形式をよく見かけます
#navigation li a:link, #navigation li a:visited{ background-color:#7591a3; color:#FFFFFF; } この形式は何を意味しますか？実はこれは CSS セレクターであり、このセレクターには 1. タグ セレクター、カテゴリ セレクター、ID セレクターが含まれます。
1. タグセレクター (HTML で記述)
<style> h1{ color:red; font-size:25px; } </style> 2. カテゴリセレクター (CSS ファイルで記述) 3. ID セレクター
上記のコードはわかります。実際にこのような文章をHTMLで設定しているそうです。以下のコードでボタンのテキストの色とフォント サイズを設定します。
<span style="font-size:14px;"> <div id="navigation"> <li><a>按钮</a></li> </div></span>IDをclassに変更する場合は、#を「.navigation」に変更するだけです。ネストされたブロックはスペースで表すことができます。たとえば、
<span style="font-size:14px;"> <span style="font-size:18px;">#navigation li a:link</span></span>
たとえば、上記のコードは div ブロック、li ブロック、およびブロックの分離です
概要
ここでは、基本的な構文といくつかの特定の属性の具体的な設定について簡単に紹介します。次のブログで、私が学んだ CS の内容を比較してみましょう。これらは私たちのクラスと非常に似ており、すべてカプセル化されたクラスであるためです。 、CSS の形式に注意する必要がありますが、利点は、CSS が私たちが思っているよりもよく考えられており、使用できるすべてのものをカプセル化していることです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。