Какое свойство используется для задания полей у блока

Задания для рубежного контроля

Задание 1.

Вариант №1

А1. Какая запись подразумевает, что фото размещено на уровень выше от документа? ;

*

А2. Текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк;

*

А3. Какая запись подразумевает,  что фото размещено на уровень выше от документа?;

*

А4. Выберите правильно записанный код для того чтобы изменить шрифт документа;

Эта строчка будет написана с помощью шрифта Arial

Эта строчка будет написана с помощью шрифта Arial

Эта строчка будет написана с помощью шрифта Arial

Эта строчка будет написана с помощью шрифта Arial*

А5. Сколько в наборе тегов html языка имеется типов заголовков?;

4

6*

8

12

А6. В каком расширении сохраняются файлы при работе в css?;

,css

*css*

/css

А7. Какие атрибуты имеет тег ?;

rows*

align

cols*

href

А8. Для чего служит тег «link»?;

сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей

служит для «связывания» HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу*

А9. Какое свойство используется для задания отступов у блока?

padding*

direction

position

margin

А10. Есть такой код: ul li:first-letter {font-size: 200%;}. Что он делает?

Делает первую букву у первого элемента в нумерованном списке размером 200%. *

Ничего не делает, так как псевдоэлемента first-letter вообще не существует.

Делает первую букву у каждого элемента ненумерованного списка размером 200%.

Делает первую букву у первого элемента в ненумерованном списке размером 200%.

А11. Какое свойство используется для задания полей у блока?

direction

padding

position*

margin

А12. Какой вариант задания цвета НЕ сработает?

color: #aaa;*

color: #aaaaaa;

color: #000;

color: #hhh;

А13. Выберите верный php тэг…

<%php %>

*

?….. ?

<#php #>

А14. Является ли переменная $221BakerStreet валидной?

Да

Нет*

А15. PHP код не может быть встроен в HTML. Это выражение…

Ложь*

Правда

А16. Каждое PHP выражение должно заканчиваться..

Запятой (,)

Точкой с запятой (;)*

Точкой (.)

Двоеточие (:)

А17. Какой HTML атрибут используется для создания встроенных стилей?

font

style*

class

styles

А18. Какой из следующих операторов используется для конкатенации строк?

. *

=>

->

&

А19. CSS – это аббревиатура от:

Креативные таблицы стилей

Красочные таблицы стилей

Каскадные таблицы стилей*

Компьютерные таблицы стилей

А20. Как задать цвет фона для всех элементов h1?

h1.all {background-color:#FFFFFF;}

all.h1 {background-color:#FFFFFF;}

h1 {background-color:#FFFFFF;}*

Вариант №2

А1. С помощью параграфа можно расположить наш текст по левому краю, выберите правильно записанный код

=»left»Урок

Урок

1. *

   =left Урок

   Урок

А2. Тег задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега, укажите какие;

*

А3. С помощью параграфа можно расположить наш текст по центру, выберите правильно записанный код;

Привет

1. *

   =»center»Привет

   Привет

   =center Привет

А4. Может ли тег

содержать в себе другие параграфы?;

Да*

Нет

Только 3

Не знаю

А5. Текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк;

*

А6. Какой тег служит для «связывания» HTML документа с дополнительными внешними файлами css, обеспечивающими его должную работу?;

rel

href

link*

А7. С помощью какого тега можно создать бегущую строку?;

В начале документа

В конце документа

А18.Какая из этих переменных не является валидной?

$my_variable

$myvariable

$_myvariable

$my-variable *

А19.Как правильно писать комментарии в CSS?

/* это комментарий */ *

// это комментарий

‘ это комментарий

// это комментарий //

А20.Какое из CSS свойств используется для выставления цвета текста элементов?

fgcolor

text-color

color*

Ответы:

1 Вариант



Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span.
div — этот элемент является контейнером для остальных. Элемент div отделяется от остальных
элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.

Посмотрим на примере, создайте html-страницу со следующим кодом:

Посмотрите на нашу страницу в браузере:

Как видите, содержимое тегов div располагается с абзацным отступом, т.е. одно под другим. На примере этой страницы
мы и будем рассматривать свойства блоков.

Border (граница)

Границы в css можно задавать отдельно для каждой стороны:

• border-top — верхняя граница.
• border-right — правая граница.
• border-bottom — нижняя граница.
• border-left — левая граница.

Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии.
Для этого к свойству границы через дефис необходимо дописать ключевые слова : color (для цвета), width (для толщины) и style (для типа линии).
Например, border-top-color определяет цвет верхней границы, а border-left-style —
тип линии для левой границы.

Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью:

• border-color — цвет всех границ.
• border-width — толщина всех границ.
• border-style — стиль всех границ.

Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и
десятичные коды в модели RGB (типа rgb(255, 0, 0)).

Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick
(толстая граница). А также любая единица измерения.

Значениями свойства style могут быть следующие ключевые слова:

• none — граница отсутствует.
• dotted — граница состоит из точек.
• dashed — граница в виде пунктирной линии.
• solid — граница отображается сплошной линией.
• double — граница отображается двойной сплошной линией.
• groove — граница отображается вдавленной объемной линией.
• ridge — граница отображается выпуклой объемной линией.
• inset — граница отображается так, что весь блок выглядит вдавленным.
• outset — граница отображается так, что весь блок выглядит выпуклым.

В браузере разные стили границ выглядят так:

Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:

#first{
border-bottom-style:double;
border-bottom-color:red;
border-left-style:solid;
border-left-width:2px;
border-left-color:blue;
border-right-style:solid;
border-right-width:2px;
border-right-color:yellow;
border-top-style:dotted;
border-top-color:green;
}

Посмотрим на результат в браузере:

Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех
границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком
порядке).

Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами
и полями далее:

#first, #second, #third, #fourth{
border: 1px solid red;
}

