Каскадные таблицы стилей – CSS. (Тема 8) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Каскадные таблицы стилей – CSS. (Тема 8), слайд №1

Каскадные таблицы стилей – CSS. (Тема 8), слайд №2

Каскадные таблицы стилей – CSS. (Тема 8), слайд №3

Каскадные таблицы стилей – CSS. (Тема 8), слайд №4

Каскадные таблицы стилей – CSS. (Тема 8), слайд №5

Каскадные таблицы стилей – CSS. (Тема 8), слайд №6

Каскадные таблицы стилей – CSS. (Тема 8), слайд №7

Каскадные таблицы стилей – CSS. (Тема 8), слайд №8

Каскадные таблицы стилей – CSS. (Тема 8), слайд №9

Каскадные таблицы стилей – CSS. (Тема 8), слайд №10

Каскадные таблицы стилей – CSS. (Тема 8), слайд №11

Каскадные таблицы стилей – CSS. (Тема 8), слайд №12

Каскадные таблицы стилей – CSS. (Тема 8), слайд №13

Каскадные таблицы стилей – CSS. (Тема 8), слайд №14

Каскадные таблицы стилей – CSS. (Тема 8), слайд №15

Каскадные таблицы стилей – CSS. (Тема 8), слайд №16

Каскадные таблицы стилей – CSS. (Тема 8), слайд №17

Каскадные таблицы стилей – CSS. (Тема 8), слайд №18

Каскадные таблицы стилей – CSS. (Тема 8), слайд №19

Каскадные таблицы стилей – CSS. (Тема 8), слайд №20

Каскадные таблицы стилей – CSS. (Тема 8), слайд №21

Каскадные таблицы стилей – CSS. (Тема 8), слайд №22

Каскадные таблицы стилей – CSS. (Тема 8), слайд №23

Каскадные таблицы стилей – CSS. (Тема 8), слайд №24

Каскадные таблицы стилей – CSS. (Тема 8), слайд №25

Каскадные таблицы стилей – CSS. (Тема 8), слайд №26

Каскадные таблицы стилей – CSS. (Тема 8), слайд №27

Каскадные таблицы стилей – CSS. (Тема 8), слайд №28

Каскадные таблицы стилей – CSS. (Тема 8), слайд №29

Каскадные таблицы стилей – CSS. (Тема 8), слайд №30

Каскадные таблицы стилей – CSS. (Тема 8), слайд №31

Каскадные таблицы стилей – CSS. (Тема 8), слайд №32

Каскадные таблицы стилей – CSS. (Тема 8), слайд №33

Каскадные таблицы стилей – CSS. (Тема 8), слайд №34

Каскадные таблицы стилей – CSS. (Тема 8), слайд №35

Каскадные таблицы стилей – CSS. (Тема 8), слайд №36

Каскадные таблицы стилей – CSS. (Тема 8), слайд №37

Каскадные таблицы стилей – CSS. (Тема 8), слайд №38

Каскадные таблицы стилей – CSS. (Тема 8), слайд №39

Каскадные таблицы стилей – CSS. (Тема 8), слайд №40

Каскадные таблицы стилей – CSS. (Тема 8), слайд №41

Каскадные таблицы стилей – CSS. (Тема 8), слайд №42

Каскадные таблицы стилей – CSS. (Тема 8), слайд №43

Каскадные таблицы стилей – CSS. (Тема 8), слайд №44

Каскадные таблицы стилей – CSS. (Тема 8), слайд №45

Каскадные таблицы стилей – CSS. (Тема 8), слайд №46

Каскадные таблицы стилей – CSS. (Тема 8), слайд №47

Каскадные таблицы стилей – CSS. (Тема 8), слайд №48

Каскадные таблицы стилей – CSS. (Тема 8), слайд №49

Каскадные таблицы стилей – CSS. (Тема 8), слайд №50

Каскадные таблицы стилей – CSS. (Тема 8), слайд №51

Каскадные таблицы стилей – CSS. (Тема 8), слайд №52

Каскадные таблицы стилей – CSS. (Тема 8), слайд №53

Каскадные таблицы стилей – CSS. (Тема 8), слайд №54

Каскадные таблицы стилей – CSS. (Тема 8), слайд №55

Каскадные таблицы стилей – CSS. (Тема 8), слайд №56

Каскадные таблицы стилей – CSS. (Тема 8), слайд №57

Каскадные таблицы стилей – CSS. (Тема 8), слайд №58

Каскадные таблицы стилей – CSS. (Тема 8), слайд №59

