Багато текстових елементів на веб-сторінці потрібно вирівнювати центром. Найчастіше заголовки. Давайте подивимося, як робиться в CSS вирівнювання тексту по центру.

Властивість text-align

За це відповідає властивість text-align і вона має чотири значення:

• Left – вирівнювання тексту лівим краєм елемента, в якому він розташований
• Right – з правого краю, але при цьому напрям тексту залишається незмінним
• Center – по центру. Тобто те, що нам потрібне. Жодних додаткових параметрівставити не потрібно - браузер сам поставить текст по центру на різних дозволах екранів
• Justify - вирівнювання по ширині, коли в кожному рядку слова розтягуються так, щоб зайняти всю її ширину

Наприклад, у нас є довільний текст із заголовком:

Заголовок

Щоб вирівняти заголовок (h1) по центру, потрібно написати так:

H1(
Text-align: center
}

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

Text-align не діє як властивість float. Якщо text-align застосувати до блокового елементу з текстом, блок не втратить своєї поведінки. Буде притиснутий саме текст у ньому, а не сам блок. Зауважте, це відрізняється від якості float, яка відправляє вправо або вліво весь елемент повністю.

Як я і обіцяв раніше, у цьому уроці ви дізнаєтеся як можна вирівняти по горизонталі вміст будь-якого HTML-тегу на сторінці, не використовуючи застарілий атрибут align . Як ви вже здогадалися, ми знову будемо використовувати стилі (CSS), а точніше наш улюблений атрибут style .

Отже, щоб вирівняти вміст HTML-елемента, необхідно атрибуту style присвоїти одне з наступних значень:

• text-align:center- Вирівнювання кожного рядка по центру елемента, наприклад, параграфа.
• text-align:left- Кожний рядок притискається до лівої сторони елемента (це значення за замовчуванням).
• text-align:right- Кожен рядок притискається до правій стороні.
• text-align:justify- Вирівнювання відразу по лівій та правій сторонах елемента. Поясню. Зазвичай у елемента, наприклад параграфа, одна сторона тексту завжди рівна, а інша - «рвана», тому що довжини рядків виходять трохи різними. Коли ми використовуємо значення text-align:justify , то кожен рядок рівномірно розподіляється по ширині. У разі потреби між словами браузер додає додаткові пробіли, а перше та останнє слово рядка завжди притиснуті до відповідних сторін, тому виходить рівний з обох сторін блок.

Приклад вирівнювання вмісту тегів

Заголовок по центру.

Параграф по центру.

Результат у браузері

Заголовок по центру.

Текст параграфа притискається праворуч.

Параграф по центру.

Взагалі, горизонтальне вирівнювання застосовується тільки до блокових тегів та осередків таблиці (про них поговоримо пізніше). Хоча, з іншого боку, навіть якщо ви спробуєте, то не зможете застосувати його до вбудованих (inline). Чому? А пам'ятаєте ми нещодавно з'ясували, що ширина вбудованого елемента дорівнює вмісту? Відповідно виходить, що цьому вмісту просто нікуди буде вирівнюватися і браузер елементарно проігнорує ваші «мистецтва». :)

Домашнє завдання.

1. Створіть заголовок статті, двох її розділів та одного підрозділу у першому розділі. І нехай заголовок статті розташовується у центрі сторінки.
2. Встановіть для всієї сторінки шрифт Arial, а для всіх заголовків – Times і нехай вони будуть написані курсивом.
3. Колір тексту заголовка статті поставте #FF6600, розділів #6600FF, а підрозділу залиште постійним.
4. Напишіть під кожним заголовком по одному параграфу, причому текст кожного з них повинен займати не менше трьох рядків під час перегляду в браузері.
5. Вирівняйте другий параграф по центру, третій - праворуч, а четвертий по обох.

Продовжуємо вивчення HTML. У цьому уроці ми розглянемо HTML-заголовки сторінок, які заголовки бувають, як ними правильно користуватися і коли вони можуть застосовуватися. А також розберемо параграфи, щоб Ви могли наповнити свою сторінку текстом, але, головне, зробити це правильно.

Якщо Ви не вивчили першу статтю, знайти її можна тут:

• Урок 1. Що таке HTML?

Теорія та практика — Параграфи та заголовки HTML сторінки

Сьогодні ми поговоримо про параграфи та заголовки. Почнемо з простого - з параграфів і де вони використовуються.

Параграфи на сторінці

Я наведу приклад коду, в якому буде присутній тег параграфа .

