12789

Поля и заполнение

Практическая работа

Информатика, кибернетика и программирование

Поля и заполнение В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним как можно изменять представление элементов свойствами margin и padding. Установим поля элемента Установим заполнение элемента Установим поля элемента У элемента ест

Русский

2013-05-03

13.38 KB

2 чел.

Поля и заполнение

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.

  •  Установим поля элемента
  •  Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны  до соседних элементов (или краёв документа). См. также диаграмму в 7 лабораторной.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>.

CSS-код для этого примера выглядит так:

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Или вы можете написать более элегантно:

body {

margin: 100px 40px 10px 70px;

}

  •  Показать пример

 Задание: вы можете установить поля примерно таким же образом почти для любого элемента. Например, определите поля для всех параграфов <p> следующим образом:

body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}

Установим заполнение элемента

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

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {

background: yellow;

}

h2 {

background: orange;

}

  •  Показать пример

 Задание: определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка (сделать самостоятельно и сравнить с предыдущим примером):

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Резюме

Вам остался один шаг до создания боксовой модели в CSS. В следующем уроке мы рассмотрим, как устанавливать рамки разного цвета и как очерчивать элементы.

К началу


 

А также другие работы, которые могут Вас заинтересовать

73785. Специфика подготовки практических психологов 56.21 KB
  Психологическая структура учебной деятельности. Для того чтобы студенты могли более эффективно организовывать свою учебу им полезно уже с первых дней обучения познакомиться с основными положениями психологической теории учебной деятельности. Оно является процессом и результатом активной познавательной прежде всего мыслительной деятельности самого учащегося по поиску добыванию и умственной переработке научных знаний а также по применению этих знаний в жизни. При преобладании деловой мотивации мотивы учебной деятельности совершенно не...
73786. Отечественные и зарубежные профессиональные психологические сообщества 18.71 KB
  Помимо национальных ассоциаций в Союз входят различные международные объединения специализированной направленности например Международная ассоциация прикладной психологии Европейская ассоциация экспериментальных социальных психологов Европейская ассоциация психологии личности Международное общество изучения развития поведения и ряд других. В России таким обществом является – Российское Психологическое Общество в США – Американская Психологическая Ассоциация в Великобритании – Британское Психологическое Общество и т. В ряде стран...
73787. Формы практической психологической работы (индивидуальная, групповая, тренинг и коучинг) 25.32 KB
  Одним из главных преимуществ психологической работы в группе является то что групповой опыт противодействует отчуждению. Оказавшись в тренинговой или психотерапевтической группе человек избегает непродуктивного замыкания в самом себе со своими трудностями и обнаруживает что его проблемы не уникальны что и другие переживают сходные чувства. Сплошь и рядом в группе человек встречает людей у которых имеются такие проблемы в сравнении с которыми собственная это просто цветочки. Однако если жизненные трудности переживаемые человеком в...
73788. Культурно-исторические предпосылки формирования потребности общества в психологических знаниях. Место психологии в современном мире 23.68 KB
  Место психологии в современном мире. Но в те времена психологии как отдельной науки еще не было. Появление психологии в Древней Греции на рубеже VIIVI вв. Естественно что в обширном предмете философии к психологии относилась область связанная в первую очередь с человеком да и само исследование души психики связывалось преимущественно с особенностями психики человека.
73789. Социальный заказ на профессию психолога 17.72 KB
  Социальный заказ на работу практического психолога формируется в обществе или точнее в некоторой его части осознавшей необходимость в профессиональной помощи для преодоления возникших трудностей. Первыми осознали важность и нужность особого вида деятельности психолога практической представители профессий типа человек–человек по типологии Е. Представления окружающих о содержании работы психолога неконкретны его профессиональные возможности нередко преувеличиваются.
73790. Отличие житейской психологии от научной 14.53 KB
  Житейские знания конкретны связаны с конкретными жизненными ситуациями а научная психология стремится к обобщенному знанию основанному на выявлении общих закономерностей жизни и поведения людей. Житейские знания больше носят интуитивный характер а в психологической науке стремятся к рациональному объяснению психических явлений то есть к лучшему их пониманию и даже прогнозированию. Житейские знания передаются в очень ограниченных вариантах из уст в уста через письма и т. а научные знания передаются через специальную систему фиксации...
73791. Профессиональный психолог как ученый – исследователь, прикладник и практик 18.26 KB
  Психологи работающие в области научной психологии проводят научные исследования психических явлений закономерностей психических процессов состояний свойств. Психологи работающие в сфере научной психологии проводят психологические исследования. Основные задачи их исследовательской деятельности: Психологи-исследователи работают в научных институтах и центрах в психологических лабораториях университетов и институтов в отделах прикладной психологии отраслевых научно-исследовательских институтов и университетов. Еще одной сферой...
73792. Система основных направлений деятельности практического психолога и их общая характеристика 15.12 KB
  В результате формируется концепция в которой отражаются представления психологов о наиболее существенных особенностях людей определенного типа и исходя из этого понимания обосновываются способы психологической помощи им. С какой бы позиции помощи содействия поддержки или сопровождения ни рассматривать деятельность практического психолога в любом случае можно говорить о пяти основных направлениях этой деятельности...
73793. Психологическое просвещение, как одно из направлений деятельности практического психолога 16.31 KB
  Важнейшая задача психологического просвещения – расширение психологических знаний и повышение психологической культуры людей. Первая задача психологического просвещения направлена на то чтобы обеспечить людям возможность пользоваться психологическими знаниями и технологиями: сформировать у них соответствующие желания и понимание того чем им может помочь психология готовность работать над собой и своим поведением с помощью психологических методик и техник. Вторая задача – информирование по вопросам психологических знаний. Иногда знания...