Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук


Вітаю Вас, Гість · RSS 24.10.2017, 00:47
На головну » Підручники » Підручник HTML » Урок 12: Зовнішній вигляд (CSS) - Підручник HTML
Урок 12: Зовнішній вигляд (CSS)

Добре було б надати сторінкам гідний їх змісту вигляд?

Зрозуміло, але як?

Для цього використовуйте Cascading Style Sheets (CSS) / каскадні таблиці стилів. У цьому уроці ми дамо короткий опис CSS. Пізніше ви можете прочитати наш підручник CSS. Так що прийміть цей урок, так би мовити, для початку.

CSS це краща половина HTML. Але, в плані кодування, їх статус різниться: HTML піклується про загальний виведення інформації (її структурі), у той час як CSS виробляє тонке налаштування зовнішнього вигляду (layout).

Як показано в уроці 7, CSS може додаватися атрибутом style. Наприклад, ви можете встановити тип і розмір шрифту параграфа:

Приклад 1:

        <p style="font-size: 20px;">Це надруковано розміром 20</p>
        <p style="font-family: courier;">Це надруковано шрифтом Courier</p>
        <p style="font-size:20px; font-family: courier ">Це надруковано шрифтом Courier розміром 20</p>

буде виглядати в браузері:

Це надруковано розміром 20

Це надруковано шрифтом Courier

Це надруковано шрифтом Courier розміром 20


У цьому прикладі ми використовували атрибут style для специфицирования типу шрифту (командою font-family) і розмір шрифту (командою font-size). Зверніть увагу, як в останньому параграфі ми одночасно встановили тип і розмір, розділяючи параметри крапкою з комою.

Обсяг роботи значно зросте?

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

Приклад 2:

        <html>

            <head>
            <title>My first CSS page</title>

            <style type="text/css">
            h1 {font-size: 30px; font-family: arial}
            h2 {font-size: 15px; font-family: courier}
            p {font-size: 8px; font-family: times new roman}
            </style>


            </head>

            <body>
            <h1>My first CSS page</h1>
            <h2>Welcome to my first CSS page</h2>
            <p>Here you can see how CSS works </p>
            </body>

        </html>

Показати приклад

У цьому прикладі правила CSS вставлені в розділ head і застосовуються до всієї сторінці. Для цього використовується тег <style type="text/css">, який дає відповідну вказівку браузеру.

У цьому прикладі заголовки на сторінці будуть виведені шрифтом Arial розміром 30px. Всі підзаголовки - Courier розміром 15. А весь текст у звичайних параграфах буде шрифтом Times New Roman розміром 8.

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

Що ще можна зробити за допомогою CSS?

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

        <p style="color: green;">Зелений текст</p>
        <h1 style="background-color: blue;">Заголовок на синьому тлі</h1>
        <body style="background-image: XXX;">

Спробуйте вставити ці приклади на ваші сторінки - як показано вище, а також як CSS в розділі head.

CSS це нічого, окрім кольорів і типу шрифту?

Крім зміни виду: кольори, типу шрифту і т. п., CSS можна використовувати також для керування настройками сторінки та поданням (поля, спливання, вирівнювання, ширина, висота і т. д.). Регулюючи різні елементи за допомогою CSS, ви можете відображати ваші сторінки елегантно і точно.

Приклад 3:

        <p style="padding: 25px; border: 1px solid red;">Мені подобається CSS</p>

буде виглядати в браузері:

Мені подобається CSS


За допомогою властивості float елемент може "спливати" вправо або вліво. Це ілюструє наступний приклад:

Приклад 4:

        <img src="bill.jpg" alt="Bill Gates" style="float:left;" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
        quis nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat...</p>

буде виглядати в браузері:

Bill Gates

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...


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

За допомогою властивості position ви можете помістити елемент точно в потрібному місці на сторінці:

Приклад 5:

<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Показати приклад

У цьому прикладі зображення міститься на 50 пікселів знизу і на 10 пікселів справа у вікні браузера. Але ви можете помістити його так само точно в будь-якому іншому місці. Спробуйте. Дуже легко і дуже круто, а?

"Круто", так. Але "легко"?

Ви не вивчите CSS за 10 хвилин. І, як ми говорили, цей урок - лише короткий вступ. Пізніше ви можете прочитати Підручник CSS.

Тепер зосередимося на HTML і перейдемо до наступного уроку, де ви дізнаєтеся, як показати ваш web-сайт в іетернеті, щоб його побачив весь світ!
<< Урок 11: Ще про таблиці
Всього коментарів: 1
1  
Це CSS чи HTML?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]