CSS专用书写工具：
TopStyle Pro v3.11
官方网站地址：http://www.bradsoft.com/
功能专注于CSS设计的辅助工具，功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用。最有用的功能为CSS排错检查，可以对各个版本的CSS文件进行标准化排查并对其进行书写格式化！
[PS:最新的TopStyle版本为V3.12英文版，可升级]
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
次に、スタイル シートで次のように定義します:
ここで、「menubar」は自分で定義した ID 名です。先頭の「#」記号に注目してください。
id セレクターは、次のような派生もサポートしています:
#menubar p { text-align : right; margin-top : 10px; }
このメソッドは主に、より複雑で複数のレイヤーを定義するために使用されます。導出要素。
7. カテゴリ セレクターCSS でドットを使用して、カテゴリ セレクターの定義を示します。例:
.14px {color : #f60 ;font-size:14px ;}
ページ内では、class= カテゴリを使用します。 name" メソッド呼び出し:
14px size font
このメソッドは比較的シンプルで柔軟であり、必要に応じていつでも作成および削除できます。ページ。
8. リンク スタイルを定義するリンク スタイルを定義するために CSS で 4 つの疑似クラスが使用されます。つまり、a:link、a:visited、a:hover、a: active です。例:
a:link{font - ウェイト : ボールド ;テキスト装飾 : なし ;カラー : #c00 ;}
a:visited {フォントウェイト : ボールド ;テキスト装飾 : なし ;カラー : #c30 ;}
a:hover {フォントウェイト : ボールド; text-decoration : 下線 ;color : #f60 ;}
a:active {font-weight : 太字 ;text-decoration : none ;color : #F90 ;}
上記のステートメントはそれぞれ「リンクと訪問済みリンク」を定義します。マウスオーバー時、マウスクリック時」スタイル。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。
はは、こんなに読んでいると少しめまいを感じます。実際には、CSS の文法仕様は他にもたくさんあります。結局のところ、私たちは段階的に進めているので、太ることはできません。一口で:)
CSS レイアウト入門
CSS レイアウトと従来のテーブル レイアウトの最大の違いは、元の配置ではテーブルを使用し、テキスト レイアウト セクションの間隔をテーブルまたは無色透明の GIF 画像を使用する一方、位置決めにはレイヤー (div) が使用され、セクションの間隔はレイヤーのマージン、パディング、ボーダー、その他の属性によって制御されます。
1. DIV を定義します一般的な定義 div の例を分析します:
#sample{ MARGIN: 10px 10px 10px 10px;
BORDER-TOP: #CCC 2px Solid; #CCC 2 ピクセルのソリッド;
ボーダーの下: #CCC 2 ピクセルのソリッド;
背景: url(images/bg_poem.jpg) #FEFEFE の右下;
テキスト-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
説明は次のとおりです:
レイヤーの名前は、
デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、
デモコンテンツはこちら、デモコンテンツはこちら、これはデモコンテンツです、
これはデモ コンテンツです、これはデモ コンテンツです、
これはデモ コンテンツです...境界線が 2px グレーで、背景画像が右下に繰り返されておらず、コンテンツが上端と左端から 20 ピクセル離れており、コンテンツは中央に配置されており、すべてが期待どおりです。ほほ、見た目は良くありませんが、これをマスターすればCSSレイアウト技術の半分は学べたことになります。それだけです、全然難しくありません！ (残りの半分は何ですか? 残りの半分はレイヤー間の位置決めです。後ほど順を追って説明します。)
2. CSS2 ボックス モデル1996 年の CSS1 の発表以来、W3C 組織は、すべてのオブジェクトをWeb ページ これらはすべてボックス内に配置され、デザイナーは段落、リスト、タイトル、画像、レイヤー
XHTML+CSS レイアウトを使用するということは、最初は慣れない技術があるということです。従来のテーブル レイアウトとは異なります。つまり、すべての補助画像はすべて背景を使用して実装されます。次のようなもの:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom; を使用してコンテンツに直接挿入することもできますが、これはお勧めできません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべて、
要素を使用してページに直接挿入できます。その他の画像はロゴに似ています。タイトル画像とリストのプレフィックスは、背景または他の CSS メソッドを使用して表示する必要があります。
これには 2 つの理由があります:
パフォーマンスを構造から完全に分離する (別の記事「パフォーマンスと構造の分離を理解する」を参照)。CSS を使用してすべての外観とパフォーマンスを制御し、修正を容易にします。 ページをより使いやすく、親しみやすいものにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