Основну структуру Ви вже пам'ятаєте із першого уроку. Там розбирали основи і дивилися, що таке HTML. Тому зосередимо свою увагу на тому, що знаходиться між тегами .

Коли Ви пишете будь-який текст на сторінці, чи це просто абзац або невеликий пояснювальний рядок під зображенням, необхідно цей текст поміщати всередину тега .

На наступних уроках Ви побачите процес оформлення даних абзаців. Зараз Ви повинні зрозуміти те, що не можна розміщувати тег на сторінці без тега. Тому що надалі буде складно застосувати якісь індивідуальні стилі саме для цієї ділянки тексту.

Спробуйте написати кілька абзаців. Деякі абзаци візьміть у тег, а деякі залиште без нього. І Ви одразу побачите різницю. Тому що якщо Ви напишете абзац усередині цього тегу, то в нього одразу з'являться відступи. А зараз перейдемо вже у HTML заголовках сторінки.

HTML заголовки на сторінці

У HTML документі є семантика. Я не говорю про технологію HTML5 і його нові теги. Тут лише розберемо базові, щоб Ви швидко змогли освоїти ази HTML. Семантика означає те, що не треба заголовки, абзаци, таблиці і так далі, створювати за допомогою того самого тега. Це можна зробити, але технологія HTML різноманітніша і для різних ситуацій передбачені відповідні теги. А Вам необхідно освоїти основні теги, щоб вільно працювати з HTML кодом.

Це невелике вступ я написав до того, що для параграфів необхідно використовувати вже відомий Вам тег. А ось для заголовків використовуються теги, що починаються з англійської літери "H".

Ось весь список заголовків, які Ви можете використати:

Деякі з цих тегів використовуються набагато частіше. Це такі теги, як h1, h2 або h3. Якщо хтось уже знайомий з CSS, то розуміє, що заголовок HTML заголовок сторінки h3 можна стилізувати таким чином, що він буде зовні схожий на h1 або h2. Але значення, які вони мають, хоча б для SEO оптимізації, кардинально відрізняються. Як правило, ці цифри всередині тегів слід розуміти як рівень важливості того чи іншого HTML заголовка. Тому необхідно дуже ретельно опрацьовувати дані елементи і тоді. пошукові системипомітять Ваші статті.

Поки ми не дійшли до CSS, Ви побачите стилі заголовків, які за замовчуванням у браузерах. Якщо Ви вставите один за одним дані теги і всередині напишіть будь-який текст, побачите наступне:

Для пошукових роботів також важливим є використання заголовків на сторінці. Є певні правила, які Ви можете прочитати у нашій книзі. PDF книга з розкрутки сайту.

Після того, як всі вивчили, відразу йдемо в код і пробуємо написати все своїми руками. Саме так найшвидше освоюється будь-яка мова програмування. Але технологія HTML набагато легша за будь-яку мову програмування, тому тут зможе розібратися кожен. Таким чином, Ви краще запам'ятаєте теги.

Відео урок - HTML заголовок сторінки? (практика)

Наочне відео на прикладі роботи з цими тегами:

Домашнє завдання

Д/З:як приклад напишіть невеликий текст, який складатиметься з 5-7 абзаців та 2-3 різноманітних заголовків.

Більше практикуйтеся у параграфах та HTML заголовках сторінок!

www.sitehere.ru

Як у HTML зробити таблицю

Будь-яка таблиця містить у собі рядки та стовпи. Вони, у свою чергу, можуть містити текст та зображення.

Для додавання на сторінку таблиці використовується тег

. Це основний та головний контейнер, в який поміщають елементи таблиці (рядки та стовпці). І цей контейнер потрібно закривати..

Рядки та стовпці задаються за допомогою тегів і , при цьому замість ви можете сміливо використовувати . Відмінність від у тому, що браузер відображає текст у комірці як жирний, і навіть вирівнює його у центрі осередку - тобто. можна використовувати в заголовках таблиці, не вдаючись до додаткового форматування. В іншому між ними немає різниці, можна використати будь-хто.

Рядки таблиці ( ) повинні бути поміщені строго між

. А стовпці таблиці ( ) у свою чергу поміщаються строго між тегами .

Давайте створимо на практиці таблицю, яка складатиметься з одного рядка та чотирьох стовпців. Нам потрібно позначити початок таблиці (

), початок рядка ( ), чотири осередки ( ), кінець таблиці (

), кінець рядка (

).

Результат:

Тепер давайте використовуємо тег щоб більше не повертатися до цього.

Результат:

