Селектор идентификатора (id)

Дата добавления: 2015-07-09; просмотров: 565; Нарушение авторских прав

Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.

Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":

#fontsz{font-size: 50%}

Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":

ul#first{list-style: disc;color: #ffffff}

Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.

Комментарии CSS

Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:

/* Первый комментарий. */table{/* Второй комментарий. */margin-left: 10pt;font-family: "sans serif"/* Третий комментарий. */border-style:outset; }

Примеры использования CSS

Рассмотрим несколько примеров использования CSS:

Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле HTML применяют тег <link>:

2. <html>3. 4. <head>5. <link rel="stylesheet" type="text/css" 6. href="http://www.intuit.ru/image/style.css">7. </head>8. 9. <body>10. 11. <ol><!—Список имеет внешний отступ в 10 пунктов -->12. <li>для этого элемента списка будет задан шрифт "arial"</li>13. <li>для этого элемента списка будет задан шрифт "arial"</li>14. </ol>15. 16. <ul><!—Список имеет внешний отступ в 20 пунктов -->17. <li>для этого элемента списка будет задан шрифт "arial"</li>18. <li>для этого элемента списка будет задан шрифт "arial"</li>19. </ul>20. 21. </body></html>

Внешний файл содержит следующее описание стилей (style.css):

ol {margin-left: 10pt}ul {margin-right: 20pt}li {font-family: arial}

22. Следующий файл HTML связывается с внешней таблицей стилей с помощью тега <link>:

23. <html>24. <head>25. <link rel="stylesheet" type="text/css"26. href="http://www.intuit.ru/image/style2.css">:27. </head>28. 29. <body>30. 31. <table>32. <tr>33. <td>Ячейка 1</td>34. <td>Ячейка 2</td>35. </tr>36. </table>37. 38. <a href="http://www.intuit.ru">Здесь размещена ссылка</a>39. 40. </body></html>

Внешний файл содержит следующее описание стилей (style2.css):

body {background-color: #FFFFFF}table {margin-left: 10pt;}td {font-size:10pt; color: blue}a:link {color:blue}a:visited {color:brown}a:hover {color:lime}a:active {color:gray}.

<== предыдущая лекция	\|	следующая лекция ==>
Селектор класса (class)	\|	Подключение таблицы стилей