<html> <head> <link rel="stylesheet" href="stil1.css" /> </head> <body> <h1>Пример за употреба на CSS</h1> <p>Настоящата страница може да има коренно различен вид само от смяна на използвания CSS файл.</p> <h2>Указания за работа</h2> <ul> <li>При зареждане на страницата автоматично се задава стил, който е записан във файл stil1.css.</li> <li>Сменете stil1.css със stil2.css в полето с HTML кода по-горе (link rel="stylesheet" href="stil1.css" ) и кликнете върху бутона "Редактирай кода и кликни тук", за да видите как изглежда страницата, форматирата със стил2, указан от CSS файла stil2.css</li> <li>После изтрийте реда в head частта, указващ за ползване CSS файла и кликнете върху бутона "кликни тук". При липса на указан CSS файл, браузърът ще използва стила по подразбиране (за всеки браузър това може малко да се различава). </li> </ul> <h3>Как са указани самите стилове в CSS файловете:</h3> <table> <tr> <th>Елемент</th> <th>CSS за стил1</th> <th>CSS за стил2</th> </tr> <tr> <td>Тяло body</td> <td>body {background-color:pink}</td> <td>body {background-color:yellow}</td> </tr> <tr> <td>Заглавие h1</td> <td>h1 {color:red}</td> <td>h1 {color:#A5A5A5}</td> </tr> <tr> <td>Заглавия h2 и h3</td> <td>h2, h3 {text-decoration:underline}</td> <td>h2, h3 {font-family:"Courier New", "Lucida Console"}</td> </tr> <tr> <td>Неподреден списък (ul)</td> <td>ul{list-style:circle}</td> <td>ul{list-style:square}</td> </tr> <tr> <td>Заглавия на таблица (th)</td> <td>th {background-color:#1177FF}</td> <td>th {background-color:#EE5522}</td> </tr> <tr> <td>Редове на таблица (td)</td> <td>td {text-align:center}</td> <td>td {text-align:right}</td> </tr> </table> </body> </html>
Вашия резултат:
Опитай сам
CSS уроци:
www.parvisait.com