IoT におけるセンサーグラフィック Web サイトの外観を CSS で定義する

このシリーズの前回の記事では、モノのインターネットIoTに接続されたセンサーの状態グラフを作成する方法方法を説明します HTML で開発された Web ページをグラフィックスの構造として使用する。オブジェクトを使用して最小限に削減された Web ページ要素 <div>、その外観を直接定義するのではなく、代わりに、 スタイルシートへの外観情報 CSSこれについては、シリーズのこの部分で説明します。

モノのインターネット (IoT) に接続されたセンサーからのデータのグラフ CSS での外観の定義

私が提案するIoTに接続されたセンサーをグラフ化するソリューションでは、ドキュメントが使用されます。 CSS ドキュメントからロードされたもの HTML。コードの場合 HTML サーバー上のアプリケーションから生成されます。たとえば、 PHPの場合、Web ページから読み込むのではなく、Web ページを定義するコードの一部としてこれを含めるのが非常に簡単です。呼び出しを保存することで少し最適化できます。どちらのオプションを選択しても、最も便利な方法は次のとおりです。 コードを編集する CSS 別のドキュメントにまとめて、より快適に管理し、再利用できるようにする。この一連の記事のチュートリアルで開発された例では、次の名前が付けられています。 estilo.css.

同じやり方で、 複雑なプロジェクトを扱う場合は、異なるドキュメントで複数の個別のスタイルシートを使用することをお勧めします。これにより、毎回すべてをロードすることなく特定の機能を再利用できるようになり、対応する論理構造に従ってコードをさまざまなドキュメントに分散することでコードをより簡単に編集できるようになります。

スタイル CSS 彼らは、以前のバージョンの仕様との互換性を可能な限り尊重しようとしながら、同時に有効な、いくつかのタイプのアプローチから Web ページの動作と外観の極端な点をすべて記述しようとします。 これは、同じニーズを解決する可能なソリューションが多数あることを意味します。 利用可能なリソース (プロパティ) が多数あるだけでなく、 CSS）。この記事は教訓的なアプローチをとっており、新規ユーザーが混乱しないようにするためです。 CSS、プロパティのみと 最終目的に必要な構造、モノのインターネットに接続されたセンサーからのデータをグラフィカルに表現します。同時に、 ちょっとした紹介 CSS、カスケードスタイルシート。

CSSプロパティの書式設定

El 基本フォーマット これは、プロパティ名、コロン記号、プロパティ値、セミコロン記号で構成されます。 nombre:valor;

CSS 同じドキュメント内で異なる測定単位を使用できるようにします これには、構造 (要素に含まれる内容の測定値) に関連するパーセンテージ、ピクセルなどのデバイスに対する相対値、またはセンチメートルなどの絶対値が含まれます。単位は、次の略号に従って値の後に表示されます。

コード	ユニット
%	コンテナの割合
ch	数値ゼロの幅を基準にして
cm	センチメートル
em	コンテナの基本タイプに相対
ex	文字 x の高さに対する相対値
in	インチ
mm	ミリメートル
pc	パイカス (活版印刷測定)
pt	ポイント (活版印刷)
px	ピクセル
レム	ドキュメントの基本タイプに関連する
vh	目の高さの 1% に対して (モバイル画面)
vmax	ビューの最大寸法の 1% に対して (モバイル画面)
vmin	ビューの最小寸法の 1% に対する相対値 (モバイル画面)
vw	ビュー幅の 1% を基準として (モバイル画面)

これから実行しようとしているアプリケーションでは、少なくとも XNUMX つのスタイルユニットを考慮することが重要です。アイテムのコンテナのサイズに応じた測定値を取得するための %、画面の解像度に応じた測定値を取得するためのピクセル、および印刷レポートを作成するためのミリメートル (実際には絶対測定値) です。

いくつかがあります 複雑なプロパティ、またはコンポジット。複数の値 (色、サイズ、スタイルなど) に依存します。値を示すには、CSS で XNUMX つの可能性があります。適切な順序で、すべての値を記述します。 スペースで区切られた値、または複雑なプロパティと同等の単純なプロパティの合計を使用します。たとえば、オブジェクトの XNUMX つの余白すべてを XNUMX つのプロパティで指定できます。 margin またはプロパティで設定できます margin-top, margin-right, margin-bottom y margin-left。ちなみに、この順序 (時計回り) は、内側 (パディング) または外側のマージン、ボーダーなどの要素を「囲む」値の記述が続く順序です。

これまで説明してきたことを踏まえて、プロパティの例をいくつか見てみましょう。

<br />
margin:10px 20px 0 10px;<br />
width:500px;<br />
height:100%;<br />
color:#FF0099;

margin:10px 20px 0 10px;

width:500px;

height:100%;

color:#FF0099;

上記の例では 色は、赤、緑、青の成分の値をペアで表す 6 桁の XNUMX 進数のコードを使用して定義されます。。例のように、XNUMX つの数字が等しい場合は、次のように省略できます。 #F09 (ちなみに、これはいわゆる「Web セーフカラー」に相当します)。最終的な提案では、基準を統一して読みやすくするために、これらの略語の使用を避けます。次のような複雑なプロパティの値を省略することもできます。 margin この例では、すべての値または反対のペアが繰り返される場合です。テキストの保存と同様に、値がゼロの場合にプロパティを指定するときに単位を省略することもできます。その場合、単位は無関係です。

一部の値には、数値で表現できるだけでなく、名前が付いています。 これにより、コードが読みやすくなり、覚えやすくなります。たとえば、ターゲットの XNUMX 進数値コードの代わりに、 #FFFFFF (o #FFF）、書くことができます white 同じ結果になります。このように、黒という色は、 #000000 (o #000)、次のように置き換えることができます。 black.

さらに 値は特別なコード、名前によって表現されます。たとえば、サイドマージンがブラウザによって自動的に設定されることを示すには（通常は中央の機能に対応します）、特別な値が使用されます。 auto、どの値とも数値的に対応しません。

へ プロパティの一連の複合 (複合) 値を使用する特別な方法を表現します。 CSS 関数の構文と同様の構文で形式を選択できます。たとえば、色をその赤、緑、青の成分の XNUMX つの値として表現するには ( RGBモデル) と書かれます color: rgb(128, 255, 64);。この表現スタイルでは単位を使用することもできます。上の例では、色成分は 0 ～ 255 の XNUMX 進数値ですが、これを各色成分の合計に対するパーセンテージとして表す方が簡単な場合があります。その場合、次のように書くこともできます。 color: rgb(50%, 100%, 25%);.

CSSでの値の計算

の最新バージョンでは、 CSS することは可能です 値を計算するための単純な数学的演算。これを行うには、次を使用します calc 実行される操作は括弧内に表されます。単位、括弧、および sum ( などの単純な演算子を指定できます)+)、減算(-)、乗算 (*) と除算 (/）。式は次のタイプになります。 width:calc((90%-20px)/2));.

変数は数学的演算に使用できます。 CSS あるプロパティの計算で別のプロパティの値を参照する var。スタイルの実際のプロパティを参照せずに変数を使用できるようにするために、存在しないプロパティを引用することもできます。 CSS フォーマットを推奨します --nombre-variable (発明されたプロパティの名前の前に XNUMX つのハイフン)。このようにして、要素の高さをその幅の半分として定義するには、次の式を使用します。 CSS として height:calc(var(width)/2); 新しい変数「厚さ」(他のプロパティで使用できる) を定義するには、次のように記述します。 --grosor:4px; 後でそれを参照できるようにする margin-top:calc(var(--grosor)*4);

