0

私はCSSを学ぼうとしていますが、これまでのところ、HTMLをCSSに変更することは、フォント、色、テキストサイズ、テーブル、背景を一部のCSSステートメントに変更するだけのようです。

私の問題は、まだ必要なHTMLと削除するものがわからないことです。CSSのものはどこに置きますか？この簡単なHTMLで学習しようとする基本的なHTML：

<html>
<head>
<title>CSS practice</title>
</head>

<body style="background-color:white;">

<table border="1" width="990" bgcolor="#99CCFF">
  <tr>
    <td width="990"><p align="center"><font face="Arial Black" size="6" color="#680000">DDDD</font></td>
</tr>
</table>
<table border="0" width=990 bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="990"><font color="#FFFFFF" face="Arial" size="2"><b> Personal Portfolio</b>    </font></td>
</tr>
</table>
<table border="0" width=990 cellspacing="0" cellpadding="0">
<tr>
<td width="18%" bgcolor="#99CCFF" valign="top">&nbsp;
  <p style="margin-left: 20"><b><font face="Arial" size="2" color="#000000">
  <a href="index.html"> Home </a><br><br>
  <a href="about.html"> About Me </a><br><br>
  <a href="outreach.html"> Outreach </a><br><br>
  <a href="contact.html"> Contact Me </a><br><br>
  <a href="experience.html"> Experience </a><br><br>
  <a href="education.html"> Education </a><br><br> 
  <a href="skills.html"> Skills </a><br><br>

<td width="61%" valign="top">
  <blockquote>
    <p><br>
    <font face="Arial" size="5">Welcome</font></p>
    <p><font size="2" face="Arial"> Aspiring CSS programmer </font></p>
    <img src="me.jpg" alt="US"/>
  </blockquote><br><br>
  <p align="center"><font face="Arial" size="1">© COPYRIGHT 2012 ALL RIGHTS
  RESERVED </font></td>

<table border="0" width="990" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><font size="1">&nbsp;</font></td>
</tr>
</table>

</body>

</html>
4

6 に答える 6

4

ゼロから始めます。セマンティック HTML を構築することは、コンテンツのみに焦点を当てることであり、昔ながらの HTML を構築するよりもはるかに簡単であることがわかるでしょう。

表のないセマンティック HTML

新しい HTML は次のようになります。

<html>
  <head>
    <title>CSS practice</title>
    <link rel="stylesheet" href="css-file.css" type="text/css">
  </head>

  <body>
    <span>DDDD</span>
    <h1>Personal Portfolio</h1>
    <nav>
      <a href="index.html"> Home </a>
      <a href="about.html"> About Me </a>
      <a href="outreach.html"> Outreach </a>
      <a href="contact.html"> Contact Me </a>
      <a href="experience.html"> Experience </a>
      <a href="education.html"> Education </a>
      <a href="skills.html"> Skills </a>
    </nav>
    <p>Welcome <span>Aspiring CSS programmer</span></p>
    <img src="me.jpg" alt="US"/>
    <span>© COPYRIGHT 2012 ALL RIGHTS RESERVED</span>
  </body>
</html>

見る？内容だけで、スタイルについては何もありません。はるかに簡単です！

その後、新しい分離さ れた CSS で移動を開始できます(タグcss-file.css 内の css 宣言を見てheadください) 。

CSS スタイル

CSS は、HTML 要素へのパスを見つけて、スタイルを設定するだけです。とても簡単です。

たとえば、次のようにタイトルを見つけてスタイルを設定できます。

h1 {
  font-family: "Verdana";
  font-weight: bold;
}

...あなたのメニューボタンは次のようになります：

nav a {
  color: blue;
  text-style: italic;
}

nav aaタグの内側にあるすべてのタグにスタイルnavを適用し、タグaの外側にあるタグはスタイルを適用しないことを意味しますnav。

うーん...そしてこれはパスです！それぞれのターゲット (HTML 要素) を満たす限り、自由にパスを作成します。

クラスと ID

classHTML のすべてのタグは、とid属性の両方を持つことができます。それらを HTML タグに自由に適用して、要素を見つけやすくします。次のように使用します。

<span class="class_name" id="id_name">content</span>

CSS では、次のように名前の前にドットを付けることでクラスを参照できます。

nav a.class_name {
  color: blue;
  text-style: italic;
}

したがって、スタイルは、タグ内に存在するクラスaを持つすべてのタグに適用されます。class-namenav

Id#は同じように機能しますが、CSSでは、クラスに使用したドットの代わりにハッシュ ( ) を配置してそれらを参照します。

