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

このレイヤーの実際のパフォーマンスは次のとおりです:

デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、デモコンテンツはこちら、

デモコンテンツはこちら、デモコンテンツはこちら、これはデモコンテンツです、

これはデモ コンテンツです、これはデモ コンテンツです、

これはデモ コンテンツです...

境界線が 2px グレーで、背景画像が右下に繰り返されておらず、コンテンツが上端と左端から 20 ピクセル離れており、コンテンツは中央に配置されており、すべてが期待どおりです。ほほ、見た目は良くありませんが、これをマスターすればCSSレイアウト技術の半分は学べたことになります。それだけです、全然難しくありません！ (残りの半分は何ですか? 残りの半分はレイヤー間の位置決めです。後ほど順を追って説明します。)

2. CSS2 ボックス モデル

1996 年の CSS1 の発表以来、W3C 組織は、すべてのオブジェクトをWeb ページ これらはすべてボックス内に配置され、デザイナーは段落、リスト、タイトル、画像、レイヤー

などの定義を作成することで、このボックスのプロパティを制御できます。ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。上で説明したサンプル レイヤーは典型的なボックスです。初心者にとっては、margin、background-color、background-image、padding、content、border のレベル、関係、相互影響について混乱することがよくあります。ここにボックス モデルの 3D 概略図を示します。理解しやすく、覚えやすいと思います。

3. 補助画像はすべて背景付きで処理する必要があります

XHTML+CSS レイアウトを使用するということは、最初は慣れない技術があるということです。従来のテーブル レイアウトとは異なります。つまり、すべての補助画像はすべて背景を使用して実装されます。次のようなもの:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom;

を使用してコンテンツに直接挿入することもできますが、これはお勧めできません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべて、 要素を使用してページに直接挿入できます。その他の画像はロゴに似ています。タイトル画像とリストのプレフィックスは、背景または他の CSS メソッドを使用して表示する必要があります。

これには 2 つの理由があります:

パフォーマンスを構造から完全に分離する (別の記事「パフォーマンスと構造の分離を理解する」を参照)。CSS を使用してすべての外観とパフォーマンスを制御し、修正を容易にします。 ページをより使いやすく、親しみやすいものにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7333

9

Java チュートリアル

1627

14

CakePHP チュートリアル

1351

46

Laravel チュートリアル

1262

25

PHP チュートリアル

1209

29

もっと見る