Сейчас, если посмотреть на нашу страницу в браузере,

то мы увидим наложение границ разных элементов друг на друга. Это происходит
потому, что еще не заданы поля элементов.

Margin (поля)

Как вы помните, поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней,
правой, нижней и левой сторон. Для этого используются свойства:

• margin-top — ширина верхнего поля.
• margin-right — ширина правого поля.
• margin-bottom — ширина нижнего поля.
• margin-left — ширина левого поля.

Чаще используется сокращенная запись margin, где через пробел указываются ширина верхнего, правого, нижнего
и левого полей. Причем, именно в таком порядке. Пример записи:

p{
margin:5px 10px 15px 10px;
}

Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит
еще короче:

p{
margin:5px 10px;
}

В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого — по 10 пикселов.

Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:

p{
margin:5px;
}

Значения полей можно задавать и в других единицах длины, и в процентах. Также величина значения может иметь отрицательное значение,
что в некоторых случаях очень удобно использовать. Давайте для нашего примера зададим всем элементам
одинаковую ширину полей — в 10 пикселов:

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
}

Теперь наша страница в браузере выглядит так:

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

Padding (отступы)

Как вы помните, отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны
отдельно, используя следующие свойства:

• padding-top — ширина верхнего отступа.
• padding-right — ширина правого отступа.
• padding-bottom — ширина нижнего отступа.
• padding-left — ширина левого отступа.

Значения свойств могут задаваться в различных единицах длины или в процентах. Проценты вычисляются относительно ширины блока.
В качестве значения может выступать только положительная величина.

Как и с полями чаще удобнее использовать сокращенную запись, которая аналогична записи для полей.

Давайте зададим для элементов нашей страницы отступы: сверху и снизу — по 10 пикселов, а справа и слева — по 5 пикселов.

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}

Теперь наша страница в браузере выглядит так:

Давайте зададим фон нашим элементам, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей — прозрачный.

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first, #second{
background:yellow;
}
#third, #fourth{
background:pink;
}

Теперь наша страница в браузере выглядит так:

Теперь давайте зададим ширину и высоту наших блоков, например, так:

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first{
background:yellow;
width:300px;
height:100px;
}
#second{
background:yellow;
width:300px;
}
#third, #fourth{
background:pink;
width:300px;
height:100px;
}

Теперь наша страница в браузерах Opera, FireFox и Chrome выглядит так:

А в IE вот так:

Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id=»second» шире первого блока? Да потому, что IE
не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и
отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. Исправим это так, чтобы
во всех браузерах было одинаково:

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
}
#first{
background:yellow;
width:300px;
height:100px;
}
#second{
background:yellow;
width:300px;
}
#third, #fourth{
background:pink;
width:270px;
height:100px;
}

Вот теперь во всех браузерах все в порядке:

Вообще разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно,
а вот отображаться может по-разному.

Собственно мы рассмотрели все способы задания полей, отступов и границ. Как всегда в конце урока добавим то, что уже
изучили, например, так:

#first, #second, #third, #fourth{
border: 1px solid red;
margin:10px;
padding:10px 5px;
font-size:14px;
}
#first{
background:yellow;
width:300px;
height:100px;
text-align:center;
color:blue;
}
#second{
background:yellow;
width:300px;
text-align:center;
color:blue;
}
#third, #fourth{
background:pink;
width:270px;
height:100px;
text-align:left;
text-transform:capitalize;
word-spacing:8px;
color:red;
}
#first:first-letter{
color:red;
font-size:26px;
}
#third:first-letter, #fourth:first-letter{
color:blue;
font-size:26px;
}

Теперь страница выглядит так:

Надо сказать, что сегодня мы затронули основы блочной верстки сайта. Поэтому хорошенько разберитесь с полями, отступами и границами,
чтобы в дальнейшем это не вызывало трудностей.

Предыдущий урок
Вернуться в раздел
Следующий урок



Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.