WEBデザイン入門 DIV+CSS (1)_html/css_WEB-ITnose

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}
 

其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； "#FF0000"和"#FFFFFF"是属性的值(value)。 2.颜色值

颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。

3.定义字体

web标准推荐如下字体定义方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
 

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统； Lucida适合UNIX用户 "宋体"适合中文简体用户; 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; 4.群选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
 

5.派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，例如这样：

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%; }
説明は次のとおりです:
レイヤーの名前は、