ブラウザ依存の CSS プロパティ

CSS コンソーシアムによって標準化された仕様です W3C (ワールドワイドウェブコンソーシアム）でもたくさんあります プロパティまたは動作スタイルは、仕様の一部になる前にブラウザに到達します。 バージョンの。

コードが CSS ブラウザの現在の機能で動作しますが、 新機能との互換性を失わないように、プレフィックスが使用されます。このプレフィックスは、レンダリングエンジン参照したい Web ブラウザー (スタイルが定義されているもの) を使用します。

プレフィックス -webkit に基づいたブラウザで動作します WebKitのとして Safari o クロム。接頭語 -moz に基づいてブラウザに使用されます。レンダリングエンジン de モジラ、現在ヤモリとして Firefoxのおよびその派生製品。参照するには EdgeHTML、レンダリングエンジンブラウザエッジ（Edge）マイクロソフト社（以前はトライデント)、プレフィックスが使用されます -ms。ブラウザの場合 Opera 彼が自分のものを使い始めてからは少し特別ですレンダリングエンジン、で参照されます -o、ただし現在は動作します WebKitの、次のように表されます -webkit.

ブラウザを参照するプロパティを使用するには、次のように名前を先頭に付けてハイフンで区切って記述します。 -o-border-radius:10px;、古いバージョンのブラウザでは丸い境界線 (丸い角) を設定するのに役立ちます。 Opera.

注釈

コードを明確にするために CSS コメントを使用すると読みやすくなりますが、サイズが大きくなるという欠点があります。コメントの構文 CSS 複数行コメントのようなものです C + + すでにご存じかと思いますが、 /* で終わる */のように C + +、複数行を占める場合があります。

セレクター

の定義 プロパティはドキュメント内のオブジェクトに割り当てられます HTML セレクターでグループ化する そしてそれらを中括弧で囲みます。セレクターは言語要素を参照できます HTML (ラベル)、のように div、クラス（で割り当てられます） class en HTML) 識別子 (割り当てられます) id en HTML) またはアスタリスク (「ユニバーサルセレクター」) で表されるすべて*）。次の例は、各タイプのセレクターを示しています。

