ホームページ  >  記事  >  ウェブフロントエンド  >  list-style の問題について CSS の list 属性を変更して li タグのスタイルを制御する

list-style の問題について CSS の list 属性を変更して li タグのスタイルを制御する

不言
不言オリジナル
2018-06-11 14:50:192385ブラウズ

この記事では、li タグのスタイルを制御するために CSS の list 属性を変更する問題を主に紹介します。これには、必要な友達が参照できるように共有します。

list_style 属性は、次の目的で使用されます。リスト属性を変更します。list-style-type はリスト項目タイプの設定に使用され、list-style-position はリスト項目の位置の設定に使用され、list-style-image は置換する画像の使用の設定に使用されます。リスト項目マーク

list_style 属性はリストを変更するために使用されます。属性

の形式は次のとおりです:
list_style: リスト項目マークのタイプ リスト項目マークの位置 リスト項目マーク
リスト項目を設定することもできます。個別にマークします:
list-style-type は、リスト項目のタイプを設定するために使用されます:
デフォルト値は、円盤です。
一般的な値: 空なし
円 中空の円
正方形 実線の正方形
10 進数
小ラテン語ラテン文字の小文字 a、b、c....
ラテン文字の大文字 A、B、C ....
list-style-position は、このリスト項目の位置を設定するために使用されます:
デフォルト値は外側ですli タグの外側を意味します。これは、li に境界線を追加することを意味します。1 ピクセルの赤で、マークの位置がわかります。
inside は、マークが li タグの内側にあることを意味し、境界線を追加するときにはっきりと確認できます。
list-style-image は、リスト項目タグを置き換える画像の使用を設定するために使用されます。
デフォルト値: なし
オプションの値: URL、形式は url ("url address") です
例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

を指定します。画像が利用できない場合の「list-style-type」属性。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

HTMLのaタグ内でのhrefとonclickの使用の違いと優先度

CSS3の線形グラデーションlinear-gradientを使用して境界線を作成する方法

以上がlist-style の問題について CSS の list 属性を変更して li タグのスタイルを制御するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。