コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
A list of my Favorite Movies
A list of my Favorite Movies" >包装在
标记中，对于页脚，我们创建一些文本和一个超链接。

在浏览器中查看网页，它现在将类似于以下界面：

除了页脚不同，它没有太多差异，但不用担心，这种情况很快就会改变！

定义网页的外观

在前面一节中，在介绍定位标记时您了解了属性，属性描述元素的行为。对于定位标记，您通过指定HREF属性定义了在单击时发生的行为。

可以想象，您可以使用属性指定元素的外观，包括字体样式、字体大小、颜色、边框等等。

所以，举例来说，对于我们前面在网页上定义的

（其内容为“A list of my Favorite Movies”），您可以更改它的字体和颜色如下：

A list of my Favorite Movies

A list of my Favorite Movies" >标记的样式属性包含该样式的定义列表。上面的标记将颜色设为蓝色，将字体设置为 32，将字体系列设置为Verdana，并将文本装饰设置为下划线.

尽管这样能很好地生效，但它并不是设置网页样式的最好方式。想象一下，如果您必须通过这种方式设置每个元素的样式，将会是什么结果。您的网页上最终会有很多文本，减缓下载和浏览的速度。

幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您在
ホームページ ウェブフロントエンド CSSチュートリアル WebMatrix 上級チュートリアル (3): 特定のスタイルを実装する方法

WebMatrix 上級チュートリアル (3): 特定のスタイルを実装する方法

黄舟
黄舟
Dec 26, 2016 pm 04:25 PM

Csdn.NET は、Microsoft 史上最も強力な Web 開発ツールとして知られる Microsoft の新しい Web 開発ツール WebMatrix に関する高度なチュートリアルを開発者が理解できるように間もなくリリースします。 Microsoft の新しい開発ツール WebMatrix をインストールして使用する方法に関する前回の投稿に続き、WebMatrix を使用して最初の Web ページを作成する方法を説明します。この号では引き続き、次のチュートリアルを紹介します。

はじめに: Microsoft WebMatrix は、インターネット上で Web サイトを作成、カスタマイズ、公開するために使用できる無料のツールです。

WebMatrix を使用すると、ウェブサイトを簡単に作成できます。オープン ソース アプリケーション (WordPress、Joomla、DotNetNuke、Orchard など) から始めることができ、WebMatrix がアプリケーションのダウンロード、インストール、構成のタスクを処理します。または、すぐに始めるのに役立つ多くの組み込みテンプレートを使用して、自分でコードを作成することもできます。どちらを選択しても、WebMatrix は、Web サーバー、データベース、フレームワークなど、Web サイトの実行に必要なものをすべて提供します。 Web ホストで使用するものと同じスタックを開発デスクトップで使用することで、Web サイトをオンラインにするプロセスが簡単かつスムーズになります。

http://web.ms/webmatrix からダウンロードできます。

これで、WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、データベースなどの使い方と、簡単な Web アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:

パート 2 では、WebMatrix を使用して非常に単純な Web ページを作成する方法と、このページがさまざまなブラウザーでどのように実行されるかを説明しました。このセクションでは、カスケード スタイル シート (CSS) テクノロジを使用して Web ページの視覚スタイルを変更する方法を学習します。
Web ページに組み込むことができるムービーの簡単なリストは次のとおりです:

WebMatrix 上級チュートリアル (3): 特定のスタイルを実装する方法

カスケード スタイル シートを使用して Web ページのスタイルを設定する準備をしましょう

次のいくつかの手順では、使用できる HTML タグがさらに表示されます。ハイパーリンク、ページ セクション、スクリプト タグなどの機能に加えて、カスケード スタイル シート (CSS) を使用してページを編集し、外観を設定する方法も学習します。最後に、レイアウトを使用してこのページとサイト上の他のページの間で同じコンテンツを取得し、同じコンテンツの編集が容易になります。

分割線を使用する

HTML では、

タグを使用して Web ページを論理的に分割できます。これは、この記事の後半でスタイルについて説明するときに特に便利です。対応する div を設定することで、Web ページの特定の部分のスタイルを指定できます。

最初の部分の Web ページの HTML は次のとおりです: 

<!DOCTYPE html>  
   
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <title>My Favorite Movies</title>  
    </head>  
    <body>  
    <h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">A list of my Favorite Movies</h1>  
       <ol>  
            <li>Its a wonderful life</li>  
            <li>Lord of the Rings</li>  
            <li>The Fourth World</li>  
            <li>The Lion King</li>  
       </ol>  
    </body>  
</html>
ログイン後にコピー

最初に行うことは、以下に示すように、映画を含むリストを独自の

にラップすることです 

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">A list of my Favorite Movies</h1>  
  <div id="movieslist">  
  <ul>  
    <li>Its a wonderful life</li>  
    <li>Lord of the Rings</li>  
    <li>The Fourth World</li>  
    <li>The Lion King</li>  
  </ul>  
</div>  
</body>  
</html>
ログイン後にコピー

これで、視聴できるようになります。映画を含む

  1. リストが
    内に含まれるようになりました。今このページを見てみると、以前とあまり変わっていないことがわかります。これは、
    タグが論理区切り文字であるためです。物理的な外観はありません。

    ハイパーリンクの使用

    ハイパーリンクについてはすでにご存知かもしれません。ハイパーリンクとは、あるページ上で別のページにリンクするクリック可能な領域です。これらの領域はハイパーリンクと呼ばれますが、HTML では元々アンカー タグと呼ばれていたため、ハイパーリンクを作成する場合は常に タグを使用します。

    (または位置決め) タグは、 と の間のコンテンツをクリック可能にします。ユーザーがこのコンテンツをクリックすると、ブラウザは タグの href 属性を使用して指定された HREF (ハイパーリファレンス) にリダイレクトします。

    属性は、タグ内ではなくタグ自体で定義されます。次のようになります:

    content

    したがって、ハイパーリンクを作成するには、次のような構文を使用します。 :

    ここをクリック

    href は上記のような Web サイトである必要はなく、幹部も使用できます。プログラマーの操作のための JavaScript 関数。特別な href は、ハイパーリンクのスタイルが機能するかどうかをテストできるように、開発中にプレースホルダーとして使用されます。これを行うには、href として「#」文字を使用します。

    したがって、ムービーを含むすべての

  2. アイテムをハイパーリンクに変換するには、ムービーのテキストを タグで囲み、次のように HREF を # に設定します。 , リスト上の要素には、青い下線とも呼ばれるおなじみのハイパーリンク スタイルが使用されていることがわかります。

    将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新

    和