CSS — каскадные таблицы стилей

Css (Cascading Style Sheets) – каскадные таблицы стилей, применяемые для оформления элементов веб-страниц. Их использование позволяет создавать разнообразные эффекты, неповторимый дизайн, привлекающий новых читателей и клиентов на страницы вашего веб-сайта. В данной статье вы познакомитесь с самыми основами css, узнаете, как подключать файлы css к веб-документам и как при помощи кодов css оформлять отдельные элементы сайта.

Для начала вам будет необходимо создать любой html — документ со стандартной структурой:

..>

...

...

Теперь создайте где-нибудь на своем компьютере документ css, назовите его как вам нравится, например, example.css.

Теперь можно подключить каскадную таблицу стилей к вашему веб-документу, т.е. указать внутри веб-страницы каким-либо образом адрес, по которому можно найти таблицу стилей. Существует несколько способов сделать это.

Первый из них — это указать адрес таблицы стилей в параметрах тэга в «голове» веб-страницы.

Второй — использовать директиву @import, включив ее между тэгами в «голове» страницы.

@import url (example.css);

Теперь можно приступать непосредственно к оформлению html – страницы. Вы, наверное, уже умеете использовать различные html – тэги для создания структуры веб — документа. Вот простой пример оформления текста в отдельный абзац:

Ваш текст.

Еще ваш текст. Еще ваш текст. Еще ваш текст. Еще ваш текст. Еще ваш текст.  ….

Вы увидите, что предложение «Ваш текст.» отображается в виде отдельного абзаца, отдельно от прочего текста.

Попробуйте оформить этот абзац при помощи правил таблицы стилей. Для этого откройте css  документ и введите следующий код:

p {

color: red;

}

Если вы все правильно сделали, то теперь ваш абзац будет иметь красный цвет. В таблице стилей прописано правило для всех элементов «p», определяющее для них красный цвет текста.

Правило для элемента должно быть заключено в фигурные скобки { … } и отделено от других правил точкой с запятой «;». Можно добавлять сколько угодно правил для одного и того же элемента. Пусть теперь абзац на странице отображается жирным красным текстом, имеет отступ от левого края страницы 10px.

p {

color: red;

font-weight:bold;

margin-left:10px;

}

Подробнее о спецификации css можно будет ознакомиться в статьях рубрики блога. Вы найдете огромное количество правил, позволяющих оформлять ваши веб-страницы любым понравившемся вам способом.

One thought on “CSS — каскадные таблицы стилей

  1. I simply want to say I am just beginner to blogs and certainly savored your website. Most likely I’m going to bookmark your website . You absolutely come with great stories. Appreciate it for sharing your blog site.

    Ответить

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

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