Внедрение CSS в HTML документ
- 1. CSS технология (Каскадные таблицы стилей) Понятие CSS Внедрение CSS в документ Атрибут Stile Тег STILE Внешний CSS файл
- 2. CSS (Cascading Style Sheets) – Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён: • к отдельному тегу - элементу, или • одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
- 3. Внедрение CSS в HTML документ Осуществить данную задачу можно тремя способами: 1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
- 4. Внедрение CSS в HTML документ Осуществить данную задачу можно тремя способами: 2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
- 5. Внедрение CSS в HTML документ Осуществить данную задачу можно тремя способами: 3. Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
- 6. Атрибут STYLE Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание. Пишется так: <p style=""> это параграф с индивидуальным стилем </p> Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента. Пример: <p style="color: #ff0000; font-size:12px"> это параграф с индивидуальным стилем </p>
- 8. НО, такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
- 9. Тег <STYLE> Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег <STYLE> </STYLE> (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
- 10. Пример описания стилей: Использование тегов для которых описан стиль: В данном случае стили описываются в заголовке документа между тегами HEAD!!!!!
- 11. Внутри тега <style> </style> идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису: Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
- 12. CSS в отдельном внешнем файле. 1. открываем блокнот (или другой редактор) и пишем стилевые правила; 2. Сохраняем файл с расширением *.css (обычно файл со стилями называют style.css).
- 13. 3. Подключить файл CSS к web – странице: <LINK> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <LINK> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <LINK> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head></head> и не выводится браузерами на экран.
- 14. Тег <link> имеет атрибуты: href - Путь к файлу. rel - Определяет отношения между текущим документом и файлом, на который делается ссылка. shortcuticon - Определяет, что подключаемый файл является иконкой. stylesheet - Определяет, что подключаемый файл содержит таблицу стилей. application/rss+xml - Файл в формате XML для описания ленты новостей. type - MIME тип данных подключаемого файла.
- 15. 3. Подключить файл CSS к web – странице: ссылка приобретает следующий вид: <link rel="stylesheet" href="mystyle.css" type="text/css“>
- 17. Свойства текста Выравнивание текста
- 18. Свойства текста Выравнивание текста
- 19. Свойства текста Оформление текста ext-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста: <a href="index.html" STYLE="TEXT-DECORATION:NONE">Ссылка без подчёркивания</a> В файле CSS "декорировали" ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}, Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент
- 20. Свойства текста Отступ первой строки Свойство text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны. Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS. В примере ниже расстояние отступа от левого края задаётся в пикселях (px):
- 21. Свойства текста Трансформация текста Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
- 22. Свойства текста Вертикальное выравнивание Вертикальное выравнивание текста в строке устанавливает свойство vertical-align Возможные значения свойства vertical-align:
- 23. Свойства текста Вертикальное выравнивание Базовая линия - это линия, на которой располагаются "сидят" символы в текстовой строке, Например буква "А" сидит прямо на этой линии, а вот строчная буква "у" сидит на ней же, но свесив ноги. Вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения
- 24. Свойства текста
- 25. Свойства текста Пробелы и перенос строки Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами. Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.