Як це працює разом
Русский перевод: Как это работает вместе
Більшість з вас повинні бути готові до HTML, подібної до тої, що я зробив в кінці мого керівництва по HTML для початківців. Лише рядок коду з посиланням на CSS-файл повинен бути доданий в ваш HTML-документ.
Код, представлений нижче, включає всі CSS-техніки, які були описані в цій секції керівництва. Ви можете зберегти його як CSS-стиль, поглянути, як працюють усі властивості в HTML-файлі і перевірити, як саме вони були застосовані в таблиці стилів. На мою думку, найкращий підхід до розуміння засобів CSS полягає в роботі з реальними файлами, коли ви бачите, що відбувається, якщо змінити ті чи інші речі.
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* До речі, це коментар */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}