<br />
* /* El asterisco es el selector universal */<br />
{<br />
	margin:2px 6px 4px 20px;<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>div /* div es una etiqueta HTML */<br />
{<br />
	width:500px;<br />
	height:200px;<br />
}</p><!-- Ezoic - wp_incontent_8 - incontent_8 --><div id="ezoic-pub-ad-placeholder-718" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_8 - incontent_8 --><!-- Ezoic - wp_incontent_8 - incontent_8 --><div id="ezoic-pub-ad-placeholder-121" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_8 - incontent_8 --><!-- Ezoic - wp_incontent_8 - incontent_8 --><div id="ezoic-pub-ad-placeholder-121" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_8 - incontent_8 -->
<p>.grafico /* «grafico» es el nombre de una clase que se usará en HTML con class=”grafico” */<br />
{<br />
	color:#A0B0C0;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>#superior /* «superior» es un identificador que se usará en HTML con id=”superior” */<br />
{<br />
	width:100%;<br />
	color:#CCCCCC;<br />
}

* /* El asterisco es el selector universal */

{

margin:2px 6px 4px 20px;

}

div /* div es una etiqueta HTML */

{

width:500px;

height:200px;

}

.grafico /* «grafico» es el nombre de una clase que se usará en HTML con class=”grafico” */

{

color:#A0B0C0;

}

#superior /* «superior» es un identificador que se usará en HTML con id=”superior” */

{

width:100%;

color:#CCCCCC;

}

のラベル HTML スタイル定義ではその名前とともに表現され、クラスは名前の前にピリオドを置くことでマークされます (.) とシャープ記号 (#) 識別子用。

～の偉大な力の一部 CSS に存在します プロパティを定義するときにセレクターをグループ化する可能性。セレクターをグループ化するにはいくつかの方法があります。それらをグループ化することで、 カンマで区切ることで、引用されたセレクターがそれぞれその特性を持っていることを表現します.

<br />
.consumo, .humedad, .temperatura<br />
{<br />
	color:#FF00AA;<br />
	width:100%;<br />
	height:100%;<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>.temperatura<br />
{<br />
	height:50%;<br />
}<!-- Ezoic - wp_incontent_11 - incontent_11 --><div id="ezoic-pub-ad-placeholder-124" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_11 - incontent_11 --><!-- Ezoic - wp_incontent_11 - incontent_11 --><div id="ezoic-pub-ad-placeholder-124" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_11 - incontent_11 --><!-- Ezoic - wp_incontent_11 - incontent_11 --><div id="ezoic-pub-ad-placeholder-721" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_11 - incontent_11 -->

.consumo, .humedad, .temperatura

{

color:#FF00AA;

width:100%;

height:100%;

}

.temperatura

{

height:50%;

}

前の例は、消費量、湿度、温度のクラスが色、幅、高さを共有していることを示しています。このコードには新しい概念も導入されています。 プロパティは再定義できます。その場合、最後に記述されたプロパティが優先されます。。このようにして、温度クラスの要素は最終的に、それらを含むオブジェクトの高さの 50% になります。

グループ化されたセレクターがカンマで区切られていない場合、プロパティに課される条件は累積的になります。つまり、要素が定義した外観や動作を取得するには、要素がすべてのセレクターを満たす必要があります。セレクターがタグを参照する場合 HTML 表示される順序は、包含レベルの降順である必要があります。最初は最高の階層レベル、最後は最下位の階層レベルです。

<br />
div.temperatura<br />
{<br />
	color:#FF00AA;<br />
	width:100%;<br />
	height:100%;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>.temperatura .consumo<br />
{<br />
	height:50%;<br />
}

div.temperatura

{

color:#FF00AA;

width:100%;

height:100%;

}

.temperatura .consumo

{

height:50%;

}

前の例では、要素が定義されています div これも温度クラスの要素であり、次のように温度クラスと消費クラスの両方を (両方同時に) 持つ要素です。 class="temperatura consumo"。要素 <div> コードの HTML とともに class="temperatura" 彼らは100％の最高値を持っているでしょう

テキストを定義する CSS プロパティ

テキストの外観に影響を与える 1 種類のプロパティを区別できます。(2) テキストが表示されるフォントを確立するプロパティ、(3) リテラル (テキストの内容) の外観を決定するプロパティ。 (XNUMX) 一般的なもの、つまり、テキストと他のコンポーネントの外観の両方に影響を与えるもの。一般に、最後のグループの説明として述べたことは、他の要素に適用される同じプロパティにも当てはまります。

タイポグラフィー (フォント)

font-family 要素に使用されるフォントの名前を示します。希望するフォントが存在しない場合に代替として使用されるフォントの単一の名前、または名前をカンマで区切って優先順にリストを記述することができます。同様に、次のような名前の汎用フォントを使用することもできます。 monospace, serif, sans-serif, cursive, fantasy。これらの汎用フォントのうち、(手元のデータの表示にとって) 最も重要なものは、その名前が示すように、システムで利用可能でブラウザによってプリセットされている固定間隔フォントを使用する最初のフォントです。二番目、 serif、利用可能なデフォルトのものが使用されますセリフ（終わりまたは優雅）。オークションなしでXNUMX番目を示された場合、 sans-serif。手描きの文字を真似して書く cursive (明らかに改善の余地がある呼び方) とシステムの装飾的なタイポグラフィー fantasy、XNUMXつのうち最後。

コードに関しては CSS スペースには区切り文字として特別な意味があり、フォントファミリの名前がスペースで区切られた複数の単語で構成されている場合は、混乱を避けるために引用符で囲まれて記述されます。

<br />
font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

Web ブラウザは、ローカルフォント (動作するシステムにインストールされているフォント) だけでなく、特別に読み込まれた他のフォントも使用でき、ローカルにインストールされているフォントと重複する場合もあります。フォントをロードするには、次を使用します @font-face その名前、その定義のダウンロード場所、および該当する場合はその形式の説明を示します。

<br />
@font-face<br />
{<br />
	font-family:”SircuitoExpandedLight”;<br />
	src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br />
}</p>
<p>@font-face<br />
{<br />
	font-family:”SircuitoRegularMedium”;<br />
	src:	url(‘tipos/Sircuito-Regular-Medium.eot’);<br />
	src:	url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br />
			url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br />
			url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br />
			url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br />
	-webkit-font-smoothing:antialiased;<br />
}

@font-face

{

font-family:“SircuitoExpandedLight”;

src: url(‘/EOT/Sircuito-Expanded-Light.eot’);

}

@font-face

{

font-family:“SircuitoRegularMedium”;

src: url(‘tipos/Sircuito-Regular-Medium.eot’);

src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),

url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),

url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),

url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);

-webkit-font-smoothing:antialiased;

}

前の例の XNUMX つの定義のうちの最初の定義では、文書の文字がロードされます。 Circuito-Expanded-Light.eot これはメイン (ルート) フォルダー内の EOT フォルダーにあり、ファミリー名として割り当てられます。回路拡張光。ところで、このフォントは好きですか？無料です、できます GranaBot イメージ用にデザインした Sircuito フォントを無料でダウンロードします.

例でわかるように、url プロパティは、ユニフォームリソースロケータを使用すると、ダウンロードしたフォントが含まれるドキュメントの場所を指定できます。スラッシュは、フォントへのパスからさまざまなフォルダーの名前を区切るために使用されます。呼び出し元のドキュメントが含まれるフォルダーから始まるか、ルートの場合はルートから始まります。 URL まずはバーから始めましょう。

XNUMX 番目の例では、同じ定義が複数のブラウザで機能するように、いくつかの代替ドキュメントを使用しています (それぞれが解釈可能な型をロードします)。

定義の最後の行にはプロパティが含まれています font-smoothing 文字を柔らかくするには（アンチエイリアス）。標準プロパティではないため、プレフィックスが使用されます -webkit.

font-size は、次のように文字のサイズを示すのに役立ちます。 font-size:12px;
font-weight フォントの太さを設定します。これは、通常の活版印刷の重みに従って数値 (通常は 100 から 100 までの 900 の倍数) で表現できます。または、より頻繁には名前を使用して表現できます。 normal ベースの厚さについては、 bold 太字で、 bolder 通常ブラックと呼ばれるバージョンの場合、 light 細かいもの（一般に光と呼ばれます）と lighter 最も薄いもの（薄いとも呼ばれます）。

フォントの通常バージョンの数値は 400 (単位なし)、ボールドバージョンの数値は 700 です。

デフォルトでは、他の値が指定されていない場合、フォントの外観は、次の値に対応するものになります。 normal または 400 なので、継承元のジェネリック要素またはコンテナーで変更されていない場合は、指定する必要はありません。 font-weight 勇気を持って normal.

font-stretch 対応するファミリで使用できる限り、文字の幅を示すために使用されます。プロパティが取り得る値は、狭いものから広いものの順に次のとおりです。 ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded。前のプロパティで使用したのと同じ基準を使用すると、デフォルトの幅は次のようになります。 normal また、定義されている階層よりも上位の階層で変更されない限り、明示的に指定する必要はありません。
とともに font-style テキストが、その外観に影響を与える斜めの文字または斜めの文字で描画されるか、特別な意味 (外来語など) を表す筆記体文字で描画されるか、または前の文字のどちらでもない丸文字で描画されるかを指定できます。または普通。値 oblique 最初の機能、つまり外観と価値を果たします。 italic 二番目。両者の見た目が似ている、もしくは同じであることが多いということは、使い方（意味）が混同されることもあるので注意が必要です。他の物件と同様に、 normal 以前の値を非アクティブ化するのに役立ちます。
text-decoration 下線を引く役割を果たします（値とともに） underline)、上線(値を含む) overline)、取り消し線 (値を使用) line-through) またはフラッシュ (値付き) blink) このプロパティが影響するテキスト。

タイポグラフィーの一連の側面を完了するには、私たちのアプリケーションにはあまり関係ありませんが、 font-variant、申請することができます小さな帽子 (小文字) をテキストに追加します。

テキスト

text-align テキストのブロックをどのように配置するかをブラウザに指示します。可能な配置はコードの左側 (デフォルトで考慮されます) です。 left、値を中心に置く center、正しく使用してください right そして両端を次のように両端揃えします justify.
line-height テキストの行間の区切りを設定します。この場合、パーセンテージを使用すると、100% の値はコンテナの測定値ではなくテキストの高さに対応します。テキストに対して最もよく使用される尺度は 120% に相当します。 100% の線は、ある線の下部が次の線の上部に接触していることを意味します。通常、タイポグラフィーのデザインにはある程度のスペースが含まれますが、行間にもう少し余白を残すのが一般的です。

行間の区切りを表現するために、テキストボックスの高さから行の高さを計算するための係数（単位のない値）を指定することもできます。
letter-spacing 単語の文字間のスペースの値であり、タイポグラフィでは次のように呼ばれます。字詰め o 追跡.

word-spacing 単語間のスペースの尺度を表します。
white-space テキスト内の空白の動作を設定します。値を使用する場合 normalはデフォルトで使用され、コード内のいくつかの空白スペースを結合します。 HTML Web ページ上のプレゼンテーション (ブラウザーによって表示される) の XNUMX つで、ブロック内にスペースがない場合は、空白を参照として改行します。

価値 nowrap また、繰り返される空白を XNUMX つに結合しますが、行がコンテナーに収まらない場合でも空白内のテキスト行を分割せず、必要に応じてスペースをオーバーフローさせ、必要に応じて外側に書き込みます。行を明示的に分割するには、ラベルを使用できます <br> de HTML.

を使用して pre 空白を一つにつなげて統一するわけでも、空白を基準に行を区切るわけでもありません。

pre-line 繰り返される空白を結合し、必要に応じて空白を参照として使用して改行します。

pre-wrap 繰り返しの空白を保持し、必要に応じて空白を参照として使用して改行します。

色

En CSS 色は次のように表現できます RGBカラーモデルまたはそれに応じて HSLカラーモデルどちらの場合も、透明度情報 (通常はと呼ばれる XNUMX 番目のチャネルの値) を含めることができます。アルファチャンネル o アルファ合成、これにより RGBA モデルと HSLA モデルが生まれます。

