Национальный аэрокосмический университетим. Н.Е.Жуковского «ХАИ»ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.ЛЕКЦИЯ №10.CSS. Каскадные таблицы...
CSS (англ. Cascading Style Sheets —каскадные таблицы стилей) — технологияописания внешнего вида документа,написанного на H...
селектор[: псевдокласс] [, селектор[: псевдокласс]] […n]{свойство :значение [ значение] […n] ;[свойство :значение [ значен...
1) Внешние таблицы стилей:Внешняя таблица стилей представляет собой отдельный файл*.css, в котором описаны все стили и это...
2) Внедрённые таблицы стилей:Внедрённая таблица стилей представляет собой фрагменттаблицы стилей, который подключается неп...
3)При помощи атрибута STYLE:Например:<body><ol style=“color:red;backgroud-color:black;”>…Способы подключения CSS - 3
1)Основной атрибут (например: <TD color=red>)2)Атрибут STYLE (<TD style=“color:red”>)3)Внедрённые стили (<STYLE >color:red...
Предназначены для установки одинакового стиля группе однотипныхтэгов.Например:<style type="text/css”>.myredclass {color:re...
Предназначены для установки стиля одному конкретному тэгу.Например:<style type="text/css”>#myredtable {color:red;}</style>...
Предназначены для установки графических характеристик элемента,которому присущи поведенческие свойства.Например:<style typ...
Предназначены для задания стиля вложенным тэгам в иерархии тэговдокумента.Например:<style type="text/css”>div.mydiv table ...
Upcoming SlideShare
Loading in …5
×

Лекция 10. Основы CSS.

329 views

Published on

Основы работы в интернет

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
329
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Лекция 10. Основы CSS.

  1. 1. Национальный аэрокосмический университетим. Н.Е.Жуковского «ХАИ»ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.ЛЕКЦИЯ №10.CSS. Каскадные таблицы стилей испособы их подключения. Классы.Идентификаторы. Псевдоклассы.Фурманов Алексей Аркадиевич
  2. 2. CSS (англ. Cascading Style Sheets —каскадные таблицы стилей) — технологияописания внешнего вида документа,написанного на HTML.Стиль – это набор визуальных свойствэлементов/тэгов HTML с сопоставленнымиему значениями этих свойств.Предназначен для изменения графическихсвойств элемента.CSS
  3. 3. селектор[: псевдокласс] [, селектор[: псевдокласс]] […n]{свойство :значение [ значение] […n] ;[свойство :значение [ значение] […n] ;][свойство :значение [ значение] […n] ;][…n]}селектор = тэг|[тэг].имя_класса|#идентификатор_элементаНапример:table.mytable {border: 1px solid black;}в HTML:<TABLE class=“mytable”><TR><TD>…Структура стиля
  4. 4. 1) Внешние таблицы стилей:Внешняя таблица стилей представляет собой отдельный файл*.css, в котором описаны все стили и этот файл подключается восновной файл .html при помощи специальной команды.Например:<LINK rel="stylesheet" type="text/css" href="style.css"media="all"/>media="all“ = media="screen,print”----------------------------<html><head><title>test</title><link rel="stylesheet" type="text/css" href="print.css"media="print"/></head><body>…Способы подключения CSS - 1
  5. 5. 2) Внедрённые таблицы стилей:Внедрённая таблица стилей представляет собой фрагменттаблицы стилей, который подключается непосредственно восновной файл .htmlНапример:<html><head><style type="text/css”>.mylist{color:red;}</style></head><body><ol class=“mylist”>…Способы подключения CSS - 2
  6. 6. 3)При помощи атрибута STYLE:Например:<body><ol style=“color:red;backgroud-color:black;”>…Способы подключения CSS - 3
  7. 7. 1)Основной атрибут (например: <TD color=red>)2)Атрибут STYLE (<TD style=“color:red”>)3)Внедрённые стили (<STYLE >color:red</STYLE>)4)Внешние стили (<LINK href=“style.css”>)Например:<style type="text/css”>.mylist{color:red;}</style><ol class=“mylist” style=“color:green;” color=“blue” ><!--Цвет будет BLUE (синий)--><ol class=“mylist” style=“color:green;”><!--Цвет будет GREEN (зелёный)-->Приоритеты применения стилей
  8. 8. Предназначены для установки одинакового стиля группе однотипныхтэгов.Например:<style type="text/css”>.myredclass {color:red;}</style><table class=“myredclass”> <!-– КРАСНЫЙ --><ol class=“myredclass” > <!-– КРАСНЫЙ --><div class=“myredclass”> <!-– КРАСНЫЙ -->-------<style type="text/css”>.myredclass {color:red;}table.myredclass {color:green;}</style><div class=“myredclass”> <!-– КРАСНЫЙ --><table class=“myredclass”> <!-– здесь будет ЗЕЛЁНЫЙ :) -->Классы
  9. 9. Предназначены для установки стиля одному конкретному тэгу.Например:<style type="text/css”>#myredtable {color:red;}</style><table id=“myredtable”><table id=“myredtable”> <!-– НЕЛЬЗЯ!!! --><div id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->Допускается только один тэг с таким идентификатором!!!Идентификаторы
  10. 10. Предназначены для установки графических характеристик элемента,которому присущи поведенческие свойства.Например:<style type="text/css”>A.mylink:hover {color:red;}</style><a class=“mylink”>Cсылка при наведении станет красной</a>Существующие псевдоклассы:link - непосещенные ссылкиvisited - посещенные ссылкиhover - ссылки при наведении на них курсора мышиactive - активные ссылкиfocus – элемент с фокусом вводаПсевдоклассы
  11. 11. Предназначены для задания стиля вложенным тэгам в иерархии тэговдокумента.Например:<style type="text/css”>div.mydiv table {border:2px dashed red;}div.mydiv table td {color:green;}</style><!-- ПРОСТАЯ ТАБЛИЦА --><table><tr><td>test</td><tr></table><div class=“mydiv”><!-- ВЛОЖЕННАЯ ТАБЛИЦА --><table><tr><td>test</td><tr></table></div>Контекстные селекторы

×