2017-01-25 1 views
-1

HTMLIch habe 2 verschiedene Listen, die ich auf css stylen möchte, wie soll ich das machen?

<pre> 

<head> 
    <title> 
     title of the page 
    </title> 
    <link rel="styleheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
<ul> 
    <li>Italy</li> 
    <li>France</li> 
    <li>Greece</li> 
</ul> 
    <h1> This is the main heading</h1> 
    <p>This text might be an introduction to the rest of 
the page. And if the page is a long one it might 
be split up into several sub-headings</p> 
<h2>this is the second heading</h2> 
<p> long live the King :Many long articles have sub-headings so to help 
you follow the structure of what is being written. 
There may even be sub-sub-headings (or lower-level 
headings).</p> 
<h2>Another sub heading</h2> 
<p>Here you can see another sub-heading.</p> 
<p>This is how we make a word appear <b>bold.</b></p> 
<p>This is how we make a word appear <i>italic</i>. 
</p> 
<ul> 
    <li>Potatoes</li> 
    <li>Oranges</li> 
    <li>Berries</li> 
</ul> 
</body> 
</html> 
</pre> 

CSS:

<pre> 
body{background: url("../img/poza.jpg"); 

} 
ul{text-align: left; 

} 
ol{ 
    list-style-position: right; 
    text-align: 
} 
</pre> 
+3

definieren 2 verschiedene Klassen, die in den Listen anzuwenden. – mmenschig

+0

Verwenden Sie Klassen, IDs oder ': nth-child' http://codepen.io/anon/pen/NdvQYL –

Antwort

1

Verwenden Sie Klassen oder die ID

HTML

<ul class="list1"> 
    <li>Italy</li> 
    <li>France</li> 
    <li>Greece</li> 
</ul> 

<ul class="list2"> 
    <li>Potatoes</li> 
    <li>Oranges</li> 
    <li>Berries</li> 
</ul> 

CSS

.list1 { 
    text-align: left; 
    color: red; 
} 
.list2 { 
    text-align: right; 
    color: blue; 
} 

Auch wenn Sie zum Beispiel innerhalb CSS für all ‚li‘ anwenden mag die ‚ul class =‚list1‘‘ (was Klasse zu jedem ‚li‘ Elemente zu vermeiden) Sie es mit Kind tun können/in CSS-parent:

.list1 > li { 
    color: orange; 
} 
Verwandte Themen