CSS технология ( Каскадные таблицы стилей ) Понятие CSS Внедрение CSS в документ Атрибут Stile Тег STILE Внешний CSS файл. - презентация

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, который говорит о том, что к этому тегу применяется некое стилевое описание. Пишется так: это параграф с индивидуальным стилем Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента. это параграф с индивидуальным стилем Пример:

7 пример результат

8 НО, такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

9 Тег Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

10 Пример описания стилей: Использование тегов для которых описан стиль: В данном случае стили описываются в заголовке документа между тегами HEAD!!!!!

11 Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису: Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

12 CSS в отдельном внешнем файле. 1.открываем блокнот (или другой редактор) и пишем стилевые правила; 2.Сохраняем файл с расширением *.css (обычно файл со стилями называют style.css).

13 3.Подключить файл CSS к web – странице: многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

14 Тег имеет атрибуты: href - Путь к файлу. rel - Определяет отношения между текущим документом и файлом, на который делается ссылка. shortcuticon - Определяет, что подключаемый файл является иконкой.иконкой stylesheet - Определяет, что подключаемый файл содержит таблицу стилей. application/rss+xml - Файл в формате XML для описания ленты новостей. type - MIME тип данных подключаемого файла.

15 3.Подключить файл CSS к web – странице: ссылка приобретает следующий вид:

16

17 Свойства текста Выравнивание текста

18 Свойства текста Выравнивание текста

19 Свойства текста Оформление текста ext-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста: В файле CSS "декорировали" ссылку элемент, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс 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 имитирует работу тега, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

26