🗊Презентация Каскадные таблицы стилей – CSS. (Тема 8)

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

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

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

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

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

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

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

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

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

ОПРЕДЕЛЕНИЕ ДВУХ КЛАССОВ ДЛЯ ОДНОГО HTML ЭЛЕМЕНТА Для определения двух или более классов HTML элементу используется пробел между именами классов, в HTML кодах Пример: Для следующего HTML кода <p class="blue nice-box">Проверяем применение двух классов.</p> Определим следующие стили: 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;}

РЕЗУЛЬТАТ

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

ПРИМЕР ПСЕВДО-КЛАССОВ Разное представление ссылок Пример: 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;}

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

Файл .html Файл .html <!DOCTYPE html> <head> <title>Fluturi</title> <link rel="stylesheet" type="text/css" href="stiluri/stil_link.css"> </head> <body> <h2>Бабочки...</h2> <p>Самой многочисленной … условиях.</p> <a href="http://www.clopotel.ro/enciclopedia/Insecte_Fluture-54.html" alt="Информация о бабочках">Больше информаций смотри здесь...</a> <br /> <a href="http://www.daunatori.info/05/omizile-cotarii/" alt="Информация о гусеницах">Гусеницы...</a> </body>

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

ПСЕВДО-КЛАССЫ И КЛАССЫ CSS Псевдо-классы и классы css можно комбинировать Пример (mov): a.evidentiat:hover { color: #aa00ff; font-size:150%;} В HTML-файле со следующими строками: <a class="evidentiat" href="http://www.clopotel.ro/enciclopedia/Insecte_Fluture-54.html" alt="Информация о бабочках">Больше информаций смотри здесь...</a> <br /> <a href="http://www.daunatori.info/05/omizile-cotarii/" alt="Информация о гусеницах">Гусеницы...</a>

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

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

РЕЗУЛЬТАТ

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

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

ДРУГИЕ ПСЕВДОКЛАССЫ Список и описание других псевдо-классов смотрите по ссылке: http://www.w3schools.com/css/css_pseudo_elements.asp

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

ПРИМЕР ОПРЕДЕЛЕНИЯ СЕЛЕКТОРОВ-АТРИБУТОВ <form> <label>Как вас зовут?<br /><input type="text" name="nume" /></label> <input type="submit" value="Сохранить" /> </form> Определяем стили условно: 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;}

РЕЗУЛЬТАТ

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

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

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

ПСЕВДО-ЭЛЕМЕНТ „::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

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

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

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

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

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

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

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;}

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

ОПРЕДЕЛЕНИЕ СТИЛЕЙ ДЛЯ СПИСКОВ Свойство “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;}

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

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

ПРИМЕР ДЛЯ СОЙСТВА «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;}

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

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

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ Свойство „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;}

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

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

СВОЙСТВА ДЛЯ ТАБЛИЦ И ЕЕ ЭЛЕМЕНТОВ Выравнивание текста в ячейках таблицы осуществляется с помощью свойств „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;}

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

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

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

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

ПРИМЕР ПРИМЕНЕНИЯ СВОЙСТВА <div class="meniu"> <ul> <li><a href="#1">О компании</a></li> <li><a href="#2">Товары</a></li> <li><a href="#3">Клиенты о нас</a></li> <li><a href="contacte.html">Контакты</a></li> </ul> </div> Результат:

ПРИМЕР ПРИМЕНЕНИЯ 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%; }

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

ПРИМЕР <div class="table"> <div class="row"> <div class="cell antet">Код растения</div> <div class="cell antet">Название растения</div> <div class="cell antet">Короткое описание</div> <div class="cell antet">Цена растения</div> <div class="cell antet">Фото растения</div> </div> <div class="row"> <div class="cell">111222</div> <div class="cell">Белая орхидея</div> <div class="cell">Белая орхидея, приобретенная в цветочном магазине, уже адаптирована к домашним условиям. Орхидеи любят тепло и солнце, ….</div> <div class="cell">250 лей</div> <div class="cell"><img src="orchid6.jpg" alt="Изображение" /></div> </div> </div>

СТИЛИ 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; } Результат:

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

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

!!! 3 понятия выученные сегодня 2 вопроса которые возникли сегодня 1 предложение для следующей пары