WebデザインにおけるCSSの使い方とその特徴-CSSチュートリアル-php.cn

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

W3C (The World Wide Web Consortium) は、動的 HTML (Dynamic HTML) を、スクリプト言語 (JavaScript、Vbscript などを含む)、動的効果をサポートするブラウザー (Internet Explorer 、 Netscape Navigator など) と CSS スタイルシート。

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

これまでの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 識別子 (タグ) に直接追加することです:

56db441339cc45ad4793318225bb0459 /tagf8182fe76ea7324e1a175c4db79fa0caCSS 例6fb279ad3fd4344cbdd93aac6ad173ac

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

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

以下は引用部分です:

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

　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“3715a918f7df294094b5b00e68d9f0a0”。

　　3、链接样式表

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

以下是引用片段：　　

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

　　*.css是单独保存的样式表文件，其中不能包含6c1d9d1c5e7690ed0ad94b24a12b6eb7标识符，并且只能以css为后缀。

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

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

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

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

　　·Tty:输出到电传打字机

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

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

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

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

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

　　4、联合使用样式表

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

以下是引用片段：　　

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

　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

　　需要注意的是:

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

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

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

以上がWebデザインにおけるCSSの使い方とその特徴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。