それだけです、あなたはすでに始めています。:)

個人的には、ここから始めることをお勧めします:ウェブサイトの作り方. そして覚えておいてください...たくさんのGoogleを使用してください。すぐに到着します。

于 2013-01-11T23:21:31.517 に答える
2

css は、サイズ/位置/色/フォントを処理する必要があります。要するに、構造ではないものすべてです。 w3schoolsは優れたリソースです。

jsfiddleを使用してテスト実装を試してください。

ここに大まかなカットがあります。フィドルで遊んでほんの数分でした

html:

<html>

  <head>
    <title>CSS practice</title>
  </head>

  <body>
    <div class='header'>DDDD</div>
    <div class='subHeader'>Personal Portfolio</div>
    <div class='links'>
      <ul>
        <li><a href="index.html"> Home </a></li>
        <li><a href="about.html"> About Me </a></li>
        <li><a href="outreach.html"> Outreach </a></li>
        <li><a href="contact.html"> Contact Me </a></li>
        <li><a href="experience.html"> Experience </a></li>
        <li><a href="education.html"> Education </a</li>
        <li><a href="skills.html"> Skills </a></li>
      </ul>
    </div>
    <p class='welcome'>Welcome</p>
    <p class='welcome2'>Aspiring CSS programmer</p>
    <img src="me.jpg" alt="US" />
    <div class='copyright'>© COPYRIGHT 2012 ALL RIGHTS RESERVED</div>
  </body>
</html>

CSS:

:root{
    background-color:white;
    font-family: Arial;
  }
  .header {
    border: 1px;
    width: 990px;
    background-color: #99CCFF;
    text-align: center;
    font-size: 16pt;
    color: #680000;
  }
  .subHeader {
    background-color: black;
    color: white;
    font-weight: bold;
  }
  .links {
    width: 200px;
    background-color: #99CCFF;
    font-size: 12pt;
    padding-left: 20px;
    float:  left;
  }
  .welcome {
    font-size: 15pt;
  }
  .welcome2 {
    font-size:12pt;
  }
  .copyright {
    float: left;
    width: 990px;
    text-align: center;
  }
于 2013-01-11T23:05:49.150 に答える
1

一般的な概念は、CSS が HTML のすべてのスタイル情報を置き換えるというものです。そのため、HTML はコンテンツにデータ構造を提供するだけの「マークアップ」言語としてのみ存在する必要があります。

色/サイズ/位置などを参照するすべての属性を CSS ステートメントとして作り直し、代わりにそれらの HTML 要素にクラスを追加する必要があります。

たとえば、テーブル タグは次のように変更されます。<table class="mytable">.

于 2013-01-11T23:09:17.583 に答える
0

基本的に、id と class を除いて、HTML タグの属性はもうほとんど必要ありません。また、インライン スタイルのスタイルも必要です (これは良くありませんが、問題が発生して時間がない場合に便利です)。

次に、境界線、幅、背景色、フォント サイズ、色などをすべて CSS で管理し、その他にも何百ものものを管理します。

固有の要素の基本的なものについては、ID 属性を使用できます。ページ内で繰り返される要素については、class を使用します。

CSS では、ID を次のように参照します。

#myID { 色: 赤;}

、クラスへ

.myClass { 色: 赤; }

そして、要素名を持つ要素に、次のように

div { 色: 赤; }

頑張ってください、楽しんでください:)

于 2013-01-11T23:11:04.650 に答える
0

あなたの質問を正しく理解できれば、あなたは HTML のスタイルを CSS に置き換えようとしています。

これはあなたのcssを追加する場所です（私は例を挙げていることに注意してください、それらは構文的に正しいかもしれません）

<head>
<title>CSS practice</title>
<style>
//Your CSS styles - e.g.:
.body {
attribute1: value1,
attribute2: value2
}

</style>
</head>

そして、HTML タグ内の 、 、 などの属性をすべて削除しますstyle。border基本width的に、高さ、色、フォント、幅、境界線など、あらゆる種類のスタイルを追加するものはすべて CSS コードに移動されます。

于 2013-01-11T23:08:50.737 に答える
0

上記の w3schools は非常に優れたリソースです。CSS コードを別の「css」ファイルに入れるようにしてください。また、物事がどのように相互作用するかを確認したいだけの場合は、ブラウザーの開発者ツールが非常に便利です。Windows/Linux で firefox または chrome を使用している場合は、Ctrl+F12 を試すことができます。お役に立てれば。

于 2013-01-11T23:15:45.730 に答える