Лекции и лабораторные работы Направление «Математика и компьютерные науки»


 CSS  Лекция 3. Каскадные таблицы стилей



жүктеу 0.98 Mb.
Pdf просмотр
бет4/16
Дата10.11.2022
өлшемі0.98 Mb.
#23669
түріЛекции
1   2   3   4   5   6   7   8   9   ...   16
web
g5yv5hz1efkpkh4lsevuj0f34wfq6i19vs462svasr643j - копия
2. CSS 
Лекция 3. Каскадные таблицы стилей 
3.1. Синтаксис CSS 
Определение. Таблицы стилей (или каскадные таблицы стилей, CSS) – 
это описание правил, задающих параметры представления отдельных эле-
ментов на языке HTML 
CSS появились одновременно с HTML 4.0 (Dynamic HTML). Сам тер-
мин «каскадные таблицы стилей» был предложен в 1994 году. Все объявле-
ния CSS называются селекторами, записываются в фигурных скобках. 
Примеры использования синтаксиса. 


18 
1. Для того чтобы все заголовки первого уровня (h1) были зеленого 
цвета с размером шрифта 15 пикселей, надо записать 
h1 {color: green; size: 15px;} 
Свойства разделяются точкой с запятой 
2. Одно свойство можно присвоить нескольким тэгам
h1, h2, h3 {color: green; size: 15px;} 
3. Свойство наследования. Если по h3 текст должен быть зеленым, то и 
между em он тоже будет желтым. 

Часть 4.Очень большая и хорошая

 
4. Контекстные селекторы. Если необходимо, чтобы текст между тега-
ми em, которые между h3, был зеленым, а в других случаях каким-то другим, 
то надо задать 
h3 em {color:green} 
5. Использование классов.
Определили h1: 
h1 {color: green; size: 15px;} 
Чтобы некоторые заголовки были красными, необходимо задать 
h2.red {color:red} 
Использование: 

Это красный заголовок

 
Замечание. В таблице стилей можно указать просто без указания роди-
тельского тэга: 
.red {color:red} 
6. Можно использовать маску * для задания всех селекторов 
7. Еще один символ маски >. Задает свойства для определенных подэ-
лементов 
ol>li {color:green} 
8. Для определения элемента в DHTML используется id. Поэтому мож-
но задавать свойства через идентификаторы 
#cont {color:yellow} 


19 
И когда встретится идентификатор cont, то текст этого элемента будет 
желтым. 
9. Для создания прямоугольной области используется тег 

10. Для создания строчной области используется тег . 
11. Использование псевдоклассов. Динамические псевдо-классы: 
:hover, :active, и :focus. 
Пример использования псевдо-классов. Указав следующие описание 
стилей: 
a:hover { background: yellow } 
получим, что при наведении курсора на ссылку, область под ней станет 
желтой. 

жүктеу 0.98 Mb.

Поделитесь с Вашими друзьями:
1   2   3   4   5   6   7   8   9   ...   16




©emirb.org 2022
әкімшілігінің қараңыз

    Басты бет