ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS について - 読書エッセイ 1 (CSS とセレクターの概要)_html/css_WEB-ITnose
CSS について - 読書エッセイ 1 (CSS とセレクターの概要)_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:28:371176ブラウズ
最近、CSS関連の知識を詳しく掘り下げるようになりました 参考資料は「CSSのアレコレ」です。このプロセスでの成果は、将来の学習を促進するために記録されます。
1. CSS の紹介
1. CSS とは
CSS は Cascading Style Sheet (カスケード スタイル シート) の略で、コンパイルを必要としないマークアップ言語です。 Web ページのスタイルと、Web ページのコンテンツからスタイル情報を分離できるようにします。任意のテキスト エディタを使用して編集できます。
2. CSS の役割
a. 不要な HTML 要素の使用を避けるために、ページのテキスト、画像、その他の要素を変更します。b. ページ構造とページ レイアウト (DIV+CSS) をより効果的に制御します。
c. 開発と保守の効率を向上させます。
3. CSS の基本構造
selector {property:value;}例: p {color:#ff0000;}
Selector (セレクター): このスタイルが次の目的で使用されることをブラウザーに伝えます。ページに一致するページ内のどのオブジェクトに HTML タグ、クラス、ID、または組み合わせて使用されるセレクターが含まれているか。
2. CSS セレクター
1. ワイルドカード セレクター
いわゆるワイルドカード セレクターは、実際には単なるアスタリスク (*) であり、通常、ページ上のすべての要素にスタイルを適用するために使用されます。例:
1 * {2 margin:0;3 padding:0;4 color:#ff0000; 5 }/*将页面中所有元素的内外边距都设为0，字的颜色设置为红色*/
2. タイプ セレクター
HTML 要素のタイプをセレクターとして使用します。例:
1 p {2 font-size:14px;3 text-decoration:underline;4 color:#ff0000; 5 }
3. クラスセレクター
クラス (class) は、コードの再利用とカプセル化を実現するためにプログラミング言語でよく使用されます。ページ内で CSS コードをクラスとして定義し、名前を付けることができます。これにより、ページ内での CSS の再利用を実現し、スタイルの定義を減らすこともできます。たとえば、myContent という名前の CSS クラスは次のとおりです。 (CSS クラス定義は . で始まる必要があることに注意してください)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css-test</title> <style> .myContent{ font-size: 25px; line-height: 5px; text-decoration:underline; font-weight:bold; color: #f00;; } </style></head><body><p>Hello</p><p>css很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong><strong>dfd</strong></p><p class="myContent">1与世界同步，做一个成功的页面仔</p><p>2让我们看看css多么奇妙吧</p></body></html>
操作の効果は次の図のようになります:
4. ID セレクター
ID セレクターとクラス セレクター非常によく似ていますが、接頭辞 # が付いています。たとえば、ID が myId であるセレクター:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 #myId{ 8 font-size: 25px; 9 line-height: 5px;10 text-decoration:underline;11 font-weight:bold;12 color: #f00;;13 }14 </style>15 </head>16 <body>17 <p>Hello</p>18 <p>css很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong><strong>dfd</strong></p>19 <p>1与世界同步，做一个成功的页面仔</p>20 <p id="myId">2让我们看看css多么奇妙吧</p>21 </body>22 </html>
実行時の効果図は次のとおりです:
5. 包含セレクター
包含セレクターは子孫セレクターにもなり、特定の機能に作用します。たとえば、要素すべての子孫 (子孫、孫、曾孫...) では、p タグ内のすべての強いタグのスタイルを p Strong に変更し、2 つのセレクターをスペースで区切ります。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 </style>13 </head>14 <body>15 <p>Hello</p>16 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>17 <p>1与世界同步，做一个成功的页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 </body>20 </html>
実行結果を下の図に示します。p タグ内の 2 つの強力なタグのコンテンツ スタイルが変更されていることがわかります。
6.サブ選択 シンボルの主な機能は、特定の要素のサブ要素 のスタイルを定義することです (2 つのセレクターは > で接続されています) が、サブ要素以外のオブジェクト (孫要素や子要素など) を定義することはできません。曾孫は許可されません)。これは、セレクターが異なるものを含むことと同じです。 5 の例を p Strong から p > Strong に変更します。これは、p 内の強いサブ要素を選択することを意味します。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p > strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 </style>13 </head>14 <body>15 <p>Hello</p>16 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>17 <p>1与世界同步，做一个成功的页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 </body>20 </html> 実行結果は以下のようになります: この時点では、bd89760de6050961dba694c732a25cf6 のみが p の子要素であり、8e99a69fbe029cd4e2b854e244eab143任意の要素128dba7a3a77be0113eb0bea6ea0a5d0 ; は p の孫要素であるため、前者のスタイルのみが変更されています。
7. 隣接セレクター
a. 隣接セレクターの表現形式は、主に同じ親要素要素の下にある要素の後に一致することを除き、サブセレクターの表現形式と似ています。たとえば、p に隣接して強い要素 p + Strong を定義します。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p + strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 </head>13 <body>14 <p>Hello</p>15 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>16 <p>1与世界同步，做一个成功的页面仔</p>17 <p>2让我们看看css多么奇妙吧</p>18 <strong>3千万不要因为这一点内容就满足了</strong>19 </body>20 </html> 走行結果は以下の通りです
如上图所示，p标签内的strong元素的样式并没有改变，只是与p相邻的8e99a69fbe029cd4e2b854e244eab1433千万不要因为这一点内容就满足了128dba7a3a77be0113eb0bea6ea0a5d0样式发生了改变。
b.如果将上述代码中的p + strong 改为 p + strong + strong，且增加strong便签，例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p + strong + strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 </style>13 </head>14 <body>15 <p>Hello</p>16 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>17 <p>1与世界同步，做一个成功的页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 <strong>3千万不要因为这一点内容就满足了</strong>20 <strong>4千万不要因为这一点内容就满足了</strong>21 <strong>5千万不要因为这一点内容就满足了</strong>22 <strong>6千万不要因为这一点内容就满足了</strong>23 </body>24 </html> 则运行结果如下图所示
c.如果将b中的p + strong + strong 换成 strong + strong，则运行结果如下所示。
8.兄弟选择符（css3引入）
E~F{property:value }，选择E元素后面的所有兄弟元素F。例如选择p后面的所有兄弟元素p
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p ~ p { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 </style>13 </head>14 <body>15 <p>Hello</p>16 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>17 <p>1与世界同步，做一个成功的页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 <strong>3千万不要因为这一点内容就满足了</strong>20 <strong>4千万不要因为这一点内容就满足了</strong>21 <div>22 <p title="css-x" id="x">css x</p>23 </div>24 <p title="css+html">css+<span>shishi</span>html</p>25 <p title="ca css d">ca css d</p>26 </body>27 </html> 运行结果如下图所示
由于 cacd664afcec3005e598c5320cfb2027css x94b3e26ee717c64999d7867364b1b4a3位于div中，与上面的p元素并不是兄弟关系，所有并没有改变样式。
9.属性选择符
例如p[title|="css"]，代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p[title|="css"]{ 8 font-size: 20px; 9 color: #f00;10 margin:0;11 }12 </style>13 </head>14 <body>15 <p>Hello</p>16 <p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>17 <p>1与世界同步，做一个成功的页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 <p title="css-x" id="x">css-x</p>20 <p title="css+html">css+<span>shishi</span>html</p>21 <p title="ca css d">ca css d</p>22 </body>23 </html> 只有title以css开头，且用-连接的元素样式发生了改变
10.伪类和伪对象
伪类和伪对象是一种特殊的类和对象，它由css自动支持，属css的一种扩展型类和对象，伪类和伪对象的名称不能被用户自定义，使用时只能够按标准格式进行应用。