色をフォーマットで表現するには RGB XNUMX 進表記を使用すると、構文が使用されます #RRGGBBRR は赤色成分の値 (原則として XNUMX 桁の XNUMX 進数を使用)、GG は緑色成分の値、BB は青色成分の値です。すでに述べたように、各成分の XNUMX 桁が同じ値である場合、次のように表すことができます。 #RGB いわゆるウェブセーフなものに利用可能な色の数を制限する

最も古典的でよく使われるこの色表現方法に加えて、次のように表現することもできます。 rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) それをフォーマットで示すには RGB, HSL および透明度を示すそれぞれの形状 (アルファチャンネル)

単位接尾辞を追加するなどの別の要求がない限り、 RGBモデル 0 から 255 までの XNUMX 進数値を使用します。XNUMX つのコンポーネントの値は、アルファ成分は係数 (XNUMX から XNUMX までの XNUMX 進数) であり、その最初の値です。 HSLカラーモデル色相は、角度を表す 0 ～ 360 (単位なし) の範囲の XNUMX 進数値です。の彩度と明度の値は、 HSL モデル通常、それらはパーセンテージで表されます。

すでに述べたように、使用頻度はそれほど高くありませんが、色は次の形式の名前で示すことができます。 color:black; 代わりに color:#000000;。最初の形式は読みやすいですが、値の簡単な表に限定されており、で作成されたアプリケーションから数値を変更するのがより困難です。 JavaScriptを.

IoT に接続されたセンサーからのデータをグラフィカルに表現するための提案では、色に関連する XNUMX つのプロパティだけが必要になります。これらは、これから説明するテキストの名前を示すことと、それをサポートするコンポーネントの名前を示すことの両方の役割を果たします。

color 要素の色を示します HTML 他の色を個別に割り当てて明示的に変更しない限り、それに含まれる内容 (それを継承する) の色も同様です。
background-color 要素の背景色を定義するために使用されます HTML。色を値として示すだけでなく、 RGB o HSL 特別な値を使用できます transparent オブジェクトに背景色を付けず、オブジェクトの背後にあるものを見ることができるようにします。つまり、オブジェクトが描画されている要素を覆わないようにするためです。

opacity 要素とそのすべてのコンテンツの不透明度 (間接的に透明度) を設定できます (背景の透明度と混同しないでください)。それ自体が透明である他の要素に含まれる要素に透明度が割り当てられている場合、これは増加しますが、個別に機能することはありません。透明なオブジェクトに含まれるオブジェクトをさらに不透明にすることはできません。の値 opacity のような係数で表されます。 opacity:0.5; 50% の不透明度を示します。

Microsoft のブラウザの古いバージョンではこのプロパティは使用されませんでしたが、次のプロパティがありました。 filter (フィルター) 他の値の中でも、アルファをサポートできるもの ( アルファチャンネル) 不透明度のパーセンテージを割り当てることができます。 opacity 形式に従って：

CSS para dar opacidad en los antiguos navegadores web de Microsoft

CSS

<br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

1

filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

対策

En CSS、元素の測定 <div>、グラフィックスコンテナを構成するために選択したものは、次のように設定されます。 width (幅)と height （アルト）。

の内容の間で <div> そしてその周囲には、の値で決定される塗りつぶし領域があります。 padding。オブジェクトの周囲を囲むのはエッジであり、その測定値はプロパティで指定されます border。オブジェクトの外側を分離する <div> 他の周囲の物体の間には、その寸法が次のように決定される空間があります。 margin.

通常の状態では、物体が使用するスペースの測定 <div> 幅または高さにパディング (padding) プラス枠線 (border) プラスマージン (margin)。確立された関連する測定値が物体の有用な内部空間である場合 <div>、この構成は非常に実用的ですが、利用可能な合計測定値がわかっている場合は、 この行動は変えられますか、デフォルトで設定されているため、幅と高さの合計の測定値は次のようになります。 width (幅)と height (高さ) を加算するのではなく、そこからパディング、ボーダー、マージンの寸法を減算します。このモードを使用するには、 propiedad box-sizing 値 border-box (デフォルトは content-box)

次の図は、次の結果から得られる値をグラフで示しています。 width (幅)と height (高) を使用する場合 box-sizing:border-box; (合計) またはbox-sizing:content-box; （内部）

CSSボックスモデル（ボックスモデル）幅高さパディング境界マージン

測定値は、既に説明した単位で表される。複数の値で定義される特性の場合、異なる種類の平均で表される数値が混在する可能性があります。さらに、IoT でのセンサーグラフの実装でこれから行う使用に関連する特別な値がいくつかあります。具体的には、次の値を使用できます。 auto プロパティで margin 状況によってはオブジェクトを中央に配置するためのリソースとして使用されます。

<br />
.caja_chica<br />
{<br />
	box-sizing:border-box;<br />
	width:400px;<br />
	height:100px;<br />
	padding:5px 10px 15px 20px;<br />
	border:2px solid #000000;<br />
	margin:10px 10px 10px 10px;<br />
}</p>
<p>.caja_grande<br />
{<br />
	width:400px;<br />
	height:100px;<br />
	padding:5px 10px 15px 20px;<br />
	border:2px dashed #FF0000;<br />
	margin:10px 10px 10px 10px;<br />
}<!-- Ezoic - wp_incontent_39 - incontent_39 --><div id="ezoic-pub-ad-placeholder-749" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_39 - incontent_39 --><!-- Ezoic - wp_incontent_39 - incontent_39 --><div id="ezoic-pub-ad-placeholder-152" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_39 - incontent_39 --><!-- Ezoic - wp_incontent_39 - incontent_39 --><div id="ezoic-pub-ad-placeholder-152" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_39 - incontent_39 -->

.caja_chica

{

box-sizing:border-box;

width:400px;

height:100px;

padding:5px 10px 15px 20px;

border:2px solid #000000;

margin:10px 10px 10px 10px;

}

.caja_grande

{

width:400px;

height:100px;

padding:5px 10px 15px 20px;

border:2px dashed #FF0000;

margin:10px 10px 10px 10px;

}

