WebデザインにおけるCSSの使い方とその特徴

初心者向けにCSSの機能を紹介し、既に設定されているCSSをWebページで使用する方法を紹介します。

カスケードスタイルシートの特徴

これまでのWebページにはダイナミクスが欠けていたことは言うまでもなく、専門家や特に患者でない場合、Webコンテンツのレイアウトにも多くの困難がありました。人にとって、情報を表示するウェブページを自分のアイデアや創造性に従って作成することは困難です。 HTML 言語の本質を習得した人でも、この情報のレイアウトを習得するまでに多くのテストに合格する必要があります。そのプロセスは非常に長くて苦痛です。

スタイル シートは、このニーズのもとに誕生しました。最初に行う必要があるのは、Web ページ上に要素を正確に配置し、Web デザイナーがディレクターのようにテキストと画像で構成されるアクターを簡単に制御できるようにすることです。 Web ページのステージ上のスクリプト要件に従って。

次に、Web ページ上のコンテンツ構造と形式制御を分離します。閲覧者が見たいのは Web ページ上のコンテンツ構造であり、閲覧者がこの情報をよりよく確認できるようにするには、形式制御を使用する必要があります。以前は、Web ページ上で 2 つが交互に配置されていたため、表示や変更が非常に不便でした。現在では、2 つを分離することで、Web デザイナーが非常に容易になります。コンテンツ構造とフォーマット制御が分離されているため、Web ページはコンテンツのみで構成され、すべての Web ページのフォーマット制御は特定の CSS スタイル シート ファイルに向けられます。これは 2 つの側面で利点があります:

まず、Web ページのフォーマット コードが簡素化され、外部スタイル シートもブラウザによってキャッシュに保存されるため、ダウンロードと表示の速度が向上し、表示速度も短縮されます。必要な時間。アップロードする必要があるコードの数 (繰り返されるフォーマットは 1 回しか保存されないため)。

2 番目に、Web サイトの形式を保存する CSS スタイル シート ファイルを変更するだけで、サイト全体のスタイルと特性を変更できます。これは、ページ数の多いサイトを変更する場合に特に便利です。 Web ページを 1 つずつ変更する必要がなくなり、繰り返し作業の負荷が大幅に軽減されます

カスケード スタイル シートを追加する方法

Web ページにスタイル シートを追加するには、次の 4 つの方法があります:

1 .最も簡単な方法は、HTML 識別子 (タグ) に直接追加することです:

< タグ style=”properties”> /tag<

例:

< p style=”color: blue; font-size: 10pt”>CSS 例< /p>

コード説明: フォントサイズ 10pt の「CSS インスタンス」を表示します。この方法は使い方が簡単で直感的に表示できますが、このような追加では「コンテンツ構造とフォーマット制御が別々に保存される」というスタイルシートの利点を十分に活用できないため、一般的には使用されていません。

2. HTMLヘッダー情報識別子に追加します:

< head> 
　　< style type=”text/css”> 
　　< !-- 样式表的具体内容 --> 
　　< /style> 
　　< /head>

　　3、链接样式表

　　同样是添加在HTML的头信息标识符< head>里:

< head> 
　　< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”> 
　　< /head>

　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:

　　·Screen(默认):输出到电脑屏幕

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

　　·Braille:输出到凸字触觉感知设备

　　·Tty:输出到电传打字机

　　·All:输出到以上所有设备

　　如果要输出到多种媒体，可以用逗号分隔取值表。

　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

　　·Stylesheet:指定一个外部的样式表

　　·Alternate stylesheet:指定使用一个交互样式表

　　4、联合使用样式表

　　同样是添加在HTML的头信息标识符< head>里:

< head> 
　　< style type=”text/css”> 
　　< !-- 
　　@import “*.css” 
　　其他样式表的声明 
　　--> 
　　< /style> 
　　< /head>

　　需要注意的是:

　　·联合法输入样式表必须以@import开头。

　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。