Реальный пиарHTMLУроки HTML → Урок 12: Внешний вид (CSS)

Урок 12: Внешний вид (CSS)

уроки html

Хорошо было бы придать страницам достойный их содержания вид?
Разумеется, но как?

Для этого используйте 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>

будет выглядеть в браузере:
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-сайт в Internet, чтобы его увидел весь мир!


Источник: http://ru.html.net

Рекомендуем



Урок 11: Ещё о таблицах Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:


Урок 13: Публикация страниц Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP


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