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

<< Урок 11: Ещё о таблицах

Урок 13: Публикация страниц >>