1

私は現在このccを使用しています：

    /* A Free Design by Bryant Smith (bryantsmith.com) */

html, body {
text-align: center;
}
p {text-align: left;}


body {
    margin: 0;
    padding: 0;
    background: #333333 url(images/img01.gif) repeat-x;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
    background-color:#252F33;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#header {
    position:relative;
    width: 680px;
    height:99px;
    margin-left:29px;
    margin-right:21px;
    background: url(header.png) no-repeat;
}

#page
{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  overflow: hidden; 
  background: #252F33 url(background.png) repeat-y;
  width: 730px;
}


.title
{
position:relative;
left:30px;
top:22px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-weight:normal;
color:#252F33;
}

.subText
{
position:relative;
left:62px;
top:26px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
color:#CEEAEE;
}


.articleTitle
{
text-align:left;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
color: #2C4969;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
}

.articleContent
{
width:auto;
position:relative;
padding-left:50px;
padding-right:75px;
color:#101214;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
}

.rightLinks
{
width: 102px;
font-size:11px;
font-weight:bold;
line-height:21px;
height:auto;
margin-right:-3px;
background-image:url(links_branch.png);
background-repeat:no-repeat;
text-align:right;
float:right;
}

.rightLinks a:hover
{
color:#667765;
}



.rightLinks .linkTitle
{
font-size:13px;
font-weight:bold;
margin-top:27px;
margin-bottom:32px;
margin-right:5px;
}


#bar
{
    position:relative;
    width: 680px;
    height:57px;
    margin-left:29px;
    margin-right:21px;
    background: url(bar.png) no-repeat;
}

.menuLink
{
    height:36px;
    width: 120px;
    text-align:center;
    float:left;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#252F33;
    padding-top:19px;
}

.menuLink:hover
{
    background: url(bar2.png) repeat-x;
}

a
{
text-decoration:none;
color:#252F33;
}

#pageContent
{
width: 680px;
height:500px;
}

#footer {

    width: 730px;
    height:60px;
    background: url(footer.png) no-repeat;
text-align:center;
font-size:10px;
color:#667765;
padding-top:34px;
}

#footer a
{
font-size:10px;
color:#667765;
}

html, body {
text-align: center;
}
p {text-align: left;}

ハイパーリンクの色を変更したい。ここでアドバイスを試しました: http://www.ssi-developer.net/css/link-colours.shtmlこのコードを含める:

 <style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>

コードを含めると、フォントとマージンの両方が変更されました。使用している css を変更して、フォントや余白を変更せずにハイパーリンクの色を変更するにはどうすればよいですか?

4

1 に答える 1

1

提供された資料には、説明されている方法でテキストに影響を与えるものは何もないため、私が提供できる最善の答えは一種の答えです. ただし、クリーンアップされた CSS を提供することはできます。

/*BASIC STRUCTURE*/
* {
    margin: 0 auto;
    position:relative;
    padding: 0;
}

html, body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align:left;
    color: #666;
}

body {
    margin: 0;
    background: #333 url(images/img01.gif) repeat-x;
    background-color:#252F33;
}

/*TYPOGRAPHY*/
a {
    outline: none;
    color: #000;
}

a:active {
    color: #0000ff;
}

a:visited {
    color: #008000;
}

a:hover {
    color: #ff0000;
}

/*SECTIONS*/
#header {
    width: 680px;
    height:99px;
    margin: 0 21px 0 29px;
    background: url(header.png) no-repeat;
}

... etc

上記の CSS について注意すべき点がいくつかありますが、初心者レベルであることを前提として説明します (そうでない場合はすみません!)。

まず第一に、あなたの 2 番目のスニペットを元の CSS ファイルに吸収したことに注意してください。これは、ほとんどすべての CSS があるべき場所です。<head>リンクのスタイルを設定するために提供したスニペットは、HTMLのセクションに配置されたもののように見えました。これは機能しますが、将来のプロジェクトでの作業には理想的ではありません。すべての CSS ルールを 1 か所にまとめ、必要な特定の順序で保管してください。

text-align次に、ルールの一部として、ルールが 1 回だけ言及されるようになったことに注意してくださいhtml, body。繰り返しますが、これは具体性に帰着しますが、基本的に、HTML とページ本文のすべてが であるべきだと宣言したらtext-align: left、それを変更したくない限り、他のルールでそれを繰り返す必要はありません ( text-align: right)。これはすべての CSS に当てはまり、「カスケーディング」部分の由来です。すでに定義されているスタイル (たとえば、pルール) を単に繰り返すためのルールがある場合は、それを取り除くことができます。

デフォルトのスタイルについて言及する必要はありません。リンクtext-decoration: underlineはほとんどのブラウザでデフォルトになっているため、変更する場合を除き、実際に指定する必要はありません。

Universal Selector (*ルール) は強力な獣であり、注意して取り扱う必要があります。基本的に、ここに設定したルールは画面上のすべての要素に適用されます。デフォルトのスタイルまたはルールのみを宣言するために使用します。position: relative例として挙げました。それを使用して、すべてをその親要素 ( margin: 0 auto;)内の中央に配置することは賢明ではないかもしれません。

コードの先頭にブラウザのリセットを配置することも検討してください。これにより、さまざまなブラウザーによって要素に適用されたスタイルが削除され、ページの外観を 100% コントロールできます。最も人気のあるものの 1 つは、Eric Meyerによるリセットです。

最後に、この少量の CSS をチャンクに分割した様子をご覧ください。これにより、CSSがさらに構造化されるため、読みやすく、コーディングしやすくなります。基本構造、タイポグラフィ、ヘッダー、要素、フッターなどのチャンクをよく使用@importし、リセットに使用します。また、可読性を高めるために、可能な場合はCSS の省略形も使用します。

正確な問題については、CSS ファイルをクリーンアップし、すべての CSS を 1 か所に配置し、重複するルールを削除し、各text-またはfont-またはmarginルールが何を行うべきかを正確に理解して決定すると、おそらく解決策にたどり着くでしょう。

そして、特異性について読んでください。

于 2012-11-14T10:13:03.860 に答える