CSS: list-style-type を使用した色とサイズの制御の概要-CSSチュートリアル-php.cn

CSS: list-style-type を使用した色とサイズの制御の概要

黄舟

リリース： 2017-06-29 13:33:40

オリジナル

5528 人が閲覧しました

今日作成したページには、リスト記号に非常によく似た小さなアイコンがあります。面倒なので、それを ul 独自のスタイルに置き換えたかったのですが、ネットで検索した結果、この方法を見つけたので、将来の使用のために記録します。

個人的な経験に基づくと、色が同じであればこの方法を使用できますが、フォントの色とリスト項目の色が異なる場合は、グラフを使用して実装し、line-heightを追加する必要があります。 Npx in li ; リストとフォントを中央に表示できるのは IE だけです

引用:

昨年、私が CSS 初心者だったとき、専門家に list-style-type の色や色を変更できるか尋ねたことがあります。サイズ？専門家は「いいえ、専門家の指導の下、写真を使ってそれを実現しました」と言いました。

私は独学なので、CSS の書き方は他の人ほど標準化できないので、間違いを犯して発見する機会があります。今回はlist-style-typeの前にあるスタイルの色とサイズを変更する方法についてお話します。

ソースコードを見てみましょう

<ul class="artul">
    <li><a href="#">这里是SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是很长的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是近期SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是SEO常看的网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    </ul>

ログイン後にコピー

と対応するCSS

1枚目の写真CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:12px;color:#FFFF00;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

ログイン後にコピー

2枚目の写真CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

ログイン後にコピー

皆さんご存知かと思いますが、ulの色を変えるだけで色が変わります、フォント - size を使用してサイズを変更できます (サイズは IE6 ではサポートされていませんが、Firefox では変更できます)

以上がCSS: list-style-type を使用した色とサイズの制御の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。