Я поставив ширину таблиці 400 і, як бачите, перший і третій осередок виділені жирним і вирівнюються по центру. Інші - по лівому краю. Я рекомендую завжди приділяти достатньо часу форматуванню коду, щоб не заплутатися в ньому. У маленькій таблиці це може не грати великої ролі, але у великій…

Давайте трохи докладніше про ширину, коли я її згадав. Ширина таблиці задається атрибутом width, висота – height. Змінювати подібним чином можна не тільки ширину та висоту таблиці, але й розміри осередків (вони всі повинні поміщатися в таблицю, інакше браузер не зрозуміє, що ви хочете від нього).

Ці значення (ширина та висота) задаються в пікселях, відсотки. Можна залишити і так, нічого не писати, браузер подумає, що вам ліньки було писати «px» і визнає цифру за пікселі.

Ну а якщо ви хочете вирівняти вміст одного або декількох табличних осередків, використовуйте атрибут align зі значеннями left, center, right. Це горизонтальне вирівнювання, а є ще вертикальне і має свій окремий атрибут - valign, який може приймати значення: baseline (вертикальне вирівнювання точно по базовій лінії), bottom (по нижньому краю), middle (значення осередків будуть вирівняні вертикально по середині), top (по верхньому краю). За замовчуванням браузери вирівнюють осередки центром (середини).

Збільшуємо рамку (кордону) таблиці та змінюємо її колір

Ви напевно помітили, я вже показав вам як можна працювати з рамкою та шириною таблиці. Взагалі, дефолт таблиці завжди відображається в браузері без рамки, а це не завжди зручно. Ось чому:

Погодьтеся, якось не дуже. Але це не проблема для тих, хто вже знайомий з HTML-атрибутом border, який я використав у прикладах на початку посту.

Додаємо всього 1 атрибут і стає вже кращим:

Це як у Екселі! Уявіть, що не було б поділу осередків лініями (сіткою)? Ну жах. А ось що буде, якщо виставити border, що дорівнює 10.

Як бачите, border впливає тільки на зовнішню межу та обрамлення таблиці, змінюючи ширину зовнішньої рамки, а межі між осередками таблиці залишаючи колишніми.

Давайте змінимо колір цієї рамки, адже для цього також є атрибут - bordercolor. Встановимо його значення, що дорівнює «d3d3d3». Результат:

Як зробити відступи у таблиці

Відступи в таблиці також потрібні підвищення «читаемости», як і межі осередків. Для створення відступів нам знадобиться атрибут "cellspacing". Я як і раніше працюватиму з нашою 4х4 таблицею, застосовуючи до неї цей атрибут. Актуалізую код для вас (я наводжу лише один рядок, щоб не захаращувати пост):

Результат:

Це були відступи зовні осередків. Але є схожий атрибут для завдання відступів усередині осередків - cellpadding, зараз я зроблю його також рівним 10 і ви побачите, як збільшилася відстань від вмісту осередку до її меж (довелося зробити кількість осередків менше, щоб таблиця не розросталася надмірно). Код:

Результат:

Тепер приберемо "cellspacing" і залишимо тільки "cellpadding". Результат:

Ось і розібралися з тим, як створити відступи в таблиці та керувати ними. Чудово! Якщо Вас цікавлять як робити перенесення рядка, про це написано тут.

Як грамотно об'єднати осередки у таблиці

Для об'єднання осередків у таблиці також є спеціальні атрибути. Це "colspan" та "rowspan". Перший (colspan) об'єднує осередки по стовпцях (горизонталі), другий (rowspan) – по рядках або по вертикалі. Давайте об'єднаємо щось у нашій таблиці.

Тут уважно! При об'єднанні осередків вам потрібно зменшити їх кількість на те число (мінус один), яке ви прописуєте в параметрах атрибута. Якщо ви створюватимете таблицю в HTML, об'єднувати осередки не видаляючи зайві, то сайт їхатиме. Об'єднуємо дві – видаляємо одну. Об'єднуємо три – видаляємо дві. І так далі.

При злитті осередків у колонках або стовпцях, один осередок потрібно видаляти! І робити це стільки разів, скільки осередків ви об'єднуєте. Нині покажу на прикладі.

При злитті осередків у колонках або стовпцях, один осередок потрібно видаляти! І робити це стільки разів, скільки осередків ви об'єднуєте.

Нині покажу на прикладі. Ось наша поточна таблиця:

Давайте об'єднаємо осередки з номерами "1 та 2", "5 і 9", "4, 8, 12", "6 і 7". Дивіться, як круто вийшло, я сам не очікував!

