CSS (Cascading Style Sheets)

Содержание

Слайд 2

CSS (Cascading Style Sheets) –
Каскадные таблицы стилей - это свод стилевых

CSS (Cascading Style Sheets) – Каскадные таблицы стилей - это свод стилевых
описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён:
к отдельному тегу - элементу, или
одновременно ко всем идентичным элементам на всех страницах сайта.
CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

CSS (Cascading Style Sheets) –

Слайд 3

Внедрение CSS в HTML документ

Осуществить данную задачу можно тремя способами:

Написать стилевое описание

Внедрение CSS в HTML документ Осуществить данную задачу можно тремя способами: Написать
непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.

Слайд 4

Внедрение CSS в HTML документ

Осуществить данную задачу можно тремя способами:

Написать стилевое описание

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

Слайд 5

Внедрение CSS в HTML документ

Осуществить данную задачу можно тремя способами:

Вынести стилевое описание

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

Слайд 6

Атрибут STYLE

Практически каждый HTML тег имеет атрибут style, который говорит о том,

Атрибут STYLE Практически каждый HTML тег имеет атрибут style, который говорит о
что к этому тегу применяется некое стилевое описание.
Пишется так:

это параграф с индивидуальным стилем


Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента.


это параграф с индивидуальным стилем


Пример:

Слайд 7

пример

результат

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

Слайд 8

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

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

Слайд 9

Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Слайд 10

Пример описания стилей:

Использование тегов для которых описан стиль:

В данном случае стили описываются

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

Слайд 11

Внутри тега идет непосредственное объявление стилей тех или иных HTML

Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно
элементов согласно следующему синтаксису:

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

Слайд 12

CSS в отдельном внешнем файле.

открываем блокнот (или другой редактор) и пишем стилевые

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

Слайд 13

Подключить файл CSS к web – странице:

многоцелевой и служит для "связывания"

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

Слайд 14

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между

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

Слайд 15

Подключить файл CSS к web – странице:

ссылка приобретает следующий вид:

Подключить файл CSS к web – странице: ссылка приобретает следующий вид:
type="text/css“>

Слайд 17

Свойства текста

Выравнивание текста

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

Слайд 18

Свойства текста

Выравнивание текста

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

Слайд 20

Свойства текста

Отступ первой строки

Свойство text-indent - задаёт отступ первой строки в текстовом

Свойства текста Отступ первой строки Свойство text-indent - задаёт отступ первой строки
блоке с левой стороны.

Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS. В примере ниже расстояние отступа от левого края задаётся в пикселях (px):

Слайд 21

Свойства текста

Трансформация текста

Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их

Свойства текста Трансформация текста Своийство text-transform трансформирует символы в указанном текстовом блоке,
заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.

Слайд 22

Свойства текста

Вертикальное выравнивание

Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства

Свойства текста Вертикальное выравнивание Вертикальное выравнивание текста в строке устанавливает свойство vertical-align Возможные значения свойства vertical-align:
vertical-align:

Слайд 23

Свойства текста

Вертикальное выравнивание

Базовая линия - это линия, на которой располагаются "сидят" символы

Свойства текста Вертикальное выравнивание Базовая линия - это линия, на которой располагаются
в текстовой строке, Например буква "А" сидит прямо на этой линии, а вот строчная буква "у" сидит на ней же, но свесив ноги.

Вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения

Слайд 24

Свойства текста

Свойства текста

Слайд 25

Свойства текста

Пробелы и перенос строки

Набранный текст, в каком либо текстовом редакторе браузерами

Свойства текста Пробелы и перенос строки Набранный текст, в каком либо текстовом
по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега
, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Слайд 27

В вашей именованной папке да диске D
создайте папку с именем CSS.
Выполните

В вашей именованной папке да диске D создайте папку с именем CSS.
задание из раздаточного материала
(уроки 1-5 )

Задание для индивидуальной работы

Имя файла: CSS-(Cascading-Style-Sheets).pptx
Количество просмотров: 47
Количество скачиваний: 0