Пример файла CSS (выполнить практически)

Приведем простой и наглядный пример файла CSS, описывающего стили отображения элементов web-страницы. Данный файл представляет собой обычный текстовый документ, набранный в редакторе Notepad и сохраненный на диске под именем style.css.

/* File type: CSS;

File name: style.сss:

BODY{

background-color: №FFFFFF;

font-size: l0pt;

font-family: Arial;

}

font-size: l0pt:

text-align: justify;

}

Hl{

font-size: 40pt;

font-weight: bold;

color: blue;

}

H2{

font-size: 30pt;

font-weight: bold:

color: red;

}

TD{

font-size: llpt;

font-weight: bold;

border-top-width: 0px;

border-bottom-width: 0px;

border-right-width: 0px;

border-left-width: 0px;

}

LI{

list-style-image: URL(/images/marker.gif);

list-style-position: inside:

}

.form{font-size: l0pt: color: black:}

P.comment {

font-family: Courier New: FONT-SIZE: 8pt:

}

#news{

font-family: Arial:.

font-size: 12pt:

font-weight: bold:

}

/* End of file */

Как становится очевидным из изученного нами материала, в этом файле мы описали свойства всего документа в целом (элемент BODY), свойства форматирования абзацев (элемент Р), свойства заголовков (элементы HI и Н2), свойства таблиц (элемент TD) и списков (элемент LI), создали классы с именами «form» и «comment», а также описали идентификатор с именем «news».

Привязать таблицу стилей к любому html-файлу, содержащему описанные элементы. Внести изменения в файле.css, проследить за html-файлом. Сделать соответствующие выводы.

ПОДСКАЗКА! Алгоритм выполнения в фале «Алгоритм выполнения практического блока к лекции.docx»

Вопросы для повторения:

1. Как принято переводить сокращения CSS?

a. Каскадные таблицы стилей;

b. Стилевые каскады полотен;

c. Каскадные стилевые слоим

2. Является ли правильным следующее обращение к внешнему документу?
<STYLE TYPE=“text/css”>
@import url(http://domen.ru/basic);
</STYLE>

a. Да это обращение правильное

b. Нет, это обращение неправильное

c. Внешний файл можно загрузить только через элемент разметки LINK

3. Что является селектором, а что определением в следующем примере
P {color:blue;}?

a. P – селектор

b. Blue – определение

c. {color: blue;} – определение;

d. {color: blue;} – селектор

4. Является ли следующая запись группированием селекторов и определений
H1, H2, H3 (font-weight:bold;}?

a. Не является;

b. Это контекстное объявление стиля;

c. Является;

5. Что называют блочным элементом разметки?

a. P

b. OL

c. DIV

d. TABLE

e. UL

6. Что означает запись float: left?

a. Блочный элемент будет прижат к левой границе окна браузера. Справа его будут обтекать другие элементы разметки, которые следуют на странице вслед за ним;

b. Блочный элемент будет прижат к правой границе окна браузера. Слева его будут обтекать другие элементы разметки, которые следуют вслед за ним.

c. Данный атрибут имеет смысл только в контексте описания элемента разметки IMG.

7. Каким атрибутом определяется внешний отступ от границы блочного элемента?

a. Padding

b. Border

c. Margin

d. Shift

8. можно ли отдельно задать внутренний отступ от левой границы блочного элемента до его содержания?