css - 設定方法背景色？

Question

簡単だと思いますが、初心者なのでやり方がわかりません。liタグの背景色を変更したいだけです-ファッションのためだけに、他には何もありません。

これは私のHTMLです：

<ul id="abas">
     <li><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></li>
</ul>

初心者で申し訳ありませんが、これはcssの部分ですよね？

#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px; 
-webkit-border-radius-topleft:5px; 
-webkit-border-radius-topright:5px;     
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px; 
-moz-border-radius-bottomright:5px; 
-webkit-border-radius-bottomleft:5px; 
-webkit-border-radius-bottomright:5px;  
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px; 
}

ここで気づいた>>> "b​​ackground-color:3B31FF;" 背景の色を変更する場所ですが、これを行うと、もちろんすべての背景色が変更されます...変更する必要があるのは「li」タブが1つだけで、htmlチュートリアルもいいでしょう。

Answer 1

CSS コード:

#abas li { 
 background-color:  ... ;
}

次のように、ドットがある場所にカラー コードを入力します。

background-color:#000000; //color black

単一のタグ:

CSS コード:

li.selected { 
     background-color:  ... ;
    }

HTML コード:

<ul>
   <li></li>
   <li class="selected"></li>
   <li></li>
</ul>

Answer 2

最初に、CSS カラーコードには# の後に 6 桁の値(または #FF33FF を #F3F として繰り返している場合は 3) が必要であり、2 番目の部分を解決するには、これを実行します。

CSS

#abas li { 
    background-color:  #xxxxxx ;
    //your other style goes here
}
#abas li.current { 
    background-color:  #xxxxxx ;
    //your other style goes here
}

HTML

<ul id="abas">
     <li class="current"><a href="#tab1">PROGRAM</a></li>
     <li><a href="#tab2">PROC</a></li>
     <li><a href="#tab3">DDNAME</a></li>
</ul>

Answer 3

16 進コードを使用する代わりに、RGB / RGBA を使用できます。

background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);

これにより、アルファと透明度のサポートを追加することで、色をさらに細かく制御できますが、残念ながら、一部のブラウザーではサポートされていません (IE、つまり、IE 10 については知りません)。

Answer 4

たとえば、<li>タグに緑を追加する場合は、次のようにします。

<li style="background: green;"><a href="#tab1">PROGRAM</a></li>

しかし、通常は HTML と CSS を分離したいので、これはベスト プラクティスではありません。したがって、CSS では次のようにします。

li { background: green; }

または16 進数のカラー コードを使用します。

li { background: #00ff00; }

---

特定のタグを 1 つだけ変更したい場合<li>は、それにクラスを追加できます。

<li class="precious">

次に、CSS ルールをこのクラスに適用します。

.precious { background: #00ff00; }

<li>.precious クラスを持つこのタグだけがスタイルされます。

実際の例: http://jsfiddle.net/pulleasy/WEdmt/

Answer 5

また、border-radius 要素を使用すると、生活がずっと楽になります。あなたがしていることは次のようになります：

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    float: left;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
}

これにより、同じ結果が得られます。また、たとえば、何らかの結果を得るには、高さと幅を追加する必要があります。その場合は、次のようにする必要があります。

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    float: left;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
    height: 100px; 
    width: 100px; 
}

これにより、あなたが探していたと思う結果が得られます。流動的なレイアウトにパーセントではなくピクセルを使用する場合は、これを使用する必要があります。(これは、幅、高さ、および配置のみを対象としていることに注意してください)。

#abas li a {
    text-decoration: none;
    background-color: 3B31FF;
    color: black;
    margin-right: 20px; 
    border-radius: 23px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 10px;
    position: absolute;
    height: 10%;
    width: 10%; /*Replace these percentiles with your width and height*/
}

私はあなたが作り方を知っていると仮定します