最近、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> 実行結果は以下のようになります: この時点では、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的一种扩展型类和对象，伪类和伪对象的名称不能被用户自定义，使用时只能够按标准格式进行应用。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
