Лекция 10. Основы CSS.
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 236 views

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

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

Statistics

Views

Total Views
236
Views on SlideShare
236
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Национальный аэрокосмический университетим. Н.Е.Жуковского «ХАИ»ОСНОВЫ РАБОТЫ В ИНТЕРНЕТ.ЛЕКЦИЯ №10.CSS. Каскадные таблицы стилей испособы их подключения. Классы.Идентификаторы. Псевдоклассы.Фурманов Алексей Аркадиевич
  • CSS (англ. Cascading Style Sheets —каскадные таблицы стилей) — технологияописания внешнего вида документа,написанного на HTML.Стиль – это набор визуальных свойствэлементов/тэгов HTML с сопоставленнымиему значениями этих свойств.Предназначен для изменения графическихсвойств элемента.CSS
  • селектор[: псевдокласс] [, селектор[: псевдокласс]] […n]{свойство :значение [ значение] […n] ;[свойство :значение [ значение] […n] ;][свойство :значение [ значение] […n] ;][…n]}селектор = тэг|[тэг].имя_класса|#идентификатор_элементаНапример:table.mytable {border: 1px solid black;}в HTML:<TABLE class=“mytable”><TR><TD>…Структура стиля
  • 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
  • 2) Внедрённые таблицы стилей:Внедрённая таблица стилей представляет собой фрагменттаблицы стилей, который подключается непосредственно восновной файл .htmlНапример:<html><head><style type="text/css”>.mylist{color:red;}</style></head><body><ol class=“mylist”>…Способы подключения 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>)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 (зелёный)-->Приоритеты применения стилей
  • Предназначены для установки одинакового стиля группе однотипныхтэгов.Например:<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”> <!-– здесь будет ЗЕЛЁНЫЙ :) -->Классы
  • Предназначены для установки стиля одному конкретному тэгу.Например:<style type="text/css”>#myredtable {color:red;}</style><table id=“myredtable”><table id=“myredtable”> <!-– НЕЛЬЗЯ!!! --><div id=“myredtable”> <!-– НЕЛЬЗЯ!!! -->Допускается только один тэг с таким идентификатором!!!Идентификаторы
  • Предназначены для установки графических характеристик элемента,которому присущи поведенческие свойства.Например:<style type="text/css”>A.mylink:hover {color:red;}</style><a class=“mylink”>Cсылка при наведении станет красной</a>Существующие псевдоклассы:link - непосещенные ссылкиvisited - посещенные ссылкиhover - ссылки при наведении на них курсора мышиactive - активные ссылкиfocus – элемент с фокусом вводаПсевдоклассы
  • Предназначены для задания стиля вложенным тэгам в иерархии тэговдокумента.Например:<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>Контекстные селекторы