上の例では、クラス「small_box」に対して、黒いストロークで描かれた 2 ピクセルの太さの境界線が定義されています (#000000) 連続 (solid）。「big_box」クラスでは、境界線に使用される線は破線です (dashed) と色は赤 (#FF0000）。これらの値を個別に表現するには、次のように使用できます。 border-width 厚さに関しては、 border-style 脳卒中と border-color 色のために。これらのエッジプロパティはさらに複合され、上で説明したように時計回りの方向に従って、上、右、下、左のフィーチャによって形成されます。

定義された XNUMX つのクラスの測定値は同じですが、値を使用すると最初のクラスの方が小さくなります。 border-box 財産のため box-sizing、パディング、境界線、マージンは、デフォルトのようにコンテンツの周囲ではなく、オブジェクトの内側に描画されます。「big_box」クラスでは指定されていないため、デフォルトで値が取得されます。 content-box これにより、パディング、ボーダー、マージンが次のサイズに増加します。 width y height.

上の例のクラスのマージン値は上下左右で 10 ピクセルであるため、単一の値として表すことができます。 margin:10px;。サードパーティが開発したコードを理解するためにこの代替手段を知ることは非常に興味深いですが、この実装提案では、コードを読みやすくするために、値を繰り返し示すことが提案されています。

<br />
.laconica /* Clase lacónica */<br />
{<br />
	background-color:#00F; /* Equivale a background-color:#0000FF; */<br />
	padding:10px 5px; /* Equivale a padding:10px 5px 10px 5px; */<br />
	margin:1%; /* Equivale a margin:1% 1%; que equivale a margin:1% 1% 1% 1%; */<br />
	border:1px solid #000;<br />
	/*	Lo anterior puede expresarse de forma menos compacta como:<br />
			border-width:1px;<br />
			border-style:solid;<br />
			border-color:#000;<br />
	*/<br />
}</p>
<p>.explicita<br />
{<br />
	background-color:#0000FF;<br />
	padding:10px 5px 10px 5px;<br />
	margin:1% 1% 1% 1%;<br />
	border-width:1px 1px 1px 1px;<br />
	border-style:solid solid solid solid;<br />
	border-color:#000000 #000000 #000000 #000000;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>.locuaz<br />
{<br />
	/* Color de fondo */<br />
	background-color:rgb(0,0,255);<br />
	/* Relleno, dimensiones */<br />
	padding-top:10px;<br />
	padding-right:5px;<br />
	padding-bottom:10px;<br />
	padding-left:5px;<br />
	/* Margen, dimensiones */<br />
	margin-top:1%;<br />
	margin-right:1%;<br />
	margin-bottom:1%;<br />
	margin-left:1%;<br />
	/* Borde, grosor */<br />
	border-top-width:1px;<br />
	border-right-width:1px;<br />
	border-bottom-width:1px;<br />
	border-left-width:1px;<br />
	/* Borde, estilo */<br />
	border-top-style:solid;<br />
	border-right-style:solid;<br />
	border-bottom-style:solid;<br />
	border-left-style:solid;<br />
	/* Borde, color */<br />
	border-top-color:#000000;<br />
	border-right-color:#000000;<br />
	border-bottom-color:#000000;<br />
	border-left-color:#000000;<br />
}<!-- Ezoic - wp_incontent_42 - incontent_42 --><div id="ezoic-pub-ad-placeholder-752" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_42 - incontent_42 --><!-- Ezoic - wp_incontent_42 - incontent_42 --><div id="ezoic-pub-ad-placeholder-155" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_42 - incontent_42 --><!-- Ezoic - wp_incontent_42 - incontent_42 --><div id="ezoic-pub-ad-placeholder-155" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_42 - incontent_42 -->

.laconica /* Clase lacónica */

{

background-color:#00F; /* Equivale a background-color:#0000FF; */

padding:10px 5px; /* Equivale a padding:10px 5px 10px 5px; */

margin:1%; /* Equivale a margin:1% 1%; que equivale a margin:1% 1% 1% 1%; */

border:1px solid #000;

/* Lo anterior puede expresarse de forma menos compacta como:

border-width:1px;

border-style:solid;

border-color:#000;

}

.explicita

{

background-color:#0000FF;

padding:10px 5px 10px 5px;

margin:1% 1% 1% 1%;

border-width:1px 1px 1px 1px;

border-style:solid solid solid solid;

border-color:#000000 #000000 #000000 #000000;

}

.locuaz

{

/* Color de fondo */

background-color:rgb(0,0,255);

/* Relleno, dimensiones */

padding-top:10px;

padding-right:5px;

padding-bottom:10px;

padding-left:5px;

/* Margen, dimensiones */

margin-top:1%;

margin-right:1%;

margin-bottom:1%;

margin-left:1%;

/* Borde, grosor */

border-top-width:1px;

border-right-width:1px;

border-bottom-width:1px;

border-left-width:1px;

/* Borde, estilo */

border-top-style:solid;

border-right-style:solid;

border-bottom-style:solid;

border-left-style:solid;

/* Borde, color */

border-top-color:#000000;

border-right-color:#000000;

border-bottom-color:#000000;

border-left-color:#000000;

}

前の例の XNUMX つのクラスは同じ結果を生成します。いわゆる「簡潔」の定義はよりコンパクトで、いわゆる「多弁」の定義よりも小さくなっています。これは、読みやすさを高めるためだけではなく、通常の形式です。プロパティの部分的で具体的な側面を変更し、継承によって他の値を再利用するために使用されます (値はコンテナーによって提供されるか、要素に割り当てられたクラスの XNUMX つによって提供されます)。この方法でプロパティを定義する余分なテキストによってサーバーにかかる負荷や、コードを読みやすくするためにコメントなどのサイズが増加し、トラフィックが増加するその他の状況が関連している場合は、次のことが可能です。それを（たとえば）から処理します PHP この言語からのコード生成戦略の一環として。

ボックスモデルの寸法は主に要素に影響します。 <div> ただし、プロパティを使用して他の要素にこの動作を強制することは可能です display と値 block。要素を行上のテキストのようにフローさせるには、次を使用します。 display:inline; 測定とフローの両方の動作を組み合わせることができます。 display:inline-block;

価値 none プロパティで display、使用されます display:none;、オブジェクトを非表示にすることもできます。これにより、オブジェクトを「オン」または「オフ」にすることができます。 JavaScriptを.

要素の寸法が指定されていない場合は、そのコンテンツを適合させるために必要なあらゆる寸法が取られます (実際には、寸法を確立する必要なくコンテンツが適合します)。ただし、寸法が示されている場合、含まれるオブジェクトが適合しない場合があります。このような場合、寸法は考慮されず、すべてのコンテンツが表示できるように寸法が大きくなります。

別の固定寸法に含まれる要素がサイズを超える場合にトリミングされるように、プロパティが使用されます。 overflow 勇気を持って hidden。値と一緒に scrollの場合と同様に、コンテナからはみ出したオブジェクトも切り取られます。 hidden ただし、移動するとスクロールバーが表示されます。値 auto コンテンツのサイズに基づいて、必要な場合にのみスクロールバーを表示します。

また、コンテンツが必要としない場合でもコンテナーがそのスペースを占有するように、コンテンツが要求したときにコンテナーのサイズの増加を制限することなく、最小サイズを設定することもできます。このタスクを担当するプロパティは次のとおりです。 min-width アチョと min-height 背の高い人のために。逆の意味では、 max-width 最大幅を設定し、 max-height それを打ち消す最大の高さ width すでに height.

Web ページ上の要素の流れ

要素で定義した長方形（ブロック） <div>、デフォルトでは、それらは上下に配置されます。この動作を変更するには、プロパティを使用できます float、 left o right 値として、それぞれ左から右または右から左に流れるようにします。逆に、あるオブジェクトが別のオブジェクトの右または左に「フローティング」するのを防ぐには、プロパティを使用できます。 clear 値で left, right o both、左から右、右から左、またはその両方のフローをオーバーライドします。

CSSフロート CSSクリア

他の状況で起こることとは逆に、この流れが生み出したのは、 float コンテナの寸法は自動的に変更されないため、プロパティに含めると便利です overflow:auto; オブジェクトがコンテナの位置によってオーバーフローしたときに、コンテナのサイズ (高さ) を強制的に変更します。 float.

要素のコンテンツのフローを構成するもう XNUMX つの方法は、プロパティを使用して要素を列に分割することです。 column-count (現時点ではこれを伴う必要があります -webkit-column-count と -moz-column-count) 列のサイズは次のように指定できます (実際に推奨されます)。 column-width (-webkit-column-width -moz-column-width) と列間の分離 column-gap (-webkit-column-gap -moz-column-gap)

CSS列

ブロックが分割されず、その内容が複数の列に分散されるように、次のようにすることができます。 display:inline-block; それは確かに暗示していますが。カラムの一部を未使用のままにしておきます。

ポジショニング

Web ページ上の要素の位置を確立するために、CSS は要素ごとに異なるいくつかの配置モードを使用します。つまり、同じ Web サイト上で異なる配置基準を混在させることができます。

position:static; これはデフォルトの配置です (以前に変更されていない場合は、指定する必要はありません)。このタイプの配置は、ページの「自然な」フローに従います。左から始まり、要素が XNUMX つずつ増えていきます。右と上から下にスペースがあります。位置を確立するために水平座標や垂直座標は使用せず、オブジェクトの順序に対応する位置に従います。
position:fixed; ブラウザウィンドウ内の固定位置にオブジェクト (メニューなど) を配置するために使用され、要素の位置は水平方向に指定されます。 left o right それぞれ左または右の分離を決定し、 top o bottom ブラウザウィンドウ (ビューポート) の端の上または下で分離します。

この配置や他のタイプの配置を使用すると、オブジェクトを重ねることができます。最初に描画されるオブジェクト (コードの前半で定義) HTML) は、後で描画されるもの (コードの後半に含まれるもの) でカバーできます。 HTML）。通常の順序を変更するには、プロパティを使用できます z-index、で最も高い値を持つオブジェクト z-index 価値の低いものをカバーします。
position:relative; プロパティで示される「通常の」位置から要素を移動します。 left o right 水平方向と top o bottom 垂直に。

position:absolute; 要素を、それを含むオブジェクトに対して固定位置に配置します。その位置は、前の場合と同様に次のように表現されます。 left,right, top y bottom

このタイプの位置決めの名前は、最初は混乱を招きます。その位置は、プロパティを使用するオブジェクトよりも階層的に上位のオブジェクトに対して確立されるためです。これが絶対的なものであるかどうかについては議論の余地があります。

オブジェクトを含む要素は次のことを覚えておくことも重要です。 <div> 最初の階層レベルで使用するのは <body>したがって、 <div> あなたは何を使うのですか position:absolute; 他のものに含まれていない場合、その位置は Web ページに対して「絶対」になります。

特定のメディアと特性のプロパティ (メディアクエリ)

CSS を使用すると、使用するデバイスのタイプ (画面やプリンターなど)、その寸法、方向 (縦または横)、または解像度に応じて、さまざまなメディアまたはサポートの異なる外観を同じスタイルシートで定義できます。これにより、同じ Web ページをコンテキストに応じて最も適切な方法で表示できるようになります。

メディアを参照するには、次を使用します。 @media フォントについてすでに説明したのと同様の方法で、 @font-face、中括弧 ({ y }) さまざまな要素の定義: ラベル HTML、クラス、識別子...

で利用できるメディアの種類 CSS3 音： all、任意のメディア (すべて) を指します。 screen あらゆるタイプの画面 (古いバージョンの CSS 彼らはテレビとコンピュータのモニターを区別していました） print プリンター出力用と speech 音声合成装置で情報を解釈するオーディオ Web リーダー向け。

<br />
@media screen<br />
{<br />
	.texto<br />
	{<br />
		color:#FFFFFF;<br />
		background-color:#000000;<br />
	}<br />
}</p>
<p>@media print<br />
{<br />
	.texto<br />
	{<br />
		color:#000000;<br />
		background-color:#FFFFFF;<br />
	}<br />
}

@media screen

{

.texto

{

color:#FFFFFF;

background-color:#000000;

}

@media print

{

.texto

{

color:#000000;

background-color:#FFFFFF;

}

上の例では、テキストクラスの要素は、画面上では黒の背景と白のテキストで表示されますが、印刷では白の背景と黒のテキストで表示されます。

メディアに条件を課して、利用可能な解像度やビューポート比などに基づいて、さまざまなプロパティのセットを定義できます。これらの条件と手段自体は論理演算で構成できます and, not y only それぞれ、複数の事項に従うこと、従わないこと、または従う場合にのみ要求すること。

利用可能な条件の中で、特に興味深いものを見つけました max-width (最大ウィンドウ幅)、 max-height (ウィンドウの最大高さ)、 min-width (最小ウィンドウ幅)、 min-height (ウィンドウの最小高さ)、 orientation (方向。 landscape、風景、または portrait、垂直）、 max-resolution (最大解像度は dpi、インチあたりのドット数、またはインチ dpcm、XNUMX センチメートルあたりのポイント)、および min-resolution (最小解像度、また dpi o dpcm).

<br />
@media all<br />
{<br />
	.bloque_principal<br />
	{<br />
		background-color:#CCCCCC;<br />
	}<br />
}</p>
<p>@media screen and (min-width:320px)<br />
{<br />
	.bloque_principal<br />
	{<br />
		width:300px;<br />
		margin-left:auto;<br />
		margin-rigth:auto;<br />
	}<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media screen and (min-width:640px)<br />
{<br />
	.bloque_principal<br />
	{<br />
		width:620px;<br />
	}<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@media print<br />
{<br />
	.bloque_principal<br />
	{<br />
		background-color:#FFFFFF;<br />
	}<br />
}

@media all

{

.bloque_principal

{

background-color:#CCCCCC;

}

@media screen and (min-width:320px)

{

.bloque_principal

{

width:300px;

margin-left:auto;

margin-rigth:auto;

}

@media screen and (min-width:640px)

{

.bloque_principal

{

width:620px;

}

@media print

{

.bloque_principal

{

background-color:#FFFFFF;

}

前の例では、すべてのメディアで main_block クラスの要素の背景色が #CCCCCC になるように背景色を定義することから始めます。画面に表示され、ウィンドウの幅が少なくとも 320 ピクセルである場合、左右のマージンは自動的に設定され (ブロックの中央に配置され)、要素の幅は 300 ピクセルになります。画面解像度が 640 ピクセルの場合、ブロック幅は 620 ピクセルになります。 XNUMX 番目のメディア定義にはマージン情報が含まれておらず、XNUMX 番目の条件を満たすデバイスは XNUMX 番目の条件も満たすため、水平マージンは引き続き自動になります。

最後に、この例では背景色が変更され、印刷出力では白になります。

さまざまなメディアのスタイルを定義する通常の方法は、一般的なスタイル (通常は色とフォント) から始めて、次にスマートフォンやタブレットの最も制限されたジオメトリ (ピクセル数が最も低いデバイスの寸法) を順に定義することです。垂直に使用するか水平に使用するかを知ることが重要になります。 orientation そして確かにその解決策も min-resolution。次に、より大きな画面用のさまざまなサイズが示され、通常は印刷と音声メディアで終わりますが、IoT グラフィックスの例では省略されています。

使用 @media 寸法、解像度、向きなどの条件を課すことで、デザイナーはさまざまなスタイルで各デバイスに最も適した単一の Web ページを作成できます。この動作は通常、レスポンシブデザインと呼ばれます。非常に自由な翻訳で、適応可能なデザイン。

SVGグラフィックコンテナ用のCSS

これまでの説明で、スタイルを定義できるようになりました。 SVGグラフィックHTMLコンテナ IoT に接続されているセンサーの状態を表すために使用します。次のコードには、他のケースで再利用できるように、一連の記事の提案で使用されているグラフよりも多くのグラフに対応する列の分布がコメント付きで含まれている提案が示されています。

<br />
@font-face /* Descripción del tipo de letra ancho */<br />
{<br />
  font-family:”SircuitoExpandedLight”;/* Nombre de la tipografía */<br />
  /* Documentos con la tipografía en los formatos disponibles */<br />
  src:  url(‘tipos/Sircuito-Expanded-Light.eot’);<br />
  src:  url(‘tipos/Sircuito-Expanded-Light.eot?iefix’) format(‘eot’),<br />
        url(‘tipos/Sircuito-Expanded-Light.woff’) format(‘woff’),<br />
        url(‘tipos/Sircuito-Expanded-Light.ttf’) format(‘truetype’),<br />
        url(‘tipos/Sircuito-Expanded-Light.svg#webfont’) format(‘svg’);<br />
  /* Forzar alisado de la tipografía (Normalmente por defecto) */<br />
  -webkit-font-smoothing:antialiased;<br />
}</p>
<p>@font-face /* Descripción del tipo de letra normal */<br />
{<br />
  font-family:”SircuitoRegularLight”; /* Nombre de la tipografía */<br />
  /* Documentos con la tipografía en los formatos disponibles */<br />
  src:  url(‘tipos/Sircuito-Regular-Light.eot’);<br />
  src:  url(‘tipos/Sircuito-Regular-Light.eot?iefix’) format(‘eot’),<br />
        url(‘tipos/Sircuito-Regular-Light.woff’) format(‘woff’),<br />
        url(‘tipos/Sircuito-Regular-Light.ttf’) format(‘truetype’),<br />
        url(‘tipos/Sircuito-Regular-Light.svg#webfont’) format(‘svg’);<br />
  /* Forzar alisado de la tipografía (Normalmente por defecto) */<br />
  -webkit-font-smoothing:antialiased;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@font-face /* Descripción del tipo de letra comprimido */<br />
{<br />
  font-family:”SircuitoCondensedLight”; /* Nombre de la tipografía */<br />
  /* Documentos con la tipografía en los formatos disponibles */<br />
  src:  url(‘tipos/Sircuito-Condensed-Light.eot’);<br />
  src:  url(‘tipos/Sircuito-Condensed-Light.eot?iefix’) format(‘eot’),<br />
        url(‘tipos/Sircuito-Condensed-Light.woff’) format(‘woff’),<br />
        url(‘tipos/Sircuito-Condensed-Light.ttf’) format(‘truetype’),<br />
        url(‘tipos/Sircuito-Condensed-Light.svg#webfont’) format(‘svg’);<br />
  /* Forzar alisado de la tipografía (Normalmente por defecto) */<br />
  -webkit-font-smoothing:antialiased;<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@font-face /* Descripción del tipo de letra normal de grosor normal */<br />
{<br />
  font-family:”SircuitoRegularMedium”; /* Nombre de la tipografía */<br />
  /* Documentos con la tipografía en los formatos disponibles */<br />
  src:  url(‘tipos/Sircuito-Regular-Medium.eot’);<br />
  src:  url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br />
        url(‘tipos/Sircuito-Regular-Medium.woff’) format(‘woff’),<br />
        url(‘tipos/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br />
        url(‘tipos/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br />
  /* Forzar alisado de la tipografía (Normalmente por defecto) */<br />
  -webkit-font-smoothing:antialiased;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media all<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoCondensedLight”;<br />
    margin:0px;<br />
    column-count:1;<br />
    -webkit-column-count:1; /* Viejos Chrome, Opera y Safari */<br />
    -moz-column-count:1; /* Viejos Firefox */<br />
    column-gap:8px;<br />
    -webkit-column-gap:8px;<br />
    -moz-column-gap:8px;<br />
    background-color:#FFFFFF;<br />
  }</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  .bloque_sensor, .bloque_titulo, .bloque_descripcion, .bloque_fecha, .bloque_grafico<br />
  {<br />
    display:inline-block;<br />
    box-sizing:border-box;<br />
    width:100%;<br />
    color:#205587;<br />
  }</p>
<p>  .bloque_sensor<br />
  {<br />
    min-width:320px;<br />
    height:100%;<br />
    background-color:#EDEDED;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  .bloque_titulo<br />
  {<br />
    padding:16px 16px 0px 20px;<br />
    font-size:25px;<br />
  }</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>  .bloque_descripcion<br />
  {<br />
    padding:2px 16px 0px 20px;<br />
    font-size:15px;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  .bloque_fecha<br />
  {<br />
    padding:2px 16px 8px 20px;<br />
    font-size:17px;<br />
  }</p>
<p>  .bloque_grafico<br />
  {<br />
    height:200px;<br />
    padding:4px 20px 20px 20px;<br />
  }</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  .grafico<br />
  {<br />
    background-color:#A8C3EA;<br />
  }</p>
<p>}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:360px)<br />
{</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>  body<br />
  {<br />
    margin:8px 8px 0px 8px;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  .bloque_sensor<br />
  {<br />
    margin:0px 0px 8px 0px;<br />
    background-color:#E9E9E9;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:460px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoRegularLight”;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@media (min-width:530px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoExpandedLight”;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:690px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoCondensedLight”;<br />
    column-count:2;<br />
    -webkit-column-count:2; /* Viejos Chrome, Opera y Safari */<br />
    -moz-column-count:2; /* Viejos Firefox */<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@media (min-width:870px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoRegularLight”;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:1010px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoExpandedLight”;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>/*<br />
@media (min-width:1020px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoCondensedLight”;<br />
    column-count:3;<br />
    -webkit-column-count:3;<br />
    -moz-column-count:3;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:1280px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoRegularLight”;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@media (min-width:1570px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoExpandedLight”;<br />
  }</p>
<p>}<br />
*/</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:1610px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoCondensedLight”;<br />
    column-count:4;<br />
    -webkit-column-count:4; /* Viejos Chrome, Opera y Safari */<br />
    -moz-column-count:4; /* Viejos Firefox */<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>@media (min-width:1710px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoRegularLight”;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:2010px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoExpandedLight”;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>/*<br />
@media (min-width:2200px)<br />
{</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  body<br />
  {<br />
    font-family:”SircuitoRegularLight”;<br />
    column-count:5;<br />
    -webkit-column-count:5;<br />
    -moz-column-count:5;<br />
  }</p>
<p>}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>@media (min-width:2520px)<br />
{</p>
<p>  body<br />
  {<br />
    font-family:”SircuitoExpandedLight”;<br />
  }</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>}<br />
*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

@font-face /* Descripción del tipo de letra ancho */

{

font-family:“SircuitoExpandedLight”;/* Nombre de la tipografía */

/* Documentos con la tipografía en los formatos disponibles */

src: url(‘tipos/Sircuito-Expanded-Light.eot’);

src: url(‘tipos/Sircuito-Expanded-Light.eot?iefix’) format(‘eot’),

url(‘tipos/Sircuito-Expanded-Light.woff’) format(‘woff’),

url(‘tipos/Sircuito-Expanded-Light.ttf’) format(‘truetype’),

url(‘tipos/Sircuito-Expanded-Light.svg#webfont’) format(‘svg’);

/* Forzar alisado de la tipografía (Normalmente por defecto) */

-webkit-font-smoothing:antialiased;

}

@font-face /* Descripción del tipo de letra normal */

{

font-family:“SircuitoRegularLight”; /* Nombre de la tipografía */

/* Documentos con la tipografía en los formatos disponibles */

src: url(‘tipos/Sircuito-Regular-Light.eot’);

src: url(‘tipos/Sircuito-Regular-Light.eot?iefix’) format(‘eot’),

url(‘tipos/Sircuito-Regular-Light.woff’) format(‘woff’),

url(‘tipos/Sircuito-Regular-Light.ttf’) format(‘truetype’),

url(‘tipos/Sircuito-Regular-Light.svg#webfont’) format(‘svg’);

/* Forzar alisado de la tipografía (Normalmente por defecto) */

-webkit-font-smoothing:antialiased;

}

@font-face /* Descripción del tipo de letra comprimido */

{

font-family:“SircuitoCondensedLight”; /* Nombre de la tipografía */

/* Documentos con la tipografía en los formatos disponibles */

src: url(‘tipos/Sircuito-Condensed-Light.eot’);

src: url(‘tipos/Sircuito-Condensed-Light.eot?iefix’) format(‘eot’),

url(‘tipos/Sircuito-Condensed-Light.woff’) format(‘woff’),

url(‘tipos/Sircuito-Condensed-Light.ttf’) format(‘truetype’),

url(‘tipos/Sircuito-Condensed-Light.svg#webfont’) format(‘svg’);

/* Forzar alisado de la tipografía (Normalmente por defecto) */

-webkit-font-smoothing:antialiased;

}

@font-face /* Descripción del tipo de letra normal de grosor normal */

{

font-family:“SircuitoRegularMedium”; /* Nombre de la tipografía */

/* Documentos con la tipografía en los formatos disponibles */

src: url(‘tipos/Sircuito-Regular-Medium.eot’);

src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),

url(‘tipos/Sircuito-Regular-Medium.woff’) format(‘woff’),

url(‘tipos/Sircuito-Regular-Medium.ttf’) format(‘truetype’),

url(‘tipos/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);

/* Forzar alisado de la tipografía (Normalmente por defecto) */

-webkit-font-smoothing:antialiased;

}

@media all

{

body

{

font-family:“SircuitoCondensedLight”;

margin:0px;

column-count:1;

-webkit-column-count:1; /* Viejos Chrome, Opera y Safari */

-moz-column-count:1; /* Viejos Firefox */

column-gap:8px;

-webkit-column-gap:8px;

-moz-column-gap:8px;

background-color:#FFFFFF;

}

.bloque_sensor, .bloque_titulo, .bloque_descripcion, .bloque_fecha, .bloque_grafico

{

display:inline-block;

box-sizing:border-box;

width:100%;

color:#205587;

}

.bloque_sensor

{

min-width:320px;

height:100%;

background-color:#EDEDED;

}

.bloque_titulo

{

padding:16px 16px 0px 20px;

font-size:25px;

}

.bloque_descripcion

{

padding:2px 16px 0px 20px;

font-size:15px;

}

.bloque_fecha

{

padding:2px 16px 8px 20px;

font-size:17px;

}

.bloque_grafico

{

height:200px;

padding:4px 20px 20px 20px;

}

.grafico

{

background-color:#A8C3EA;

}

@media (min-width:360px)

{

body

{

margin:8px 8px 0px 8px;

}

.bloque_sensor

{

margin:0px 0px 8px 0px;

background-color:#E9E9E9;

}

@media (min-width:460px)

{

body

{

font-family:“SircuitoRegularLight”;

}

@media (min-width:530px)

{

body

{

font-family:“SircuitoExpandedLight”;

}

@media (min-width:690px)

{

body

{

font-family:“SircuitoCondensedLight”;

column-count:2;

-webkit-column-count:2; /* Viejos Chrome, Opera y Safari */

-moz-column-count:2; /* Viejos Firefox */

}

@media (min-width:870px)

{

body

{

font-family:“SircuitoRegularLight”;

}

@media (min-width:1010px)

{

body

{

font-family:“SircuitoExpandedLight”;

}

@media (min-width:1020px)

{

body

{

font-family:”SircuitoCondensedLight”;

column-count:3;

-webkit-column-count:3;

-moz-column-count:3;

}

@media (min-width:1280px)

{

body

{

font-family:”SircuitoRegularLight”;

}

@media (min-width:1570px)

{

body

{

font-family:”SircuitoExpandedLight”;

}

@media (min-width:1610px)

{

body

{

font-family:“SircuitoCondensedLight”;

column-count:4;

-webkit-column-count:4; /* Viejos Chrome, Opera y Safari */

-moz-column-count:4; /* Viejos Firefox */

}

@media (min-width:1710px)

{

body

{

font-family:“SircuitoRegularLight”;

}

@media (min-width:2010px)

{

body

{

font-family:“SircuitoExpandedLight”;

}

@media (min-width:2200px)

{

body

{

font-family:”SircuitoRegularLight”;

column-count:5;

-webkit-column-count:5;

-moz-column-count:5;

}

@media (min-width:2520px)

{

body

{

font-family:”SircuitoExpandedLight”;

}

以下に、これらのスタイルがどのようになるかを示します。 SVG グラフィックス用に提案されたコンテナーからの HTML コード前回の記事から。

このシリーズの次の記事で説明します SVGで絵を描く方法 モノのインターネット (IoT) に接続されたセンサーのステータスのデータグラフ.

IoT におけるセンサーグラフィックス Web の外観を CSS で定義する

IoT におけるセンサーグラフィックス Web の外観を CSS で定義する

CSSプロパティの書式設定

CSSでの値の計算

ブラウザ依存の CSS プロパティ

注釈

セレクター

テキストを定義する CSS プロパティ

タイポグラフィー (フォント)

テキスト

色

対策

Web ページ上の要素の流れ

ポジショニング

特定のメディアと特性のプロパティ (メディアクエリ)

SVGグラフィックコンテナ用のCSS

コメントを投稿返信をキャンセル

見逃したかもしれません

IoT におけるセンサー グラフィックス Web の外観を CSS で定義する

CSSプロパティの書式設定

CSSでの値の計算

ブラウザ依存の CSS プロパティ

注釈

セレクター

テキストを定義する CSS プロパティ

タイポグラフィー (フォント)

テキスト

色

対策

Web ページ上の要素の流れ

ポジショニング

特定のメディアと特性のプロパティ (メディア クエリ)

SVGグラフィックコンテナ用のCSS

SVG を使用して、モノのインターネット (IoT) に接続されたセンサーからのデータ グラフを描画します

BH1750。 I2Cバスを備えた環境光センサー。

関連記事

コメントを投稿 返信をキャンセル

見逃したかもしれません

IoT におけるセンサーグラフィックス Web の外観を CSS で定義する

特定のメディアと特性のプロパティ (メディアクエリ)

SVG を使用して、モノのインターネット (IoT) に接続されたセンサーからのデータグラフを描画します

コメントを投稿返信をキャンセル