CSS について - 読書エッセイ 1 (CSS とセレクターの概要)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS について - 読書エッセイ 1 (CSS とセレクターの概要)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

最近、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、または組み合わせて使用されるセレクターが含まれているか。

ステートメント: プロパティと値で構成され、主にセレクターに一致するページ内のオブジェクトをレンダリング (変更) する方法をブラウザーに指示します。

プロパティ: 主に単語の形式で表示され、カスタマイズされたものではなく、すべて CSS 規約に準拠しています (個々のブラウザーのプライベートプロパティを除く)。

属性値 (value): 数値と単位、およびいくつかのキーワードが含まれます。属性に応じて形式が変わります

属性名が長すぎてスペースが含まれる場合は、属性値を p {font-family: "sans serif";} のように引用符で囲む必要があります

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>

ログイン後にコピー

実行結果は以下のようになります:

この時点では、dfd のみが p の子要素であり、任意の要素 ; は 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相邻的3千万不要因为这一点内容就满足了样式发生了改变。

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>

ログイン後にコピー

运行结果如下图所示

由于

css x

位于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的一种扩展型类和对象，伪类和伪对象的名称不能被用户自定义，使用时只能够按标准格式进行应用。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7733

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。