Принцип об'єднання такий.

При горизонтальному об'єднанні осередку номер 1 і 2, потрібно в першому прописати «colspan=»2″», вміст другої помістити в перший (ми ж об'єднуємо) і видалити другий осередок (або приховати його від HTML як це зробив я потім покажу.)

При вертикальному об'єднанні осередків номер 4, 8, 12, потрібно в першому осередку (номер 4) прописати "rowspan =" 2 "", а вміст інших видалити, попередньо помістивши в осередок.

Ось який вийшов у мене код. Я приховав осередки для наочності (щоб вам було зрозуміліше), але можна видалити їх.

Сподіваюся зрозуміло пояснив і навів гарний приклад.

Як зробити заголовок у таблиці

Щоб задати таблиці заголовок – використовуйте теги після початку таблиці (

), але до початку тегу . Ось що виходить:

Ну і маленький HTML-хак для тих, кому необхідно розмістити заголовок таблиці під самою таблицею. Використовуйте атрибут align зі значенням bottom так:

Тоді заголовок таблиці переміститься під таблицю.

Отже, ми розглянули майже всі, крім… Фона!

Як зробити красиве тло біля осередку або всієї таблиці

HTML дозволяє задати колір не тільки у всього фону таблиці, а й у кожного окремого осередку (якщо є така потреба). Встановлює колір фону таблиці або осередку атрибут bgcolor.

Давайте я спочатку поставлю фон для всієї таблиці. Це буде колір "lightgreen" (а взагалі можна задати його і ось так - "# 90EE90"). Отак тепер у мене починається таблиця:

Результат:

Ого, колір фону осередків став дуже «lightgreen». Тепер фарбую одну з осередків таблиці назад у білий, надавши їй такий самий атрибут, тільки з іншим кольором:

Tada! Результат:

По-моєму круто! Якби я брав участь у конкурсі креативних таблиць (або навчання дошкільнят HTML) – точно б переміг.

Ще хотів написати, як вставити картинку як фон таблиці в HTML, але я вже згадував про це своєю іншою статтею за посиланням вище.

Успіхів та успіхів у вивченні HTML.

blogwork.ru

Верстка та вирівнювання по центру сторінок сайту є справою творчою і у початківців часто викликає труднощі. Тож давайте подивимося, як це зробити. Припустимо, ми хочемо зробити сторінку такої структури:

Наша сторінка складається з чотирьох блоків: шапки (header), меню (menu), вмісту (content) та низу сайту (footer). Для вирівнювання по центру сторінки ми помістимо ці чотири блоки до одного головного блоку (main): На прикладі цієї структури розглянемо кілька варіантів.

Верстка та центрування гумового сайту

При верстці гумового сайту основною одиницею вимірювання, що використовується, є — %, адже сайт повинен розтягуватися по ширині і займати весь вільний простір.

Отже, ширина блоків "header" та "footer" становитиме 100% ширини екрана. Ширина блоку «menu» нехай буде 30%, а блок «content» має розташовуватися поруч із блоком «menu», тобто. він повинен мати ліве поле (margin-left) шириною, що дорівнює ширині блоку «menu», тобто. 30%.

Щоб блоки "menu" і "content" розташовувалися поруч, зробимо блок "menu" плаваючим і притиснемо його до лівого краю. Також поставимо кольори фону (background) для наших блоків. Тепер запишемо все це до таблиці стилів (на сторінці style.css)

Висоту блоків задали умовно, щоб було видно результат. Подивіться на нашу сторінку у браузері:

Якщо ви змінюватимете розміри вікна браузера, то буде змінюватися ширина всіх блоків. Не завжди зручно, т.к. при розтягуванні блоку меню з'являється порожнє місце. Тому частіше ширину блоку "menu" роблять фіксованою, давайте і ми так зробимо. Для цього замінимо у таблиці стилів значення відповідних властивостей: Тепер наша сторінка розтягується природніше. При гумовій верстцісторінки займають всю ширину екрана, тому вирівнювання центром сторінок не потрібно.

Але якщо хочеться можна зробити так, щоб ваша сторінка мала рівні відступи ліворуч та праворуч екрану. Для цього треба додати стиль блоку «main», який є контейнером для решти всіх блоків: Тепер наша сторінка виглядає так:

Верстка та центрування сайту, фіксованої ширини

У цьому випадку нам доведеться встановити фіксовані розміри наших блоків: Зараз наша сторінка притиснута до лівого краю екрана.

У цьому випадку вирівнювання центром сторінок сайту можна здійснити наступним чином. Згадаймо, що наша сторінка має тег «body», якому також можна задати ширину і якісь відступи.

