CSS の基本スキル - Selector_html/css_WEB-ITnose さん-htmlチュートリアル-php.cn

CSS の基本スキル - Selector_html/css_WEB-ITnose さん

WBOY

リリース： 2016-06-24 11:51:53

オリジナル

1228 人が閲覧しました

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 が私たちが思っているよりもよく考えられており、使用できるすべてのものをカプセル化していることです。