CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
一、基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1、颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
2、定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3、群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
4、派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
5、id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
CSS レイアウトと従来のテーブル レイアウトの最大の違いは、元の配置ではテーブルが使用され、テーブルの間隔またはカラーレスを使用してテキスト レイアウト セクションの間隔を制御することです。透明な GIF 画像も含まれますが、現在はレイヤー (div) を使用して、マージン、パディング、境界線、およびレイヤーのその他の属性を通じてセクションの間隔を制御します。
1. DIV を定義します
一般的な定義 div の例を分析します:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px Solid;
BORDER-RIGHT : # CCC 2px ソリッド;
ボーダー下: #CCC 2px ソリッド;
ボーダー左: #CCC 2px ソリッド;
背景: url(images/bg_poem.jpg) #FEFEFE リピートなし右下;
カラー: #666; TEXT-ALIGN: center;
LINE-Height: 150%; WIDTH:60%; }
説明は次のとおりです:
レイヤーの名前は「sample」です。このスタイルは、ページ上で
2. CSS2 ボックス モデル
1996 年の CSS1 の発表以来、W3C 組織は、Web ページ上のすべてのオブジェクトをボックスに配置することを推奨しています。これらのオブジェクトの例には、段落が含まれます。 、リスト、タイトル、画像、レイヤー
3. 補助画像はすべて背景付きで処理する必要があります
XHTML+CSS レイアウトを使用するのは、最初は慣れない技術であると言うべきです。従来のテーブル レイアウト、つまり、すべての補助画像はすべて背景を使用して行われます。次のようなもの:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom;
をコンテンツに直接挿入することもできますが、これはお勧めできません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべて、
要素を使用してページに直接挿入できます。その他の画像はロゴに似ています。タイトル画像とリストのプレフィックスは、背景または他の CSS メソッドを使用して表示する必要があります。
これには 2 つの理由があります:
パフォーマンスを構造から完全に分離し、CSS を使用してすべての外観とパフォーマンスを制御し、改訂を容易にします。
ページをより使いやすく、フレンドリーにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。
3. 最初の CSS レイアウトの例
次のステップは、実際にレイアウトをデザインすることです。従来の方法と同様に、まず頭の中に大まかなアイデアがあり、それを Photoshop を使用して描きます。 Web 標準は構造とコンテンツに重点を置いているため、Web 標準に関連するほとんどの Web サイトは非常にシンプルであることがわかります。実際、Web ページのレイアウトは自由にデザインできます。従来のテーブルメソッドを使用して実装することもできます。テクノロジーには成熟の過程があります。DIV を TABLE と同じツールとして考えてください。使い方はあなたの想像力次第です。
注: 実際のアプリケーションでは、背景色の定義など、いくつかの場所では DIV はテーブルほど便利ではありません。しかし、何事にも得と損があり、選択はあなたの価値判断によって決まります。さて、早速始めましょう:
1. レイアウトを決定します
w3cn の初期設計スケッチは次のとおりです:
用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。
2、定义body样式
先定义整个页面的body的样式,代码如下：
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。
3、定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。
这时候整个页面的代码是：
4、100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法。
自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：
Body
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }
#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
这个例子的页面主要代码如下：
#menu と #content がページの右側「FLOAT: right;」にフローティングし、#sidebar が #menu レイヤーの左側「FLOAT: left;」にフローティングしていることにも注目してください。はフローティング方式の位置決めであり、絶対位置決めを使用してこの効果を実現できます。
この方法のもう 1 つの問題は、#sidebar の背景を 100% 正確にできないことです。一般的な解決策は、ボディの背景色で塗りつぶすことです。 (Mozilla などのブラウザでは #mainbox の背景色が無効のため、#mainbox の背景色は使用できません。)
4. CSS2 ボックスモデルの 3D 図
CSS2 のボックスモデルは、私たちの
元の画像: hicksdesign
IE ブラウザーと Mozilla ブラウザーではボックス モデルの解釈が一貫していないため、位置決めに問題が生じることに注意してください。
IE は 2 つの div 間の距離を計算します。距離が の場合、1px 境界線はカウントされますが、Mozilla はカウントしません。div の幅を設定した後、パディングに値を追加すると、IE はこの値を幅から減算しますが、Mozilla はその値を幅に加算します。この値について。5. w3c 技術アーキテクチャの紹介
原文: http://www.w3.org/Consortium/technology
原著者: w3c
翻訳: Ahong
凡例の説明
W3C 技術アーキテクチャ図 2 層モデルが示されています。World Wide Web アーキテクチャ (「One Web」というラベルが付いています) は、インターネット (内部) アーキテクチャ上に構築されています。図のリッチ Web レイヤーは、W3C の関心領域と開発中のテクノロジを示しています。
Web アーキテクチャは一連のレイヤーとして描かれており、各レイヤーは他のレイヤーの上に構築されます。下から上に:
URI/IRI、HTTP Web アーキテクチャ原則 XML Infosets、RDF(S) グラフ XML、名前空間、スキーマ、XQuery/XPath、XSLT、DOM、XML Base、XPointer、RDF/XML、SPARQL
最上位には、Web アプリケーション、モバイル、音声、Web サービス、セマンティック Web、およびプライバシーの主要な W3C アクティビティ グループに対応する 6 つのボックスが含まれています。
[インタラクション] ボックスには、XHTML、SVG、CDF、SMIL、XForms、CSS、および WCID がリストされます。 [モバイル] ボックスには、XHTML Basic、Mobile SVG、SMIL Mobile、XForms Basic、CSS Mobile、MWI BP がリストされます。 「Voice」ボックスには、VoiceXML、SRGS、SSML、CCXML、および EMMA がリストされます。「Web サービス」ボックスには、SOAP、XOP、WSDL、WS-CDL、および WS-A がリストされます。「Semantic Web」ボックスには、OWL、SKOS、および RIF がリストされます。 [プライバシー] ボックスには、P3P、APPEL、XML 暗号化、XML 署名、および XKMS がリストされています
オレンジ色のバーは、Web アクセシビリティ、国際化、モバイル アクセス、デバイスの独立性、および品質保証の領域を接続します。
この図例は、World Wide Web の基本フレームワークと W3C の取り組みの焦点を示しています。
URI、HTTP、XML、RDF の基盤は、作業の 5 つの側面をサポートします。 Web アクセシビリティ、国際化、デバイスの独立性、品質管理などのトピックが W3C テクノロジーに統合されています。
W3C は、World Wide Web を元の設計 (基本的な HTML、URI、HTTP) から将来必要となるモデルに変換するために取り組んでいます。 W3C のテクノロジーは、将来の World Wide Web が情報世界における安定性、拡張性、適応性の高い基本フレームワークとなるのに役立ちます。
6. CSS 互換性ポイントの分析 IE と FF
CSS 互換性ポイント:
DOCTYPE は CSS 処理に影響します
FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は中央に配置されませんwork
FF: body text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります
FF: パディングを設定した後、div は高さと幅を増やしますが、 IE ではサポートされないため、使用する必要があります! important 追加の高さと幅を設定します
FF: ! important はサポートされていますが、IE は無視します。FF のスタイルを設定するには ! important を使用できます
div の垂直方向のセンタリングの問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、ラップせずにコンテンツを制御する必要があることです
cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ表示できます
FF: リンクに境界線と背景色を追加するには、改行がないように、display: block と float: left を設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示のズレを避けるためです。高さが設定されていない場合は、メニューバーにスペースを挿入することができます。 XHTML+CSS アーキテクチャを使用することには多くの利点がありますが、未熟な使用法によるものであるか、不明確な考え方によるものであるかにかかわらず、いくつかの問題があることも事実です。皆さんが探し回らないように、私が遭遇した問題のいくつかを以下に書き留めておきます。 ^
1. mozilla Firefox と IE の BOX モデルの説明 不一致により 2px の違いが生じます。 解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序に注意してください。 Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザでは認識できるそうです。実際、IE では次のように解釈されます:
div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;
2、IE5 および IE6 IE5 では、BOX の解釈に一貫性がありません。 div{width:300px;margin:0 10px 0 10px;} の幅は、300px-10px (右パディング)-10px (左パディング) として解釈されます。最終的な div の幅は 280px ですが、IE6 の他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
、これについて/**/ IE5 と Firefox がサポートしていることしかわかりませんが、IE6 はサポートしています。そうではありません。誰かが理解したら、教えてください、ありがとう！ :)
3. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初に定義してください
ul{margin:0;padding:0;}
でほとんどの問題を解決できます
4. スクリプトに関しては、言語属性は xhtml1.1 ではサポートされていません。コードを
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