Каскадные таблицы стилей – CSS. (Тема 8), слайд №60

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Каскадные таблицы стилей – CSS. (Тема 8). Доклад-сообщение содержит 60 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Tema 8. Каскадные таблицы стилей – CSS. Продолжение

Слайд 2

Описание слайда:

СОДЕРЖАНИЕ Селекторы типа id и class Псевдо-элементы Псевдо-классы Другие свойства и значения в CSS

Слайд 3

Описание слайда:

ГЛОБАЛЬНЫЙ АТРИБУТ ID В HTML В HTML5 глобальный атрибут может быть использован в любом HTML-элементе Примеры глобальных атрибутов: style, id, class, title etc. Атрибут id указывает уникальный идентификатор, для HTML элемента (значение должно быть уникальным в пределах HTML документа) Атрибут id является самым используемым атрибутом в определении стиля в таблице стилей или в манипулировании каким-то элементом в JavaScript-е с указанным идентификатором Специалисты не рекомендуют чрезмерное использование селекторов типа id при определении стилей!!! Он поддерживается всеми браузерами Основная форма: , где значение зн_id должно содержать хотя бы один символ, не содержит пробелов, не начинаться на цифру и делается различие между заглавными и строчными буквами

Слайд 4

Описание слайда:

СЕЛЕКТОР ТИПА „ID” Селектор id использует атрибут id определенного HTML-тега, с целью нахождения указанного элемента Для нахождения элемента с указанным id, пишется символ #(хэш), после которого следует id-значение Пример: Ниже написанный стиль будет применен HTML-элементу с id=„et1„ #et1 {text-align:center; color:red; } … Изначально топонимы с элементом … исследователи предполагают, что название города имеет не романское, а тюркское происхождение.…

Слайд 5

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 6

Описание слайда:

СЕЛЕКТОР ТИПА „CLASS” Селектор class использует глобальный HTML-атрибут - class Селектор „class” находит элементы указанного типа классом (для определения стилей рекомендуется использование классов) Для того чтобы найти элементы, определенные каким-то классом, и определить стили, пишется символ . (точка), за которым следует название класса Пример: .alinCul {text-align:center; color:red;} …

Слайд 7

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 8

Описание слайда:

СЕЛЕКТОР ТИПА „CLASS” Есть возможность указания что конкретные HTML-элементы будут затронуты каким-то классом Пример: h1.alinCul {text-align:center; color:red;} … Кишинёв — столица и крупнейший город Молдавии Изначально топонимы … поэтому некоторые исследователи предполагают, что название города имеет не романское, а тюркское происхождение.…

Слайд 9

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 10

Описание слайда:

