CSS — обёртка сайта

Создание любого сайта начинается с HTML. Только потом к документу начинают подключать CSS и JavaScript. За счёт последних двух элементов Интернет-страница становится привлекательной для пользователей, выглядит аккуратнее и производит хорошее впечатление.

Для лучшего запоминания языка CSS не стоит заучивать всё и вся. Для начала хватит немного практики, чтобы набить руку. Людям же, которые знают азы английского языка, в этом деле, конечно, будет попроще.

Как создать?

Чтобы получить CSS-документ, нужно следовать следующим правилам:

В папке или на рабочем столе нажать праву кнопку мыши и создать любой текстовой документ (.txt, .doc, .docx);

Открыть его и найти клавишу «Сохранить как»;

Когда появится новое окно, внизу в нём будет находиться «Имя файла» и строчка с названием файла. Здесь следует к имени файла добавить .css (если файл назывался «style», то имя должно принять вид «style.css»);

Нажать «Сохранить»

Основы языка стилей

Для подключения CSS-документа к HTML-документу чаще всего используют следующий тег, который располагают строго между и :HTML:

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

Пример No1:

HTML:

Класс

CSS: .content {…}

Пример No2:

HTML:

Идентификатор

CSS: #content {…}

Как и в HTML, здесь приемлемо написание комментариев. Они бывают однострочные // и двустрочные /* */. Обычно их пишут новички, чтобы не запутаться:

CSS: color: blue; // синий цвет

color: yellow ; /* жёлтый цвет */

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

CSS: .content {

color: green; // зелёный цвет

font-size: 20px; // размер буквы 20 пикселей

Стоит отметить, что цвет можно задавать несколькими способами. Например, записи

color: red;

color: #FF0000;

color: rgb (255, 0, 0);

идентичны по своей функции. При желании в Интернете можно найти таблицу цветов-HTML и поэкспериментировать.

В CSS часто прописывают характеристики изображений: ширину и высоту.

CSS: .lac img {

height: 200px; // высота изображения в пикселях

width: 100px; // ширина изображения в пикселях

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

Заключение

В данной статье описаны не все стили и методы их использования, в действительности их насчитывается более 100. Базового материала может хватить только для получения четверки по информатике за домашнюю работу, и то при условии, если преподаватель добрый. Чтобы научиться делать сайты профессионально и зарабатывать на них деньги, нужно немало практиковаться.

Приглашаю вас в свой паблик Вконтакте! Подписывайтесь.