64 css headers and footers

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon

Create A Responsive Header

Step 1) Add HTML:

Example

и

<div class=»header»>  <a href=»#default» class=»logo»>CompanyLogo</a> 
<div class=»header-right»>    <a class=»active» href=»#home»>Home</a>   
<a href=»#contact»>Contact</a>    <a href=»#about»>About</a> 
</div></div>

Step 2) Add CSS:

Example

/* Style the header with a grey background and some padding */.header { 
overflow: hidden;  background-color: #f1f1f1;  padding: 20px
10px;}/* Style the header links */.header a {  float:
left;  color: black;  text-align: center;  padding:
12px;  text-decoration: none;  font-size: 18px;  
line-height: 25px;  border-radius: 4px;}/* Style the logo
link (notice that we set the same value of line-height and font-size to
prevent the header to increase when the font gets bigger */
.header a.logo
{  font-size: 25px;  font-weight: bold;}/*
Change the background color on mouse-over */.header a:hover { 
background-color: #ddd;  color: black;}/* Style the
active/current link*/.header a.active { 
background-color: dodgerblue;  color: white;}/* Float the
link section to the right */.header-right { 
float: right;}/* Add media queries for responsiveness — when the
screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) { 
.header a {    float: none;    display:
block;    text-align: left;  } 
.header-right {    float: none;  }}

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

❮ Previous
Next ❯

Шапка сайта.

Впоследствии, мы создадим большое количество таблиц и чтоб, не запутаться в них, мы создадим так называемую «Закомментированную строку». Что это такое? Закомментированная строка, это часть текста, или кода, которую видит «браузер», но не отображает её для пользователя. Ниже приведён пример.

На примере мы видим, знаки перед текстом  <!- — и в конце текста — -> . Вот такой несложный код, и закрывает содержимое. Закомментировать, в HTML документе, можно двумя способами. Первое вручную, проставив необходимые знаки, второе, выделив текст, в редакторе «Notepad++», нажав «ПКМ», выбрать «Закомментировать выделенное».

Для начала обозначим общую таблицу, созданную на прошлом занятие. Приписав пред открывающим тегом «table» следующее:

А после его закрытия:

Далее продолжим работу с таблицей изменим её ширину, созданную на прошлом занятие именно « height: 100px; », заменим на « height: 100%; ». Теперь согласно, нашему каркасу (рисунок №1), нам необходимо создать четыре основных горизонтальных сектора, или говоря языком таблиц «четыре строки». Для этого копируем вот эту часть кода:

И вставляем, её обратно три раза, так что бы получилось, четыре кода подряд. Что бы нам дальше было легче их понимать и находить, обозначим каждый по номерам (1,2,3,4) и каждый кусок кода прокомментируем.

Рисунок №2.

 На рисунке №2, показано как я это сделал.  В конце статьи открыв пример, вы сможете просмотреть, как  я их обозначил по названию. Теперь удаляем цифру «1», опускаем закрывающий тег «</td> ниже на два пункта, и посредине вставляем код вот такой таблицы:

Сохраняем и открываем для просмотра в браузере. Как видим, создалась ещё одна таблица, с текстом «Шапка», по левой стороне. Поскольку ширина (width: 1000px), этой таблицы меньше чем основная, по краям мы видим отступы, а вот отступов сверху и снизу отсутствуют. Это потому что общая ширина основной таблицы у нас стоит 100% и содержимое срок по ширине заполняется полностью. Что бы отступ появился нам необходимо, указать ширину именно для строки, которая до этого была у нас под №1. Для этого после закомментированной строки «Шапка сайта», в тег <td> прописываем ширину, должно получится вот так:

Сохранили, просмотрели, отлично отступы появились. Далее вместо отсутствующего фона, нам необходимо вставить картинку, сам путь и имя картинки, у нас уже прописаны:

Теперь в папке, которую мы создавали ранее «Простая вёрстка в HTML» где лежит наш файл «Index.html», создаём папку «images», в которую и помещаем нашу картинку, или фон будущей шапки. Я создал картинку размером 1000х200 пикселей, что бы ваша картинка вписалась в этот дизайн, то вам необходимо создать рисунок такого же размера. Из кода указанного выше следует background-image: url», что говорит браузеру, фон в данной области будет изображение, далее следует «’images/header.png’», где images»,это созданная нами папка для хранения изображений, а header.png’» имя и расширения самой картинки

Обратите внимание, что имя и расширения может быть любым (png, gif, jpg), главное, что бы оно было правильно указано. И так, создав папку, и поместив в неё картинку, я сохраняю, все это дело и запускаю файл для просмотра

Получилось вот что:

Рисунок №3.

 Всё отлично моя шапка работает, а вот вместо текста шапка, я напишу номер телефона компании

Что бы мой текст с телефоном не прилипал, перед ним я проставлю вот такой код &nbsp; два раза. Для браузера это означает пробел.

До встречи в следующем уроке «Простая вёрстка в HTML. Урок №4.», «Вёрстка таблицами. Часть-2».

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список

  • вверхуСсылки
    в нем не работают, потому что наш “сайт” пока что состоит только из
    одной страницы, но это неважно в данный момент. Конечно же, на
    настоящем сайте не должно быть неработающих ссылок

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст
переместился направо а навигация налево

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon

Добавление заголовка и подзаголовка на страницу сайта

Начнем работу над нашим сайтом. Сегодня мы добавим заголовок «My First Site», подзаголовок «I DID EVERYTHING MYSELF!» и маленькую аватарку. Все эти элементы помещаются в контейнер <div>, который оформляется при помощи класса CSS.

Итак, нам нужно создать класс для контейнера <div>, а затем поместить содержимое – текст и изображения – в контейнер <div>, для которого предназначен новый класс.

Чтобы добавить заголовок и подзаголовок на свой сайт, откройте файл index.html поместите следующий выделенный фрагмент кода между открывающим и закрывающим тегами <body>. Замените нашу информацию своей собственной, если хотите:

Вы добавили заголовок My First Site и присвоили ему тег заголовка <h1>, поскольку это – самый важный заголовок этой веб-страницы. Вы также добавили подзаголовок I DID EVERYTHING MYSELF! и присвоили ему тег <h5>, так как это менее важный заголовок.

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

В HTML комментарии записываются между тегами  , как показано выше. Не забудьте закрыть свой комментарий (–>), иначе весь ваш контент будет закомментирован.

Элемент

С помощью элемента <meta> можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора html-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

Кодировка HTML-страницы

Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если явно не указать кодировку, тогда браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно, то вместо текста будут отображаться иероглифы.
Самая распространённая современная кодировка — utf-8.
Указать браузеру пользователя какая кодировка используется на данной странице:

Метаэлементы и поисковые системы

Некоторые поисковые системы во время индексации страницы обращаются к метаэлементам.
Например метаэлементы ниже определяют описание для HTML-документа и ключевые слова (данная информация может использоваться поисковыми системами при отображении документа в поисковой выдаче):

Описание содержимого страницы и ключевые слова:

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты.

Атрибут
Значение / описание

charset
Указывает кодировку символов для текущего HTML-документа:

content
Определяет возвращаемое значение для свойства. Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом или .

http-equiv
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:

name
Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту . Не должен использоваться в случае, если для элемента уже заданы атрибуты , или . — указывает название веб-приложения, используемого на странице. — используется для указания имени автора веб-страницы:
— является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:
— указывает один из пакетов программного обеспечения, используемого для создания документа, например:
— содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:

— предотвращает кэширование страницы браузером, например:
— может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она
должна быть удалена из кэша), например:
— показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее:

— позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

14.3 Внешние таблицы стилей

Авторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:

  • Авторы и менеджеры Web-сайтов могут совместно использовать таблицы стилей в ряде документов (и сайтов).
  • Авторы могут изменять таблицы стилей без изменения документа.
  • Агенты пользователей могут загружать таблицы стилей выборочно (в зависимости от описаний устройств).

14.3.1 Предпочитаемые и альтернативные таблицы стилей

HTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила «каскадов» CSS).

Авторы могут указать ряд взаимоисключающих таблиц стилей, называемых альтернативными. Пользователи могут выбирать таблицы, которые им больше нравятся. Например, автор может указать один стиль для небольших экранов, другой — для слабовидящих пользователей (например, с использованием крупного шрифта). Агенты пользователей должны предоставлять пользователям возможности выбора одной из альтернативных таблиц.

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

Авторы могут сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые автором) под одним именем стиля. Если пользователь выбирает именованный стиль, агент пользователя должен применять все таблицы стилей с этим именем. Агенты пользователей не должны применять альтернативные таблицы стилей с другим именем стиля. Как присвоить имя группе стилей, описано в разделе об .

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

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

14.3.2
Указание внешних таблиц стилей

Авторы указывают внешние таблицы стилей с помощью атрибутов элемента :

  • Установите в атрибуте местоположение файла таблицы стилей. Значением атрибута должен быть .
  • Установите для атрибута type значение, указывающее язык связанного ресурса (таблицы стилей). Это позволяет агентам пользователей не загружать таблицы стилей, использующие неподдерживаемые языки.
  • Укажите, является ли таблицы стилей постоянно, предпочитаемой или альтернативной:
    • Чтобы таблицы была постоянной, установите для атрибута значение «stylesheet», и не устанавливайте атрибут .
    • Чтобы таблица была предпочитаемой, установите для атрибута значение «stylesheet», и дайте таблице имя с помощью атрибута .
    • Чтобы указать альтернативную таблицу, установите для атрибута значение «alternate stylesheet» а дайте таблице имя с помощью атрибута .

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

В этом примере мы сначала определяем постоянную таблицу стилей,
находящуюся в файле mystyle.css:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

Установка атрибута назначает ее предпочитаемой автором таблицей:

 <LINK href="mystyle.css" title="Compact" rel="stylesheet" type="text/css">

Добавление ключевого слова «alternate» а атрибут сделает ее альтернативной таблицей стилей:

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

Подробнее о внешних таблицах стилей Вы можете узнать в разделе о

Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент . Например, чтобы установить предпочитаемую таблицу стилей «compact» (см. предыдущий пример), авторы могут включить в элемент следующую строку:

<META http-equiv="Default-Style" content="compact">

Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление выше эквивалентно заголовку HTTP:

Default-Style: "compact"

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

Если предпочитаемая таблица стилей задается двумя или более элементами , преимущество имеет первая.

Предпочитаемые таблицы стилей, задаваемые с помощью или заголовков HTTP имеют преимущество над таблицами, задаваемыми элементом .

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Реализация

Для начала нам нужна HTML-структура наподобие следующей:

<div class="header">
<div class="container clearfix">
<h1 id="logo"> LOGO </h1>
<nav>
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Dolor</a>
</nav>
</div>
</div>

Код CSS, приведенный ниже – это базовые стили заголовка.

.header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #3b8dbd;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
transition: height 0.3s;
}
.header h1#logo {
display: inline-block;
height: 150px;
float: left;
margin-left: 50px;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav {
display: inline-block;
float: right;
margin-right: 50px;
}
.header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav a:hover {
color: white;
}
.header.smaller {
height: 75px;
}
.header.smaller h1#logo {
width: 150px;
height: 75px;
font-size: 30px;
}
.header.smallernav a {
line-height: 75px;
}

В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:

$(function() {
    $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
            $(".header").addClass('smaller');
} else {
            $(".header").removeClass("smaller");
        }
    });
});

После того, как вы добавите этот код в раздел <head> и подключите библиотеку jQuery, шапка веб-страницы должна будет изменять свой размер при прокрутке вниз.

Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:

@media all and (max-width: 660px) {
    .header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
    }
    .header nav {
display: block;
float: none;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
    }
    .header nav a {
line-height: 50px;
margin: 0 10px;
    }
    .header.smaller {
height: 75px;
    }
    .header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
    }
    .header.smallernav {
height: 35px;
line-height: 35px;
    }
    .header.smallernav a {
line-height: 35px;
}
}

Теперь при уменьшении размера окна браузера при ширине в 660 пикселей вы увидите, что логотип переместится в середину. При этом меню навигации «съедет» под логотип и расположится по центру.

Если вам понравилась эта статься, поделитесь ей со своими друзьями!

Пожалуйста, оставляйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!

Сергей Бензенкоавтор-переводчик статьи «Create a Responsive, Fixed and Resizing Header»

Добавление и стилизация изображения профиля

Теперь давайте добавим в раздел заголовка аватарку – небольшое изображение профиля. Выберите фото профиля, которое вы хотите разместить на своем сайте. Если у вас нет фотографии, вы можете использовать любое изображение (например, наш логотип) или создать аватар на Getavataaars.com.

После того как вы выбрали изображение, сохраните его в папке images как small-profile.jpeg.

Теперь добавьте изображение профиля на веб-страницу с помощью тега <img> и атрибута src, который задает путь к файлу изображения вашего профиля. Добавьте следующий выделенный фрагмент кода в файл index.html между комментарием <!– Header content –> и строкой <h1>My First Site<h1>:

Сохраните файл и загрузите его в браузере. Теперь ваша веб-страница должна содержать заголовок, подзаголовок, картинку профиля:

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

Прежде чем двигаться дальше, давайте подробно рассмотрим каждую добавленную строку кода:

  • /*Top header profile image*/ – CSS-комментарий для маркировки кода.
  • .profile-small ссылается на имя класса, который мы определяем с помощью набора правил. Этот класс будет применен к изображению профиля на следующем шаге.
  • Объявление height:150px; устанавливает высоту изображения в 150 пикселей и автоматически регулирует ширину, чтобы сохранить пропорции изображения.
  • border-radius: 50%; закругляет края изображения.
  • border: 10px solid #FEDE00; добавляет изображению сплошную границу шириной 10 пикселей и устанавливает заданный цвет (здесь его выражает цветовой код HTML #FEDE00).

Сохраните файл и вернитесь к файлу index.html, чтобы добавить класс profile-small в тег <img>:

Сохраните файл и перезагрузите его в своем браузере. Изображение вашего профиля изменится: теперь оно будет иметь высоту 150 пикселей и желтую рамку со скругленными углами:

ШАГ 2: изменяем цвета

Возможно, вы видите некоторый черный текст на белом фоне, но это
зависит от конфигурации браузера. Для того чтобы страница выглядела
более стильно, мы можем сделать очень легко одну простую вещь —
добавить цвета. (Оставьте окно браузера открытым — мы к нему еще
вернемся)

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘purple’ и ‘#d8da3d’), которое
    устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы
установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

Стилизация и размещение заголовка с помощью CSS

Теперь мы определим специальный класс CSS для стилизации и размещения содержимого заголовка.

Вернитесь к файлу styles.css и создайте класс header, добавив следующий набор CSS-правил:

Давайте сделаем небольшую паузу, чтобы рассмотреть каждую строку только что добавленного кода:

  • /* Header Title */ – это комментарий, который не отображается в браузере.
  • .header – это имя селектора класса, который мы создаем и определяем с помощью этого набора правил.
  • Объявление padding: 40px; создает отступ в 40 пикселей между контентом и границей элемента.
  • Объявление text-align: center; перемещает контент в центр элемента. Вы также можете использовать значения left и right, чтобы соответственно выровнять текст.
  • Объявление background: #f9f7f7; устанавливает цвет фона согласно указанному цветовому коду HTML. В этом руководстве мы не будем подробно останавливаться на цветовых кодах HTML; но знайте, что вместо кодов вы также можете использовать названия цветов (black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, и aqua), чтобы изменить значение цвета этого свойства.
  • Объявление margin:30px; создает поле в 30 пикселей между периметром элемента и периметром области просмотра и любых окружающих элементов.
  • font-size:20px; увеличивает размер заголовка и подзаголовка.

Сохраните файл styles.css. Затем мы применим класс header к нашему контенту. Вернитесь на страницу index.html и поместите контент заголовка (его вы уже добавили в свой файл) в тег <div>, которому присвоен класс header:

Сохраните файл index.html и перезагрузите его в браузере. Теперь ваш заголовок, подзаголовок и изображение профиля должны быть стилизованы внутри контейнера <div> в соответствии с правилами, которые вы объявили в классе header.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector