Урок 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>

будет выглядеть в браузере:

В этом примере мы использовали атрибут 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>Надпись с CSS оформлением стиль "arial"<---/h1>

             <---h2>Надпись с CSS оформлением стиль "courier"<---/h2>
             <---p>Надпись с CSS оформлением стиль "times new roman"  <---/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: YYY;">

Попробуйте вставить эти примеры на ваши страницы - как показано выше, а также как CSS в разделе head.

CSS это ничего, кроме цветов и типа шрифта?

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

Пример 3:

           <---p style="padding:25px;border:1px solid Green;">Мне нравится CSS<---/p>

будет выглядеть в браузере:

С помощью свойства float элемент может "всплывать" вправо или влево. Это иллюстрирует следующий пример:

Пример 4:

           <---img src="чарли.jpg" alt="Чарли Чаплин" style= "float:left;" />

           
Чарли Чаплин родился в Лондоне 16 апреля 1889 года. 
           За свою жизнь он снялся в огромном количестве фильмов, популярность которых до сих пор не угасла. 
           Charles Chaplin всегда оставался близок людям, так как был выходцем из народа. 
           В детстве он познал всю тяжесть нищеты и голода...

будет выглядеть в браузере:

Чарли Чаплин родился в Лондоне 16 апреля 1889 года. За свою жизнь он снялся в огромном количестве фильмов, популярность которых до сих пор не угасла. Charles Chaplin всегда оставался близок людям, так как был выходцем из народа. В детстве он познал всю тяжесть нищеты и голода...

В этом примере один элемент (изображение) всплывает слева, а другой элемент (текст) заполняет остальное.

С помощью свойства position вы можете поместить элемент точно в нужном месте на странице:

Пример 5:

           <---img src="чарли.jpg" alt="Чарли Чаплин" style="position:absolute;bottom:120px;right:120px;" />

• Показать пример

В этом примере изображение помещается на 50 пикселов снизу и на 10 пикселов справа в окне браузера. Но вы можете поместить его так же точно в любом другом месте. Попробуйте. Очень легко и очень круто, а?

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

Вы не выучите CSS за 10 минут. И, как мы говорили, этот урок - лишь краткое введение. Позднее вы можете прочитать Учебник CSS.

Теперь сосредоточимся на HTML и перейдём к следующему уроку, где вы узнаете, как показать ваш web-сайт в Internet, чтобы его увидел весь мир!