いくつかのプログラミング言語を紹介します — CSS 言語

CSS言語

導入

CSS (Cascading Style Sheets) は、HTML や XML などのドキュメントのスタイルを表現するために使用されるコンピューター言語です。CSS は、Web ページを静的に装飾するだけでなく、さまざまなスクリプト言語を使用して Web ページの要素を動的にフォーマットすることもできます。

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントサイズとスタイルをサポートし、Web ページのオブジェクトとモデルスタイルを編集する機能を備えています。

CSSはCascading Style Sheetsの略です
スタイルは HTML 要素の表示方法を定義します
スタイルは通常、スタイルシートに保存されます
HTML 4.0 にスタイルを追加すると、コンテンツとプレゼンテーションの分離の問題が解決されます。
外部スタイルシートで作業効率が大幅に向上
外部スタイルシートは通常、CSS ファイルに保存されます
複数のスタイル定義を 1 つにカスケードできます

開発パス

$1990 年$ 、ティムバーナーズリーとロバートカイリオは Web を共同発明しました。 $1994 年に$ 、Web は実際に研究室から誕生しました。

HTML が発明されて以来、スタイルはさまざまな形で存在してきました。さまざまなブラウザーがそれぞれのスタイル言語を組み合わせて、ユーザーがページ効果を制御できるようにします。元の HTML には表示属性がほとんど含まれていませんでした。

HTML が成長するにつれて、ページ設計者のニーズを満たすために多くの表示機能が HTML に追加されました。しかし、これらの機能が追加されると、HTML はますます乱雑になり、HTML ページはますます肥大化していきます。そしてCSSが誕生しました。

$1994 年に$ Ha Kun Li が CSS の最初の提案を提案しました。当時、Bert Poss は Argo というブラウザを設計していたので、一緒に CSS を設計することにしました。

実は当時のインターネット業界ではすでに統一スタイルシート言語の提案はいくつかありましたが、「カスケード」という意味が豊かなスタイルシート言語はCSSが初めてでした。CSS では、1 つのドキュメントのスタイルを他のスタイルシートから継承できます。読者は、ある場所では自分の好みのスタイルを使用し、他の場所では作者のスタイルを継承または「カスケード」することができます。このカスケードアプローチにより、書き手と読み手の両方が独自のデザインを追加し、全員の好みを組み合わせることができる柔軟性が得られます。

のハクン1994年 $1994 年$ にシカゴで開催された会議で初めて提案されました。 $CSS$ 提案、 $CSS は1995 年$ の www Web カンファレンスで再び提案されました。Boss は CSS をサポートする Argo ブラウザの例をデモンストレーションし、Haken も CSS をサポートする Arena ブラウザのデモンストレーションを行いました。

同年、W3C 組織が設立され、CSS クリエイティブメンバー全員が W3C ワーキンググループとなって CSS 標準の開発に全力を尽くし、カスケードスタイルシートの開発はようやく軌道に乗りました。Microsoft Corporation の Thomas Rildon など、関与するメンバーはますます増えており、彼の努力により、最終的に Internet Explorer ブラウザが CSS 標準をサポートするようになりました。Ha Kun、Bo Si らはこのプロジェクトの主要な技術リーダーです。 $1996$ 年末にCSS の最初の草案が完成し、 $12 月に$ 、カスケードスタイルシートの最初の正式な標準が完成し、W3C 勧告になりました。

$1997 年初$ 頭、CSS を担当する W3C ワーキンググループは、初版では取り上げられなかった問題について議論し始めました。その議論の結果は、 $1998 年$ 5 月5 月に発行された CSS 仕様の第 2 版 $。$

言語機能

CSS は、HTML マークアップ言語のスタイル記述を提供し、その中の要素がどのように表示されるかを定義します。CSS は Web デザインの世界における画期的な技術でした。これを使用して、小さなスタイルの更新に関連するすべてのページ要素を変更できます。

豊富なスタイル定義

CSS は、豊富なドキュメントスタイルの外観に加えて、テキストと背景のプロパティを設定する機能を提供します。これにより、任意の要素の境界線の作成、要素の境界線と他の要素の間の距離、および要素の境界線と要素間の距離の作成が可能になります。要素のコンテンツ。テキストを自由に変更できるようにします。大文字、装飾、その他のページ効果。

使いやすさと変更

headerCSS では、HTML 要素の style 属性でスタイルを定義したり、 HTML ドキュメントの一部でスタイルを定義したり、HTML ページで参照できるように特別な CSS ファイルでスタイルを宣言したりできます。つまり、CSS スタイルシートは、すべてのスタイル宣言を統一的に格納し、一元管理することができます。さらに、同じスタイルを持つ要素をグループ化して同じスタイルで定義したり、特定のスタイルを同じ名前を持つすべての HTML タグに適用したり、CSS スタイルを特定のページ要素に割り当てたりすることができます。スタイルを変更する場合は、スタイルリストで対応するスタイル宣言を見つけて変更するだけです。

複数ページのアプリケーション

CSS スタイルシートは CSS ファイルに個別に保存できるため、同じ CSS スタイルシートを複数のページで使用できます。理論的には、CSS スタイルシートはどのページファイルにも属さず、どのページファイルからも参照できます。このようにして、複数のページスタイルの統一を実現できます。

カスケード

簡単に言えば、カスケードとは、要素に同じスタイルを複数回設定することです。これにより、最後に設定された属性値が使用されます。たとえば、サイト内の複数のページに同じ CSS スタイルシートのセットを使用し、一部のページの一部の要素には他のスタイルを使用したい場合、これらのスタイルのスタイルシートを定義してページに適用できます。これらの後で定義されたスタイルは以前のスタイル設定を書き換え、ブラウザに表示されるものが最後のスタイル効果になります。

ページ圧縮

HTML を使用してページ効果を定義する Web サイトでは、さまざまな仕様のテキストスタイルを形成するために多数の表やfont要素が必要になることが多く、その結果、大量の HTML タグが生成され、サイズが大きくなります。ページファイル。CSS スタイルシートにスタイル宣言を記述するだけで、ページのサイズを大幅に削減できるため、ページの読み込み時間も大幅に短縮されます。さらに、CSS スタイルシートを再利用することでページのサイズが大幅に縮小され、ダウンロード時間が短縮されます。

動作原理

CSS は、フォント、色、位置などのスタイル構造を定義する言語であり、Web ページ上の情報をフォーマットして表示する方法を記述するために使用されます。CSS スタイルは、HTML ページに直接保存することも、別のスタイルシートファイルに保存することもできます。いずれの場合も、スタイルシートには、指定されたタイプの要素にスタイルを適用するためのルールが含まれています。_css外部で使用する場合、スタイルシートルールは、ファイル拡張子がの外部スタイルシートドキュメントに配置されます。

スタイルルールは、テキストの段落やリンクなど、Web ページ内の要素に適用できる書式設定の指示です。スタイルルールは、1 つ以上のスタイル属性とその値で構成されます。内部スタイルシートは Web ページに直接配置され、外部スタイルシートは別のドキュメントに保存され、Web ページは特別なタグを介して外部スタイルシートにリンクします。

CSS という名前の「カスケード」は、スタイルシートルールが HTML ドキュメントの要素に適用される方法を指します。具体的には、CSS スタイルシート内のスタイルは階層を形成し、より具体的なスタイルが一般的なスタイルをオーバーライドします。スタイルルールの優先順位は、この階層に従って CSS によって決定されるため、カスケード効果が実現されます。

簡単なプログラム

.heart {
    
    
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(45deg);
  background: red;
}

.heart::before,
.heart::after {
    
    
  content: "";
  width: inherit;
  height: inherit;
  background: inherit;
  position: absolute;
}

.heart::before {
    
    
  top: -10px;
}

.heart::after {
    
    
  left: -10px;
}

参考

https://baike.baidu.com/item/CSS/5457?fr=ge_ala
https://www.runoob.com/css/css-intro.html
https://www.oh100.com/kaoshi/web/340451.html