Зробимо так: поставимо тегу "body" ширину в 800 пікселів (як і у блоку "main") і лівий відступ (padding-left) у 50%. Тоді весь вміст блоку «main» відображатиметься у правій частині екрана (тобто від середини вправо):

Щоб наш блок «main» розташовувався посередині екрана, треба, щоб його середина збігалася з серединою тега «body». Тобто. треба змістити блок "main" вліво на половину свого розміру. Ширина блоку "main" - 800 пікселів, отже треба задати йому властивість "margin-left:-400px". Так, ця властивість може набувати негативних значень, тоді ліве поле зменшується (тобто зсувається вліво). А саме це нам і потрібне.

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

Ми розглянули два варіанти вирівнювання по центру сторінок сайту, насправді вони не є догмою. Ви можете поекспериментувати і вигадати свій варіант, тільки перевіряйте його роботу в різних браузерах. На жаль, те, що добре відображається в FireFox або Opera, може абсолютно незрозуміло відображатися в IE і навпаки. І це треба пам'ятати.

Успіхів Вам у ваших творчих пошуках!

www.site-do.ru

Як вирівняти в html текст по центру?

HTML має два варіанти, які не передбачають використання CSS.

1. 1.Тег
   Дуже простий у використанні тег, який вирівнює по центру всі малі елементи, які в ньому знаходяться, а саме:
   • текст,
   • малюнки,
   • посилання,
   • а також теги , , , та деякі інші.
     2.Використання HTML атрибута align зі значенням center.
     Цей атрибут нам потрібно дописати всередині блокового тега, в якому знаходиться текст, який потрібно вирівняти по центру.
     Це може бути тег

     ,

     ,

     …

     та деякі інші.

     Також атрибут align має й інші значення:

     • align='»left'- Вирівнювання тексту по лівому краю
     • align='right'- Вирівнювання по правому краю
     • align='justify'- Вирівнювання тексту по ширині

     Як вирівняти текст центром за допомогою CSS?

     Особисто я вважаю, що використовувати теги та атрибути HTML для вирівнювання тексту по центру – це не правильне рішення. Якщо вам потрібно вирівняти текст тільки в одному-двох місцях і небажання лізти в CSS, можна обійтися можливостями HTML, але для вирівнювання по центру в декількох місцях на сторінці краще використовувати CSS.

     Для цього ми маємо спеціальну властивість text-align, яке має кілька значень:

     • text-align: center;- Для вирівнювання по центру
     • text-align: left;- з лівого боку
     • text-align: right;- Праворуч
     • text-align: justify;- По ширині блоку або сторінки.

     Для того, щоб його застосувати до нашого тексту, можна скористатися одним із запропонованих варіантів:

     1. 1.Присвоїти тегу блоку (заголовка, форми, абзацу або іншому блоковому елементу) CSS клас:

        А потім у CSS файлі вашого сайту пишемо:

        Замість block-textможе бути будь-яка інша назва класу.

        Якщо вам потрібно зробити вирівнювання тексту центром відразу для всіх абзаців або заголовків на сайті, то не обов'язково для кожного писати цю CSS властивість. Достатньо задати або визначити клас або ідентифікатор блоку, всередині якого знаходяться ці абзаци або заголовки, а далі до CSS файлу додати такий запис:

        У цьому випадку вирівнювання тексту центром застосовується для всіх тегів

        Які знаходяться всередині тега з класом block:

        Для вирівнювання заголовків усередині блоку з класом block запис буде трохи іншим:

     2. 2.Можна дописати потрібні CSS властивості в самому тегу за допомогою атрибуту style:

        Цей спосіб, як і атрибут alignабо тег center, Зручний тільки в тих випадках, коли вирівнювання потрібно зробити в одному або декількох місцях. Для масового вирівнювання тексту я його не рекомендую використовувати.

     На цьому все у мене! Спасибі, що відвідали мій сайт! Буду дуже рада бачити ваші коментарі! Успіхів вам та процвітання!

     З повагою Юлія Гусар

     impuls-web.ru

     Атрибути в HTML

     Що таке атрибут? Під атрибутом розуміється параметр, який надає тегам певної інформації. Цих параметрів може бути дуже багато. Наприклад, за допомогою атрибутів ми можемо вирівняти текст абзацу по ширині, встановити стиль і розмір шрифту, встановити необхідні відступи і т.д. Атрибути прописуються всередині тегів, після них йде знак рівності, потім у подвійних лапках вказуються значення атрибута. Поділяються атрибути один від одного крапкою з комою.

     Приклади роботи з атрибутами

     Розглянемо роботу з атрибутами на прикладах. Найпростіший приклад – візьмемо тег абзацу

     З атрибутом align. Напишемо:

     Приклад вирівнювання абзацу по лівому краю

     Атрибут align повідомляє браузеру, що даний абзац потрібно вирівняти по лівому краю екрана.

     Для тега абзацу також можуть бути використані атрибути:

     • align = "center" - вирівнювання по центру екрану;
     • align = "right" - вирівнювання по правому краю;
     • align="justify" - вирівнювання тексту по ширині екрана.

     Тепер ускладнимо завдання - створимо HTML сторінку з використанням декількох різних атрибутів. Приклад такої сторінки матиме наступний код:

     Атрибути в HTML

     Атрибут кольору bgcolor дозволяє нам задати колір фону сторінки. Атрибути «center» і «justify» вирівнюють текст у собі, відповідно, по центру і ширині.

     Заголовки в HTML

     з індексом. Таких індексів всього шість - від 1 до 6, вони вказують на розмір заголовка (

     є найбільшим заголовком,

     - Найменшим). Наприклад створимо веб-сторінку, яка має кілька заголовків. Код цієї сторінки матиме вигляд:

     Атрибути в HTML

     Що таке атрибут? Під атрибутом розуміється параметр, який надає тегам певної інформації. Цими параметрами може бути необмежену кількість.

     Заголовки в HTML

     Для створення заголовка на сторінці використовується спеціальний тег з індексом. Таких індексів лише шість - від 1 до 6, вони вказують на розмір заголовка.

     У цьому прикладі ми маємо два заголовки — заголовок першого рівня тут немає атрибутів, заголовок другого рівня — має атрибут вирівнювання по центру. Після заголовків йдуть абзаци, які також мають атрибути.

     Ось за таким принципом працюють з атрибутами та заголовками в HTML. Нічого складного тут нема. Обов'язково слід потренуватися власними прикладами у тому, щоб закріпити отриману цьому уроці інформацію.

     siteblogger.ru

     Вітаю всіх. Чи звертали ви увагу на те, що при оформленні дизайну назва блогу, заголовок повідомлення та заголовки гаджетів розташовані не по центру.

     Можливо, когось і влаштовує такий варіант. Але якщо є бажання вирівняти їх, цей пост для вас. Зазвичай ми створюємо за допомогою фотошопу або іншого редактора свою унікальну шапку для блогу. Тут, звичайно, назва розташована саме там, де ми її бажаємо бачити. Але не всі спочатку знають, як це зробити та задовольняються лише тими налаштуваннями, які нам запропоновані. У результаті назва блогу зміщено вліво.

     Давайте подивимося, як за допомогою CSS у шаблоні блогу це можна виправити. Розташуємо всі заголовки строго по центру та додамо трохи унікальності їм.

     Як завжди, йдемо у вкладку шаблон і обов'язково робимо резервну копію. Якщо щось піде не так, ви зможете завантажити шаблон зі свого комп'ютера. А краще буде, якщо поки що всі експерименти ви будете робити на тестовому блозі. Створіть для цього ще один блог на основі того самого шаблону.

     Як вирівняти центром назву блога.
     
     Шаблон вкладки — змінити HTML. У верхівці шаблону натискаємо на чорний маркер (стрілочку) зліва.

     І тут перед нами відкрилися всі коди CSS. Спускаємось повільно вниз і знаходимо рядок .Header h1 (
     
     

     Відразу після дужок прописуємо значення

     text-align:center;

     Таким чином, назва блогу розташуватись строго по центру. Натисніть, щоб переглянути шаблон, щоб побачити результат. Все вийшло. Натискаємо зберегти.

     Але, щоб трохи урізноманітнити дизайн, розберемо ще кілька стилів CSS, які можна додати до цих дужок. Потрібно це вам чи ні, вирішуйте самі. Тут безліч варіантів. Змінюйте значення кольору.

     background: # e9967a; - колір фону.
     або background:url (http://www.fonstola.ru/large/201310/134392.jpg); зображення замість фону.
     height:50px; - Значення ширини блоку назви.
     text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); - задаємо тінь для тексту
     border-radius: 15px; - Закруглення кутів.
     -moz-box-shadow:0 0 30px #a28b53 inset;
     box-shadow:0 0 30px #a28b53 inset;
     -webkit-box-shadow:0 0 30px #a28b53 inset;

     Виділене синім кольором – внутрішня тінь поля назви. Тільки будьте уважні. Якщо міняєте колір, то тільки це #e9967a(Грати і шестизначне число). Двокрапка, дужки, тире, крапка з комою - все дуже важливо в коді.

     Як вирівняти за центром заголовок гаджета в бічній панелі.

     Так само спускаємося нижче і знаходимо такий рядок
     
     .sidebar .widget h2 (
     
     

     До дужок прописуємо text-align: center; Однак, у цьому випадку необхідно задати ширину, розмір шрифту, відступи. Тут я замість фону використовувала зображення та задала тінь для тексту та блоку.

     background:url(http://www.fonstola.ru/large/201310/134392.jpg);фон або зображення
     height:20px;
     width: 200px;
     border-radius: 13px;
     margin-left: 0px;
     padding-top:0px; / відстань від краю рамки/
     font-size: 16px; /розмір шрифту/
     text-align: center; /розташування тексту/
     text-shadow: 4px 3px 0px #d2bf94; 6px 5px 5px rgba(0,0,0,0.10); /тінь для тексту/
     box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /тінь для блоку/
     

     www.shpargalochki.ru

     Вертикальне та горизонтальне центрування у CSS рівня 3

     Ми можемо розширити обидва методи, щоб центрувати по горизонталі та по вертикалі одночасно.

     Побічний ефект абсолютного позиціонування абзацу полягає в тому, що абзац стає таким широким, яким він має бути (якщо тільки ми явно не вкажемо ширину). У прикладі нижче ми саме цього і хочемо: ми розміщуємо по центру абзац з одного слова ("Центр!"), так що ширина абзацу повинна дорівнювати ширині цього слова.

     Жовтий фон наочно демонструє, що абзац справді тієї самої ширини, що його вміст. Ми маємо на увазі, що розмітка залишилася колишньою:

     Центр!

     У плані вертикального центрування ця таблиця стилів схожа на таблицю з попереднього прикладу. Але тепер ми ще переміщуємо елемент на півдорозі через контейнер за допомогою правила 'left: 50%' і одночасно зрушуємо його вліво на половину своєї власної ширини у перетворенні 'translate':

     Div.container4 ( height: 10em; position: relative ) div.container4 p ( margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate( -50%, -50%) }

     Наступний приклад пояснює, навіщо потрібне правило margin-right: -50%.

     Коли форматор CSS підтримує flex, все стає ще легше:

     з цією таблицею стилів:

     Div.container6 ( height: 10em; display: flex; align-items: center; justify-content: center) div.container6 p ( margin: 0 )

     тобто. єдиним доповненням є justify-content: center. Так само, як 'align-items' визначає вертикальне вирівнювання вмісту контейнера, 'justify-content' так само визначає горизонтальне вирівнювання. (Насправді все дещо складніше, як випливає з їхніх назв, але у простому випадку, працює це саме так.). Побічний ефект від застосування властивості flex у тому, що дочірній елемент, у нашому випадку це Р, автоматично стає настільки малим, наскільки це можливо.

     Щоб вибрати потрібні елементи input з типом checkbox, можна скористатися селектором ‘:checkbox’. Приклад:

     де handler— обробник, який викликається під час події change

     Робота з об'єктом Callbacks у jQuery: використання списку callback-функцій

     Об'єкт Callbacks в jQuery дозволяє створити щось подібне до списку зворотних функцій, які будуть виконані при виклику службового методу fire(). При цьому при виклику методу fire() можна передати якийсь аргумент, який буде використаний кожною callback-функцією. Як це працює, ми розберемо зараз на кількох прикладах.

     Ловимо втрату фокусу. Метод blur() у jQuery

     Метод blur() в jQuery дозволяє призначити для певного елемента на сторінці обробник, який буде викликаний, як тільки буде втрачено фокус з даного елемента. Спочатку ця подія належала переважно до елементів форми - тегам input, проте останні версії браузерів здатні обробляти цю подію практично для всіх видів DOM-елементів.

     Вставте вміст перед вмістом вибраного об'єкта. Метод before() у jQuery

     Метод before() в jQuery дозволяє вставити певний контент або об'єкти перед вмістом кожного з багатьох зазначених об'єктів.
     Синтаксис методу простий:

1	.before(content, )

Друга варіація:

1	.before(function)

jQuery. Метод attr(). Як отримати або додати атрибут до елемента

jQuery дозволяє легко отримувати доступ до атрибутів потрібного елемента, витягуючи його значення або, навпаки, встановлюючи та змінюючи. Для таких маніпуляцій використовується метод attr().

Метод.appendTo() в jQuery. Додавання вмісту до кінця елементів

Метод appendTo(), по суті, виконує те саме завдання, що й метод append() . Різниця, за великим рахунком, лише у синтаксисі. Якщо для append() ми вказуємо потрібний селектор, додаючи до нього цей метод, де в дужках вказуємо, що саме потрібно додати в кінець вмісту зазначеного об'єкта, то для appendTo() те, що потрібно додати, знаходиться вже не в дужках як параметр методу, а безпосередньо перед самим методом як об'єкт, для якого викликається appendTo(). Різниця краще зрозуміла на наступному прикладі.

Метод.animate() в jQuery: анімація зображень, тексту та чого завгодно

Метод.animate() дозволяє створювати анімаційні ефекти за допомогою css-властивостей самих об'єктів. Метод має дві варіації з різною кількістю параметрів, що передаються

Конвертація відео за допомогою програми Movavi

Останнім часом, щоб з користю використовувати час, що займається дорогою на роботу і назад, намагаюся заздалегідь закачати в телефон якомога більше корисних відео роликів. Телефон на Андроїді, і зовсім недавно зіткнувся з проблемою, коли смартфон чомусь відмовився відтворювати відео у форматі AVI. Чи то програвач слабенький, чи специфіка операційки — не знаю. Однак довго проблему вирішувати не довелося: знайшов у мережі досить функціональний конвертер відео, який здатний не тільки перевести його з одного формату в інший, але і підготувати файл з урахуванням характеристик вашого пристрою. Ось коротка характеристика, як користуватися цією чудовою програмою.

Цей урок присвячений атрибутам та заголовкам у HTML, які є незамінними елементами будь-якого HTML документа. Ось чому так важливо володіти цим питанням. У цьому уроці пояснюється, що таке атрибут, наводяться приклади роботи з атрибутами. Також у уроці розглядаються заголовки, які у HTML, наводяться приклади заголовків.

Атрибути в HTML

Що таке атрибут? Під атрибутом розуміється параметр, який надає тегам певної інформації. Цих параметрів може бути дуже багато. Наприклад, за допомогою атрибутів ми можемо вирівняти текст абзацу по ширині, встановити стиль і розмір шрифту, встановити необхідні відступи і т.д. Атрибути прописуються всередині тегів, після них йде знак рівності, потім у подвійних лапках вказуються значення атрибута. Поділяються атрибути один від одного крапкою з комою.

Приклади роботи з атрибутами

Розглянемо роботу з атрибутами на прикладах. Найпростіший приклад – візьмемо тег абзацу

З атрибутом align. Напишемо:

Приклад вирівнювання абзацу по лівому краю

Атрибут align повідомляє браузеру, що даний абзац потрібно вирівняти по лівому краю екрана.

Для тега абзацу також можуть бути використані атрибути:

• align = "center" - вирівнювання по центру екрана;
• align = "right" - вирівнювання з правого краю;
• align="justify" - вирівнювання тексту по ширині екрана.

Тепер ускладнимо завдання - створимо HTML сторінку з використанням декількох різних атрибутів. Приклад такої сторінки матиме наступний код:

Атрибути в HTML

Атрибут кольору bgcolor дозволяє нам задати колір фону сторінки. Атрибути «center» і «justify» вирівнюють текст у собі, відповідно, по центру і ширині.

Заголовки в HTML

з індексом. Таких індексів всього шість - від 1 до 6, вони вказують на розмір заголовка (

є найбільшим заголовком,

- Найменшим). Наприклад створимо веб-сторінку, яка має кілька заголовків. Код цієї сторінки матиме вигляд:

Атрибути в HTML

Що таке атрибут? Під атрибутом розуміється параметр, який надає тегам певної інформації. Цими параметрами може бути необмежену кількість.

Заголовки в HTML

Для створення заголовка на сторінці використовується спеціальний тег з індексом. Таких індексів лише шість - від 1 до 6, вони вказують на розмір заголовка.

У цьому прикладі ми маємо два заголовки — заголовок першого рівня тут немає атрибутів, заголовок другого рівня — має атрибут вирівнювання по центру. Після заголовків йдуть абзаци, які також мають атрибути.

Ось за таким принципом працюють з атрибутами та заголовками в HTML. Нічого складного тут нема. Обов'язково слід потренуватися власними прикладами у тому, щоб закріпити отриману цьому уроці інформацію.

Facebook

Twitter

Вконтакте

Google+

Встановлення програм