ОПРЕДЕЛЕНИЕ ДВУХ КЛАССОВ ДЛЯ ОДНОГО HTML ЭЛЕМЕНТА Для определения двух или более классов HTML элементу используется пробел между именами классов, в HTML кодах Пример: Для следующего HTML кода Проверяем применение двух классов. Определим следующие стили: p { padding: 10px;} .blue { background-color: #aaddff; color: rgb(92, 77, 144); text-align: center; font-weight: bold; } .nice-box { border-radius: 5px; box-shadow: 3px 3px 4px #cccccc; border-radius: 15px;}

Слайд 11

Описание слайда:

РЕЗУЛЬТАТ

Слайд 12

Описание слайда:

ПСЕВДО-КЛАССЫ В CSS Псевдо-класс используется для определения особого состояния какого-то элемента Используется для: Определения стиля элемента в том случае когда пользователь наводит курсор над ним Определение разных стилей для посещённой и не посещенной ссылки и т.д. Основная форма: selector:pseudo-class { свойство:значение; }

Слайд 13

Описание слайда:

ПРИМЕР ПСЕВДО-КЛАССОВ Разное представление ссылок Пример: body { background-image:url(../imagini/fluturi.png); padding-top:10px; padding-left:10px;} h1 { text-align:center; color:purple; text-transform: uppercase; text-shadow: 2px 2px 3px #FF0000;} /* не посещенная ссылка */ a:link { color: #00ff00;} /* посещенная ссылка */ a:visited { color: #00aa00;} /* наведенный курсор на ссылку */ a:hover { color: #aa00ff;} /* выбранная ссылка */ a:active { color: #0000ff;}

Слайд 14

Описание слайда:

ПОРЯДОК ОПРЕДЕЛЕНИЯ Тогда когда определяются все события, при помощи псевдо-элементов для ссылок, имеет значение порядок их определения: a:link { ... } a:visited { ... } a:hover { ... } a:active { ... } Иногда изменение порядка определения стилей псевдо-классов, может привести к неправильному применению значений свойств

Слайд 15

Описание слайда:

Файл .html Файл .html Fluturi Бабочки... Самой многочисленной … условиях. Больше информаций смотри здесь... Гусеницы...

Слайд 16

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 17

Описание слайда:

ПСЕВДО-КЛАССЫ И КЛАССЫ CSS Псевдо-классы и классы css можно комбинировать Пример (mov): a.evidentiat:hover { color: #aa00ff; font-size:150%;} В HTML-файле со следующими строками: Больше информаций смотри здесь... Гусеницы...

Слайд 18

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 19

Описание слайда:

ПСЕВДО-КЛАСС „FIRST-CHILD” И „LAST-CHILD” Псевдо-класс first-child позволяет выбрать первый элемент-потомок А псевдо-класс last-child — позволяет выбрать последний элемент-потомок Пример: li:last-child { ... }Этот селектор выберет последний элемент списка. … 1 2 3 4 5 …, и если определить стиль так: li { background-color: white;} li:first-child { background-color: red;} li:last-child { background-color: yellow;}

Слайд 20

Описание слайда:

РЕЗУЛЬТАТ

Слайд 21

Описание слайда:

ПСЕВДОКЛАСС :NTH-CHILD Псевдо-классы из предыдущего примера относятся к семейству псевдо-классов, помогающих выбирать элементы по их расположению С помощью псевдо-класса nth-child можно выбирать теги по порядковому номеру, не используя классы Синтаксис псевдо-класса: селектор: nth-child(выражение), где выражением может быть число или формула Например: li:nth-child(2) { ... } - выберет второй элемент списка li:nth-child(4) { ... } - выберет четвёртый элемент списка li:nth-child(2n) { ... } - выберет все чётные элементы

Слайд 22

Описание слайда:

Псевдокласс :focus Псевдо-класс :focus позволяет выбрать элемент, который в данный момент в фокусе Например, текстовое поле, в которое установлен курсор, находится в фокусе В фокусе могут быть не только текстовые поля. Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать и ссылки Пример: input: focus { border-color: red;}, если применить к …Как вас зовут?… Без фокуса: С фокусом:

Слайд 23

Описание слайда:

ДРУГИЕ ПСЕВДОКЛАССЫ Список и описание других псевдо-классов смотрите по ссылке:

Слайд 24

Описание слайда:

УСЛОВНЫЕ СЕЛЕКТОРЫ … или селекторы атрибутов - чаще всего такие селекторы используются при работе с формами, так как поля вводов в форме имеют атрибут type с разными значениями Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут] Примеры селекторов: input[checked] { ... } - селектор выберет поля формы, у которых есть атрибут checked input[type="text"] { ... } - селектор выберет поля формы, у которых атрибут type имеет значение text

Слайд 25

Описание слайда:

ПРИМЕР ОПРЕДЕЛЕНИЯ СЕЛЕКТОРОВ-АТРИБУТОВ Как вас зовут? Определяем стили условно: input[type="text"] { background-color: rgb(226, 255, 55);} input[type="submit"] { border-color: rgb(142, 62, 167); background-color: rgb(217, 187, 206); box-shadow: 3px 3px 4px rgb(142, 62, 167); border-radius: 10px; padding: 10px;}

Слайд 26

Описание слайда:

РЕЗУЛЬТАТ

Слайд 27

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТЫ CSS Псевдо-элемент CSS используется для определения стиля определенной части элемента Псевдо-элемент может быть использован для: Определения стиля первой буквы или первой строки элемента Вставка контента до и/или после, контента определенного элемента Основная форма: selector::pseudo-element { свойство:значение; }

Слайд 28

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТ „::first-line” Используется для определения стиля первой строки текста Может быть использован и для блока элементов Свойства которые можно применить псевдо-элементу „::first-line”: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

Слайд 29

Описание слайда:

ПРИМЕР ПСЕВДО-ЭЛЕМЕНТА „::first-line” p::first-line { color: #9922cc; font-size: 16px; font-weight: bold; font-variant: small-caps; } Результат:

Слайд 30

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТ „::first-letter” Используется для определения стиля первого символа в тексте Может быть использован и для блока элементов Свойства которые можно применить псевдо-элементу „::first-letter”: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (numai dacă "float" este "none") text-transform line-height float clear

Слайд 31

Описание слайда:

ПРИМЕР ПСЕВДО-ЭЛЕМЕНТА „::first-letter” p::first-letter { color: #ff11ee; font-size: 40px; } Результат (многочисленного применения псевдоэлементов):

Слайд 32

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТЫ И КЛАССЫ CSS Пример: p.prim::first-letter { color: #ff11ee; font-size: 40px; } Часть .html файла: … Самой многочисленной … стихи. Бабочки … …

Слайд 33

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 34

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТЫ „::before” и „::after” „::before” используется для вставки какого-то контента перед элементом „::after” используется для вставки какого-то контента после элемента Пример: h1::before {content: url(../imagini/fluture_mic.png);} h1::after {content: url(../imagini/fluture_mic.png);}

Слайд 35

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 36

Описание слайда:

ПСЕВДО-ЭЛЕМЕНТ ::selection Псевдо-элемент ::selection выделяет часть HTML-элемента, ту часть которую выделяет пользователь на странице (значения по умолчанию белый текст на синем фоне) Псевдо-элемент ::selection может быть применен для следующих CSS-свойств: color, background, cursor Пример: ::selection{ color:#fff; background-color:brown; }

Слайд 37

Описание слайда:

CSS СВОЙСТВА ДЛЯ ССЫЛОК Ссылки можно стилизовать разными способами Используя псевдо-классы (a:link, a:visited, a:hover, a:active) Используя любые CSS свойства (color, background, font-family etc.) Пример декорирования текста: a:link {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: overline;}

Слайд 38

Описание слайда:

ОПРЕДЕЛЕНИЕ ЦВЕТА ФОНА И ТЕКСТА ССЫЛКИ a:hover { background-color:#7700aa; color:white;} a:active { background-color:#aa7700; color:white;}

Слайд 39

Описание слайда:

ОПРЕДЕЛЕНИЕ СТИЛЕЙ ДЛЯ СПИСКОВ Свойство “list-style-type” используется для определения маркировки списка Свойство „list-style-image” используется для определения в качестве маркера для списка - изображение Пример: ul { list-style-type:square;} ul.nou { list-style-image: url("../imagini/square.png");} ol { list-style-type:lower-alpha;}

Слайд 40

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 41

Описание слайда:

СТИЛИ ДЛЯ ГРАНИЦ Используя свойство „border” можно определить стиль, толщину и цвет границы какого-то элемента Свойство „border-style” определяет стиль границы Свойство „border-width” – определяет толщину границы Свойство „border-color” – определяет цвет границы

Слайд 42

Описание слайда:

ПРИМЕР ДЛЯ СОЙСТВА «BORDER» body{background: radial-gradient(pink, white, pink);} p.none {border-style: none;} p.dotted {border-style: dotted; border-color: purple; border-width: 7px;} p.dashed {border-style: dashed; border-color: purple; border-width: 7px;} p.solid {border-style: solid; border-color: purple; border-width: 7px;} p.double {border-style: double; border-color: purple; border-width: 7px;} p.groove {border-style: groove; border-color: purple; border-width: 7px;} p.ridge {border-style: ridge; border-color: purple; border-width: 7px; border-radius: 25px;} p.inset {border-style: inset; border-color: purple; border-width: 7px;} p.outset {border-style: outset; border-color: purple; border-width: 7px;} p.hidden {border-style: hidden; border-color: purple; border-width: 7px;} p.mixt { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; border-color: purple; border-width: 7px;}

Слайд 43

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 44

Описание слайда:

СОКРАЩЕННАЯ ФОРМА СВОЙСТВА „BORDER” Сокращенная форма, „border”, может быть использована если соблюдается следующий порядок свойств border-width border-style (обязательно) border-color Пример: h1 {border:5px double pink;} Результат:

Слайд 45

Описание слайда:

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ Свойство „border” используется для определения стиля границы элементов „table”, „th” и „td” table, th, td {border:2px solid magenta;} Если определяется граница для таблицы и ее ячеек – граница будет двойной. В данном случае, для удаления этого недостатка, используется свойство „border-collapse” Свойство „border-collapse” используется с целью „склеивания” границ table, th, td {border:2px solid magenta;} table {border-collapse:collapse;}

Слайд 46

Описание слайда:

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ Свойство „width” и „height” используется для определения ширины и высоты таблицы и ее элементов table { border-collapse:collapse; width: 50%;} th {height: 50px; background-color:#FFC7EE;} td {height: 30px;}

Слайд 47

Описание слайда:

РЕЗУЛЬТАТ ПРИМЕРА ДЛЯ СВОЙСТВ „width” и „height”

Слайд 48

Описание слайда:

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ Выравнивание текста в ячейках таблицы осуществляется с помощью свойств „text-align” , „vertical-align” Определение расстояния от границы до содержания таблицы определяется с помощью свойства „padding” Пример: table {border-collapse:collapse; width: 50%;} th {height: 50px; background-color:#FFC7EE; padding: 10px;} td {height: 30px; vertical-align:middle; text-align:center; padding:10px;}

Слайд 49

Описание слайда:

РЕЗУЛЬТАТ ПРМЕРА ДЛЯ СВОЙСТВ „text-align” , „vertical-align”, „padding”

Слайд 50

Описание слайда:

ОПРЕДЕЛЕНИЕ ПРОСТРАНСТВА ОТ СОДЕРЖИМОГО ДО ГРАНИЦЫ Свойства padding определяют пространство между контентом и границей Свойства padding «очищают» зону вокруг контента внутри границы определенного элемента Свойства «background» будут затрагивать данные свойства Может быть определен размер пространства верхней стороны, с правой стороны, нижней стороны и левой Толщина свободного пространства можно определить несколькими способами: pixels, pt, em, % и др.

Слайд 51

Описание слайда:

ПРИМЕР p { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; } Или можно определить пространство для верхней и нижней стороны, вместе и для левой-правой стороны - вместе: p{padding: 25px 50px;} Или все 4 сразу: p{padding: 25px;}

Слайд 52

Описание слайда:

СВОЙСТВО „DISPLAY” Свойство „display” используется для определения типа контейнера для вывода HTML-элемента Данное свойство поддерживается почти что всеми браузерами (частично, несколько значений данного свойства не поддерживаются IE) Рекомендуемый синтаксис - display: значение Список значений для данного свойства смотрите:

Слайд 53

Описание слайда:

ПРИМЕР ПРИМЕНЕНИЯ СВОЙСТВА О компании Товары Клиенты о нас Контакты Результат:

Слайд 54

Описание слайда:

ПРИМЕР ПРИМЕНЕНИЯ DISPLAY. СТИЛИ .meniu{ width: 100%; height: 50px; margin: 5px auto; background: #663300; } .meniu ul li{ list-style: none; display: inline-block; font: bold 14px/30px Georgia, serif; /*font-weight font-size/line-height font-family*/ } .meniu ul li:first-child{ padding-left:120px; } .meniu ul li:last-child{ padding-right:120px; } .meniu ul li a{ text-decoration: none; display: block; padding: 5px 10px; margin: 5px; color: #FFFFFF; vertical-align: middle; } .meniu ul li a:hover{ box-shadow:3px 5px 3px #990000; font-size: 105%; }

Слайд 55

Описание слайда:

ДРУГИЕ ЗНАЧЕНИЯ ДЛЯ СВОЙСТВА „DISPLAY” display:table задает элементу тип таблица. Особенности табличных элементов: можно задавать ширину, высоту, рамки, отступы; по умолчанию ширина зависит от содержания; Табличные элементы похожи на блочные за исключением ширины по умолчанию. Любая таблица содержит элементы строка таблицы, внутри которых должны содержаться элементы ячейка таблицы. Соответствие тегов таблицы значениям display: — display:table; — display:table-row; — display:table-cell;

Слайд 56

Описание слайда:

ПРИМЕР Код растения Название растения Короткое описание Цена растения Фото растения 111222 Белая орхидея Белая орхидея, приобретенная в цветочном магазине, уже адаптирована к домашним условиям. Орхидеи любят тепло и солнце, …. 250 лей

Слайд 57

Описание слайда:

СТИЛИ div {margin: 5px; padding: 5px; border: 1px dotted white; } .table { background: #d9edf7; border-color: #3a87ad; display: table; } .row { background: #f2dede; border-color: #b94a48; display:table-row; } .cell { background: #fbeed5; border-color: #c09853; padding: 5px 5px; display:table-cell; } .table .row .antet { font-weight: bold; text-align: center; vertical-align: middle; } .table .row .cell img { width: 50px; height: 50px; margin: 5px 10px; } Результат:

Слайд 58

Описание слайда:

ЗНАЧЕНИЕ „NONE” СВОЙСТВА „display” Значение none свойства display используется очень часто С его помощью можно скрыть элемент, как будто его и не было. Скрытый элемент не отображается и не занимает места на странице Данное свойство применяется при создании выпадающих меню, динамических галерей Есть еще одно CSS-свойство, которое используется для сокрытия элементов. Это свойство visibility со значением hidden. Оно «прячет» элемент — он становится невидимым, но занимает место на странице Vezi exemplu meniu expandabil

Слайд 59

Описание слайда:

ПРИМЕР li.top ul.submenu { display: none; } - прячет список-подменю li.top:hover ul.submenu { display: block; } - если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю