Урок 12. Изменение внешнего вида с помощью CSS

В данной статье я немного расскажу о возможностях CSS.

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

CSS можно смело называть одной из лучших сторон HTML. Так как HTML в основном предназначен для общего представления передаваемой информации, а CSS предназначен для более тонкой настройки внешнего вида сайта.


Данный текст напечатан размером 31

Данный текст напечатан шрифтом Gabriola

Данный текст напечатан шрифтом Gabriola размером 31


В данном примере мы использовали атрибут style для задания типа шрифта с помощью команды font-family и размер шрифта с помощью команды font-size. Обратите внимание на то, как в последнем из параграфов мы установили тип и размер шрифта, разделяя при этом параметры с помощью точки с запятой.

Одной из лучших особенностей CSS можно считать, централизованное управление внешним видом страниц сайта. При использовании CSS вам больше не придется использовать атрибут style в каждом тэге. Теперь вам нужно указать браузеру всего один раз то как будет выглядеть текст вашей страницы:


Моя первая CSS страница

Моя первая CSS страница

Добро пожаловать на мою первую CSS страницу

В данной статье я немного расскажу о возможностях CSS.


 

В данном примере правила CSS выставлены в разделе head и применяются ко всей странице. Для этого мы используем тэг <style type=»text/css»>, который даёт соответствующее указание браузеру.

В этом примере заголовки будут выделены шрифтом Constantia размером 41px. А все подзаголовки будут выделены шрифтом Georgia размером 25px. А весь текст в
параграфах будет выделен шрифтом Buxton Sketch размером 15px.

Так же у вас имеется возможность задать правила CSS с помощью отдельного документа. Тогда данные правила CSS можно будет применить ко всем страницам. Это очень удобно так как если вам вдруг понадобится изменить тип или размер шрифта для большого сайта с сотнями страниц. Сейчас я покажу ещё несколько возможностей CSS, но вы можете изучить всё в рубрике Уроки CSS данного сайта.

Что ещё можно сделать с помощью CSS?

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

html

Ещё немного о CSS.

Также с помощью CSS вы можете управлять полями, выравниванием, шириной, высотой и т.д.

Например,


Моя первая CSS страница


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

Например,

 

html

В данном примере картинка помещается на 45 пикселей снизу и на 25 пикселей справа в окне браузера. Таким же образом вы можете поместить в другое место.

Понравилось?

Вам не удастся выучить CSS всего за пару минут. Поэтому для полного его изучения вы можете перейти в рубрику Уроки CSS.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *