Каскадные таблицы стилей презентация

Содержание

Слайд 1Доц. Русакова М.С.
Кафедра ИиВМ СамГУ
Каскадные таблицы стилей

Слайд 2Что такое стиль документа?
Стили представляют собой набор параметров, управляющих видом и

положением элементов веб-страницы
Стиль браузера - оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом 

, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора - стиль, который добавляет к документу его разработчик.
Стиль пользователя - стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Страница с «голым» html
Страница со стилевым оформлением

Слайд 3Где в html-документе определить стиль?
В отдельном css-файле, подключив его в документе

в теге в заголовке документа

Файл со стилем:
H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; }
P { padding-left: 20px; }
Глобальные стили - свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы в тегах

Hello, world!




Слайд 4Внутренний или встроенный стиль является расширением для одиночного тега, используемого на

текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

Внутренние стили


color: #cd66cc">Пример текста




Все методы использования стилей можно использовать одновременно, но надо помнить про приоритет стилей – у внутреннего самый высокий, у глобального – средний, у связанного – самый низкий.
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;

Где в html-документе определить стиль?

Слайд 5Типы носителей
@import "/style/main.css" screen;
@media тип носителя 1 { Описание стиля для

типа носителя 1 }

Слайд 6Базовый синтаксис CSS
Селектор – основное понятие
Селектор - некоторое имя стиля, для

которого добавляются параметры форматирования.
В качестве селектора выступают теги, классы и идентификаторы
Стилевое свойство и его значение разделяются двоеточием, пары свойство-значение разделяются точкой с запятой, перечисляются в фигурных скобках

Слайд 7Значения стилевых свойств
Строка – берется в одинарные или двойные кавычки:

'Гостиница "Турист"‘
Число – целое, десятичное (дробная часть отделяется точкой)
Проценты – применяются, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий
Размер - используются абсолютные и относительные единицы измерения
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами (em, ex, px, %)
Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом (in, cm, mm, pt, pc)
Цвет -  можно задавать тремя способами:
по шестнадцатеричному значению – форма записи #rrggbb. Допускается сокращенная форма #rgb, где каждый символ следует удваивать.
по названию – red, green, blue, yellow и т.д.
и в формате RGB -  rgb(R, G, B), например rgb(255, 0, 0) или rgb(100%, 20%, 20%)
Адрес – url(“относительный или абсолютный адрес файла”)
Ключевое слово - определяют желаемый результат действия стилевых свойств. Ключевые слова пишутся без кавычек: P { text-align: right; }

Слайд 8Селекторы-классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или

задать разные стили для одного тега.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

span.sty1 {
font-size: 1.2em;
color: rgb(50, 100, 150);
font-style: italic;
font-weight: bold;
}
span.sty2 {
font-family: fantasy;
font-size: 1.7em;
color: #AA44EE;
}

span.sty3 {
font-size: 1.2em;
font-family: Frosty;
color: lightcoral;
font-style: italic;
}
span.sty4 {
font-size: 112%;
font-family: Verdana;
color: indianred;
font-weight: bold;
}

Слайд 9

Работа со стилями




Каскадные таблицы стилей


Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы


Стиль браузера - оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.


Стиль автора - стиль, который добавляет к документу его разработчик.


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




Посмотреть пример

Слайд 10Другие селекторы
ID-селектор
#Имя идентификатора { свойство: значение;... }
#help {background: #f0f0f0;}

Идентификаторы можно применять

к конкретному тегу:
Тег#Имя идентификатора { свойство: значение; ... }
Контекстный селектор состоит из простых селекторов разделенных пробелом:
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1:
<Тег1> <Тег2> ...


Слайд 11Соседние селекторы. Соседними называются элементы веб-страницы, когда они следуют непосредственно друг

за другом в коде документа.

Lorem ipsum dolor sit amet.


Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами
Селектор 1 + Селектор 2 { Описание правил стиля }
Дочерним селектором считается такой, который в дереве элементов находится непосредственно внутри родительского элемента.
Селектор 1 > Селектор 2 { Описание правил стиля }

Слайд 12Селектор атрибута. Простой селектор атрибута устанавливает стиль для элемента, если задан

специфичный атрибут тега. Его значение в данном случае не важно.
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Q[title] { color: maroon; /* Цвет текста */ }
Атрибут со значением: устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.
[атрибут="значение"] { Описание правил стиля } 
Селектор[атрибут="значение"] { Описание правил стиля }
A[target="_blank"] { background: url(images/blank.png);}
Обычная ссылка Ссылка в новом окне
Значение атрибута начинается с определённого текста: устанавливает стиль для элемента, если значение атрибута тега начинается с указанного текста.
[атрибут^="значение"] { Описание правил стиля }  Селектор[атрибут^="значение"] { Описание правил стиля }
A[href^="http://"] { font-weight: bold }





Слайд 13Значение атрибута оканчивается определённым текстом: устанавливает стиль для элемента в том

случае, если значение атрибута оканчивается указанным текстом.
[атрибут$="значение"] { Описание стиля }  Селектор[атрибут$="значение"] { Описание стиля }
A[href$=".com"] { /* Если ссылка заканчивается на .com */ color: green; }
Значение атрибута содержит указанный текст. Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. [атрибут*="значение"] { Описание стиля }  Селектор[атрибут*="значение"] { Описание стиля }
[href*=“citforum"] { background: yellow;}


Слайд 14Одно из нескольких значений атрибута. Некоторые значения атрибутов могут перечисляться через

пробел, например имена классов. [атрибут~="значение"] { Описание стиля }  Селектор[атрибут~="значение"] { Описание стиля }
[class~="block"] h3 { color: green; }
Текст

Дефис в значении атрибута. В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание стиля }  Селектор[атрибут|="значение"] { Описание стиля }
DIV[class|="block"] { background: #306589}
Текст

Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"] { Описание стиля }  Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }

Слайд 15Универсальный селектор
* { Описание правил стиля }
Псевдоклассы определяют динамическое состояние элементов,

которое изменяется с помощью действий пользователя, а также положение в дереве документа.
Селектор:Псевдокласс { Описание правил стиля }
A.menu:hover {color: green}
Условно все псевдоклассы делятся на три группы:
определяющие состояние элементов;
имеющие отношение к дереву элементов;
указывающие язык текста.



Слайд 16Псевдоклассы, определяющие состояние элементов
:active
:link
:focus
:hover
:visited

INPUT:focus { color: red;}

tr:hover {background: #fc0;}









ФИО Итоговая оценка
Комаров не зачтено
Давтян зачтено
Колосов зачтено
Никитина не зачтено



Посмотреть пример

Слайд 17Псевдоклассы, имеющие отношение к дереву документа:
:first-child
P:first-child { text-indent: 0; /* Для

первого абзаца отступ убираем */ }
B:first-child { color: red; /* Красный цвет текста */ }
Псевдоклассы, задающие язык текста:
:lang
Элемент:lang(язык) { ... }
В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.
q:lang(de) { quotes: "\201E" "\201C“;}
q:lang(en) { quotes: "\201C" "\201D“;}
q:lang(fr), q:lang(ru) {quotes: "\00AB" "\00BB"; }

Цитата на английском: То be or not to be.


Слайд 18Псевдоэлементы
Селектор:Псевдоэлемент { Описание правил стиля }
Каждый псевдоэлемент может применяться только к

одному селектору
Если надо установить несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности.
Список псевдоэлементов:
:after
P.new:after { content: " - New!";}
:before
:first-letter
P:first-letter { font-family: 'Times New Roman', Times, serif;
font-size: 200%;
color: red; }
:first-line
P:first-line { color: red;
font-style: italic; }



Слайд 19Группирование, наследование, каскадирование
Группирование применяется, если несколько селекторов обладают одинаковым стилем
Селектор 1,

Селектор 2, ... Селектор N { Описание стиля }
H1, H2 { font-family: Arial, Helvetica, sans-serif; }
H1 { font-size: 160%; color: #003; }
H2 { font-size: 135%; color: #333; }
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других (дочерние элементы получают некоторые стилевые свойства своих родителей).
 CSS - Cascading Style Sheets (каскадные таблицы стилей). Под каскадом понимается одновременное применение разных стилевых правил к элементам документа. Введены некоторые приоритеты браузеров:
Стиль браузера (наименее приоритетный)
Стиль автора.
Стиль пользователя.
Стиль автора с добавлением !important.
Стиль пользователя с добавлением !important (наиболее приоритетный)
Свойство: значение !important
Специфичность - если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. 

Слайд 20Некоторые приемы в CSS3
Радиальный градиент
Селектор {background: radial-gradient(цвет_нач, цвет_к);}
Можно указать позицию начальной

точки
at top left = at left top = at 0% 0% (в левом верхнем углу);
at top = at top center = at center top = at 50% 0% (по центру вверху);
at right top = at top right = at 100% 0% (в правом верхнем углу);
at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).
Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.


Слайд 21Анимация
Для создания анимации в CSS3 используется свойство @keyframes
@keyframes имяАнимации
{ from {CSS

свойства} /* Стиль элемента до анимации */
to {CSS свойства} /*Стиль после завершения анимации */ }
После того, как анимация создана, необходимо добавить ее к элементу свойством animation, и указать в нем имя анимации (1 значение) и время (2 значение), в течении которого она будет выполняться.
@keyframes anim { from {margin-left:3px;} to {margin-left:500px;} } #wrap1 { animation:anim 4s 3; }
Посмотреть пример

Слайд 22Для промежуточных стадий выполнения анимации можно указывать стили, стадии отмечают процентами

выполнения
Свойства анимации CSS3
@keyframes - контейнер для определения анимации
animation - позволяет задать все значения для настройки выполнения анимации за одно определение
animation-name - имя анимации
animation-duration - скорость выполнения анимации в секундах (по умолчанию 0)
animation-timing-function - позволяет задать функцию смягчения отвечающую за плавность выполнения анимации (по умолчанию имеет значение ease)
animation-delay - задержка перед началом выполнения анимации (по умолчанию 0)
animation-iteration-count - количество повторов анимации (по умолчанию имеет значение 1)
animation-direction - при значении alternate в нечетные разы (1,3,5 ...) анимация будет проигрываться в нормальном, а в четные (2,4,6 ...) в обратном порядке. По умолчанию данное свойство имеет значение normal, при данном значении анимация всегда проигрывается в нормальном порядке

Слайд 23Переходы и трансформирование
Переключение между стилями можно делать через переходы (вариант анимации)
transition:

стиль время;
div { width:230px; transition:width 4s; }
div:hover { width:600px; }
transition-timing-function - функция смягчения отвечающую за плавность выполнения перехода
linear
ease (функция смягчения по умолчанию)
ease-in
ease-out
ease-in-out
cubic-bezier(x,x,x,x)
transition-delay – задержка перед выполнением

Слайд 24Трансформирование
Transform: вид_трансформации;
#el2 { transform: translate(180px,180px); }
Виды трансформации:
translate(x,y) - смещает элемент от

изначальной позиции по горизонтали и вертикали
translateX(x) - смещает элемент по горизонтали
translateY(y) - смещает элемент по вертикали
scale(x,y) - растягивает элемент по вертикали и горизонтали
scaleX(x) - растягивает элемент по горизонтали
scaleY(y) - растягивает элемент по вертикали
rotate(градусы) - поворачивает элемент по часовой стрелке
skew(x,y) - скашивает элемент по горизонтали и вертикали
skewX(x) - скашивает элемент по горизонтали
skewY(y) - скашивает элемент по вертикали
matrix(x,x,x,x,x,x) - совмещает все перечисленные выше методы в один.
Посмотреть пример

Слайд 25Работа с цветом и прозрачностью
hsl (hue, saturation, brightness)
hue – задается в

градусах поворота цветового круга (0-360)
saturation – насыщенность в процентах (0 - ненасыщенный)
brightness – яркость в процентах (0 - темный)
div { background-color:hsl(120,100%,80%); }
rgba(red, green, blue, opacity) – задает цвет и прозрачность одновременно (0 – прозрачный, 1 – непрозрачный)
button { background-color:rgba(200,0,0,0.6); }
hsla (hue, saturation, brightness, opacity) – одновременно задает цвет и прозрачность
opacity:x - прозрачность, где x может изменяться от 0.0 (полностью прозрачный элемент) до 1.0 (полностью непрозрачный элемент).
В IE прозрачность задается фильтром filter:alpha(opacity=x) (здесь 0 – прозрачный, 100 – непрозрачный элемент)

Слайд 26Боксовая модель и обрамление
padding - используется для задания величины отступа содержимого

элемента (content) от его границы (border)
border - позволяет задать элементу границу произвольной ширины, стиля и цвета
margin - позволяет задать величину внешнего отступа данного элемента от окружающих
Свойства width и height устанавливают ширину и высоту только блока content, а не элемента целиком

Слайд 27Обрамление элемента
border-style  - позволяет установить стиль для границ HTML элемента
solid  -

сплошная линия
dashed - пунктир
dotted  - границы будут нарисованы точками
double - двойная сплошная линия
border-color – задает цвет линий границы. Значение может быть названием цвета, функцией rgb, либо шестнадцатеричным заданием цвета
.border1 { border-style:double; border-color:green; }
border-width  - задает толщину линий, либо в пикселях (5px), либо константой (thin, medium, thick )
свойства могут также применяться к отдельным сторонам границы
.border2 { border-top-style:solid; border-width:2px; }
Краткая форма записи .border3 { border:2px solid green; }

Слайд 28Сглаженные (скругленные) углы и тени
border-radius – в пикселях задает радиус скругления

угла границы
#myDiv { border-radius:5px; }
Данное свойство может применяться как ко всем углам элемента, так и только к определенным:
border-top-left-radius делает сглаженным только верхний левый угол элемента;
border-top-right-radius делает сглаженным только верхний правый угол элемента;
border-bottom-left-radius делает сглаженным только нижний левый угол элемента;
border-bottom-right-radius делает сглаженным только нижний правый угол элемента.
box-shadow
#myDiv { box-shadow:6px 6px 6px 2px black inset;}

Слайд 29Пользовательское обрамление
border-image – позволяет добавить изображение в качестве границы элемента
border-image:путь(1) отступ(2)

ширина(3) повторение(4);
(1) путь к файлу с изображением
(2) надо указать величину отступа от каждого края изображения для того, чтобы разрезать изображения на 9 частей (верхний левый угол, верхняя сторона, верхний правый угол, левая сторона и т.д.);
(3) толщина границы в пикселях
(4) должно ли изображение повторяться (repeat), округляться (round) или растягиваться (stretch), чтобы заполнить границу элемента ПРИМЕР

Слайд 30font-family – устанавливает семейство шрифтов
В CSS шрифты делятся на следующие "семейства":
Serif шрифты

данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
Fantasy семейство "причудливых" шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact
Cursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.
font-size устанавливает размер шрифта HTML элементов
font-style позволяет сделать шрифт HTML элемента курсивным
font-weight позволяет изменять толщину шрифта

Работа с текстом и шрифтом

Слайд 31color – задает цвет текста элемента
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}
text-align

– выравнивание
по центру (значение center);
по левому краю (left);
по правому краю (right);
по ширине (justify).
p {text-align:center;}
text-decoration управляет подчеркиванием текста
подчеркнутый (значение underline)
перечеркнутый (line-through)
отображение над текстом элемента линии (overline)
убрать подчеркивания (none)


Слайд 32letter-spacing – позволяет увеличивать или уменьшать отступ между буквами в тексте

HTML элементов.
p {letter-spacing:10px;}
word-spacing – позволяет  увеличивать или уменьшать отступ между словами в тексте HTML элементов (p {word-spacing:15px;})
direction - устанавливает направление текста (ltr, rtl)
line-height – высота строки (normal, пиксели, %)
text-indent - величина отступа первого символа текста (пиксели, %)
text-transform - регистр букв текста элемента (none, capitalize, uppercase, lowercase)
vertical-align - вертикальное выравнивание элемента (sub, super, top, middle, bottom, пиксели, %)
white-space - как должны обрабатываться пробелы внутри элемента (normal, pre, nowrap)

Слайд 33text-shadow – добавляет тень к тексту (не работает в IE)
При задании

тени для текста необходимо указать:
величину смещения тени от текста по горизонтали и вертикали (может быть отрицательной)
радиус размытия
цвет тени
Можно применять несколько теней одновременно
#shadow1 { text-shadow:2px 2px 2px #FFAE00,
2px 2px 15px #1435AD; }
column-count разбивает текст на столбцы
column-gap  установливает величину отступа между столбцами текста
column-rule  задает ширину, цвет и стиль оформления пространства между столбцами
column-width позволяет указывать ширину столбцов текста
div { column-count:4; column-gap:50px;
column-rule:2px dotted #7F0055; column-width:150px;}

Похожие презентации

Ученики 7 класс филиала МКОУ СОШ с. Каменка в с. Ольшанка, Самойловского р-на Саратовской обл.Руководитель: Федотова Ирина Николаевна 270
1907-2012: СУДЬБА И СУДЬБЫ 331
Самостоятельная работа по теме Опорно-двигательная система 477
Введение в авиационную и ракетную технику 698
МКДОУ Тогучинского района Тогучинский детский сад №7 Калинка комбинированного вида 211
Построение тестовых программ для проверки подсистем управления памяти микропроцессоров 241

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика