Как мне оформить HTML с помощью CSS?

Question

Я пытался, но я не могу понять, как стилизовать эти элементы:

<div class="tabs">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

Как бы я это сделал?

Answer 1

Просто обратитесь к

.tabs ul
{
}

или

.tabs ul li
{
}

Answer 2

Используя оператор «>» (сразу после), вы предотвращаете применение стилей к элементам в структуре, которую вы используете на основе html.Пример: Если другие DIV, LI, как они, не изменили бы свои стили.

DIV.tabs {

}
DIV.tabs > .tabsNavigation {

}
DIV.tabs > .tabsNavigation > LI {

}
DIV.tabs > .tabsNavigation > LI > a {

}

Спасибо.

Answer 3

Listamatic имеет много примеров и учебник

Answer 4

Если вы хотите стилизовать сам список, используйте:

ul.tabsNavigation{}

и если вы хотите стилизовать каждый li, используйте:

ul.tabsNavigation li{}

или ссылки?

ul.tabsNavigation a{}

Answer 5

Вы можете использовать встроенные стили или использовать CSS-файл для определения ваших стилей. для встроенного стиля вы можете сделать следующее. Это даст вкладкам div красный фон.

<div class="tabs" style="background:red;">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

Если вы хотите определить свой стиль в css-файле, вы можете ссылаться на css-файл в html-файле следующим образом:

<link href="css/yourfile.css" rel="Stylesheet" type="text/css" />

определить классы CSS в ваших HTML-тегах:

<ul class="tabsNavigation">

Тогда в вашем CSS-файле вы сделаете

.tabsNavigation{
background:red;
border:1px solid blue;
width:400px;
height:300px;
}

Answer 6

То, что вы хотите, это: Для классов используйте .className и для использования идентификатора #idName

.className {
style: property;
}

#idName {
style: property;
}

Вот JSFiddle вашего примера:

http://jsfiddle.net/Mutant_Tractor/aXdJ9/1/

Answer 7

.tabs>ul>li{ /* your style */ }

или

.tabsNavigation>li{ /* your style */ }

Не забудьте включить ваши стили CSS.