Вёрстка с нуля. Изучаем язык CSS. Основные понятия и функции

Эта статья — продолжение моих конспектов по вёрстке сайтов. Здесь → можно почитать о языке программирования html.

Что такое CSS

CSS — каскадная таблица стилей. Эту таблицу подключают к странице сайта, и браузер отобразит страницу в соответствии с заданными стилями.

*Стили можно прописывать как внутри самого HTML документа, так и в виде отдельного файла, а затем подключить его к html-странице

  • Создаём новый документ в notepad++ и сохраняем его в папке сайта. Расширение файла указываем .css
  • Прикрепляем таблицу стилей к странице сайта. Для этого в html коде между тегами <head>и </head> прописываем тег <link /> с атрибутами href=»адрес файла scc» type=»text/css» rel=»slylesheet»(stylesheet означает, что внешний файл, который мы подключили, будет являться для html-страницы файлом стил,я и все стили, которые будут прописаны в нём, будут применены к нашей html-странице)

Пример: <link href=»адрес файла scc» type=»text/css» rel=»slylesheet» />

*Значения type и rel не меняются никогда.

Синтаксис css

1) селектор { } — элемент, с помощью которого указываем для каких тегов на html-странице данное правило применено. (Например, для всех тегов абзаца <p></p> задаём красный цвет) В селекторе мы отбираем те самые элементы, для которых будет применено данное правило.

2) свойствоN: значение;

Пример: селектор {

                    свойство1: значение;

                    свойство2: значение;

                   

                    свойствоN: значение;

}

Селекторы

1)Селектор по названию тега: p {

                                                                  color: #262626;

                                                                 }

Применяется для того, чтобы задать некое правило для тегов одного типа html-страницы

2)Селектор по классу:                  .lists {

                                                                    color: #696969;

                                                                }

Применяется для того, чтобы задать некое правило для выборочного числа элементов, которые имеют единый класс, который указывается: .название класса.{ свойства }

В html-коде задаем класс для нужных элементов с помощью атрибута class со значением названия класса. class=»название класса»

3)Селектор по идентификатору (id-селектор): #header {

                                                                      color: #c23636;

                                                                  }

Применяются для того, чтобы задавать стили для какого-то конкретного элемента на странице, обозначаются: #название идентификатора {свойства}. В html-коде задаем уникальный идентификатор с помощью атрибута id=»название идентификатора»

4)Контекстный селектор:             p span {

                                                                  color: #d44a4a;

                                                                 }

5)*-означает, что данный стиль будет применен для всех элементов.

С помощью него можем задавать некие условия задания стиля. Например, стиль будет применен для тега span только в том случае, если он находится внутри тега p. В контекстном селекторе можем использовать не только элементы тегов, но и классов.

6)Группировка:                                  h2, h3 {

                                                                  color: #243f7a;

                                                                 }

Задаём один и тот же стиль для нескольких элементов одновременно. Селекторы элементов перечисляются через запятую. В селекторе группировка можем использовать не только элементы тегов, но и классов, id-селекторы и т.д.

Как найти нужный цвет

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

Цвет задается с помощью свойства color и знака # перед названием цвета: color: #код цвета;

Шрифты

  • Задаётся с помощью свойства font-family и названием шрифта: font-family: название шрифта;
  • Можно указывать не один шрифт, а все шрифты с помощью которых браузер может отображать нужный текст. Пользователь заходит на сайт, браузер проверяет, есть ли первый в списке шрифт у данного пользователя. Если шрифта нет, то браузер будет поочередно проверять все последующие шрифты. Если не будет ни одного шрифта, то выводит указанную нами в конце списка надпись sans-serif или serif.

sans-serif и serif означают универсальное семейство шрифтов, sans-serif шрифты без засечек, serif — шрифты с засечками.

*стараться перечислять те шрифты, которые есть на компьютерах большинства пользователей: arial, verdana и т.д.

*если используется шриф из нескольких слов, то название шрифта заключается в кавычки.

  • Размер шрифта задаётся с помощью свойства  font-size со значением размера шрифта.

Единицы измерения могут быть разными:

  • пиксели px; 16px — размер шрифта по умолчанию
  • пункты(1 пункт=1/72 дюйма) pt; 12pt — размер шрифта по умолчанию
  • проценты %; 100% размер по умолчанию.
  • em-единицы: em; 1em — значение по умолчанию. 1.1 em=110%

На практике применяются % или px.

  • Для того чтобы сделать все буквы заглавными используется свойство text-transform со значением uppercase; text-transform: uppercase;

Маленькими буквами: text-transform: lowercase;

Жирный и курсивный текст

*Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) или подчёркивания (_)

  • Жирный шрифт задаётся с помощью класса: font-weight со значением bold. В html-коде для нужного элемента указываем атрибут class  со значением имени класса, заданном в сss. class=»имя класса»

.имя класса {

                  font-weight: bold;

}

Отменить жирный шрифт:

{

                  font-weight: normal;

}

-Курсив задаётся с помощью класса: font-style со значением  italic. В html-коде для нужного элемента указываем атрибут class  со значением имени класса, заданном в сss.

class=»имя класса»

.имя класса {

                  font-style: italic;

Выравнивание текста

  • Горизонтальное выравнивание. Задаётся с помощью свойства text-align со значением center.

text-align: center;

  • Выравнивание по левому краю. Задаётся с помощью свойства text-align со значением center.

text-align: left;

  • Выравнивание по правому краю. Задаётся с помощью свойства text-align со значением center.

text-align: right;

  • Выравнивание по ширине. Задаётся с помощью свойства text-align со значением center.

text-align: justify;

Красная строка

Задаётся с помощью свойства text-indent со значением расстояния в px или % отступа красной строки. text-indent: расстояние;

Межстрочный интервал

Задаётся с помощью свойства line-height со значением размера интервала в px, pt или множителях. Множитель указывается в виде числа, которое при отображении умножается на число размера шрифта. Самым оптимальном считается 1,5 интервал.

line-height: размер интервала;

Универсальная форма задания шрифта

Свойство font позволяет задать все характеристики шрифта в виде одной строки. Обязательные параметры свойства font: значение font-size, значение font-family; последовательность именно такая. Значения пишутся через пробел.

Необязательные парметры: свойства line-height. Прописывается после размера шрифта через слеш; свойство font-style и font-weight.

Обязательная последовательность:  font-style font-weight font-size/ line-height font-family;

Пример: font: italic bold размер шрифта/1.5 название шрифтов;

Ссылки

1)ссылка еще не была посещена пользователем (обычно синяя)

2)наведен курсор на ссылку

3)кликаем по ссылке(обычно красная)

4)ссылка уже была посещена (обычно фиолетовая)

Создаются с помощью псевдоклассов. Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя.

Пишем селектор по тегу а: указываем псевдокласс.

1 псевдокласс link -ссылка еще не была посещена. подбираем цвет с помощью color

a:link {

       color: значение цвета для ссылки;

}

2 псевдокласс visited — ссылка уже была посещена. подбираем цвет с помощью color

a:visited {

       color: значение цвета для ссылки;

}

3 псевдокласс hover — наводим курсор на ссылку. подбираем цвет с помощью color

a:hover {

       color: значение цвета для ссылки;

}

4 псевдокласс activе — кликаем по ссылке. подбираем цвет с помощью color

a:active {

       color: значение цвета для ссылки;

}

  • Управление подчеркиванием ссылок. Создаётся псевдоклассом hover и свойством

text-decoration. Если необходимо, чтобы при наведении курсором мыши подчеркивание исчезало, устанавливаем значение no;

a:hover {

       text-decoration: none;

}

*свойство text-decoration применяется не только для ссылок, но также и к обычному тексту.

значения свойства:

  • underline; — задаёт подчеркивание текста снизу.
  • overline; — задаёт подчеркивание текста сверху.
  • line-through; — задаёт зачеркивание текста.

Списки

  • Свойство list-style-type позволяет управлять внешним видом маркеров списка.

Значения:

Для нумерованных списков:

  • decimal — арабские цифры
  • lower-roman — римские цифры в нижнем регистре (маленькие римские)
  • upper-roman — заглавные римские цифры.
  • lower-alpha — маленькие латинские буквы
  • upper-alpha — большие латинские буквы

Для маркированных списков:

  • circle; — маркеры в виде кружочков
  • disk; — маркеры в виде закрашенных кружочков
  • squarе; — в виде квадратиков.

Чтобы отменить маркеры для списка:

  • none; отменяет маркеры.

Маркеры в виде изображений создаются с помощью свойства list-style-image со значением адреса картинки по отношению к файлу таблицы стиля. url(путь к картинке);

list-style-image: url (путь к картинке);

  • Свойство list-style-position — определяет,как будет размещаться маркер относительно текста. Значения: outside (за границей элемента списка), inside (маркер обтекается текстом)
  • Универсальное свойство позволяет задавать тип маркера, позиционирование маркера,избражение в качестве маркера. Свойство list-style со значениями: внешнего вида маркеров(decimal и т.д.), позиционирование маркера(inside или overside) и изображение маркера. Порядок именно такой. Нет обязательных значений.

Рамки для элементов

  • Для создания рамки необходимо задать 3 спец.св-ва:

1) border-width:толщина рамки (в пикселях); — задаёт толщину рамки.

2) border-style: тип рамки; -задаёт внешний вид рамки.значения: solid — сплошная рамка; dashed — в виде пунктира; dotted — в виде точек.

3) border-color: значение цвета; — задаёт цвет рамки.

  • Универсальное свойство border со значениями толщины рамки, типа рамки и цвета рамки.

border: толщина рамки(px) тип рамки цвет рамки;

  • Свойство border-top — позволяет создать рамку сверху. (Значения применяются те же, что и у border)

border-bottom — рамка снизу

border-left — рамка с левого края

botder-right — рамка с правого края

Наследование свойств

Наследование — передача каких-то свойств от родителя к потомкам.

Чтобы применить наследование нужно задать родителю определенные стилевые свойства, которые автоматически перейдут всем его потомкам.

*Не все свойства наследуются. Например, font-size заголовка не наследуется. Какие св-ва наследуются,какие нет можно посмотреть на сайте htmlbook.ru/css

Также если к потомкам применен специальное свойство, он также не будет изменяться на родительский.

Приоритет установки свойств

  • Если для элемента наследуется одно и то же свойство от нескольких родителей, но у этого свойства разные значения, то браузер возьмёт значение того свойства, которое ближе всего к элементу.
  • Приоритет применения стилей. Если для одного элемента задан стиль с помощью разных селекторов с разным значением, то используется следующая приорететность:

1)Встроенный стиль- те стили, которые задаются с помощью атрибута style в html.

2)Селектор по идентификатору

3)Селектор по классу

4)Селектор по названию тега

  • Если для одного элемента заданы несколько стилей с помощью одного и того же селектора с одинаковым приоритетом, то браузер будет применять тот стиль, который находится ниже.

Как задавать размеры для блочных элементов

  • Одну таблицу стилей можно подключать к нескольким страницам сайта
  • Необходимо задать для абзаца идентификатор в html-коде и для данного элемента в таблице стилей задаём стиль с помощью id-селектора. Для удобства задаём рамку с помощью свойства border: значение;
  • С помощью свойства width — задаём ширину блока в px или %. Если задаем в процентах, то не зависимо от разрешения экрана блок будет занимать указанное количество процентов от максимального. Если в пикселях, то всегда фиксированное значение.

*Свойства width и height задают ширину и длину, которая отводится под контент. Это не конечная ширина блока.

  • С помощью свойства height-задаём длину блока в рх или % (как правило, длина не задается фиксированно, а задаётся контентом)
  • Свойство overflow- определяет как отображать контент, который не помещается в заданную высоту блока. Значения свойства: visible — означает отображать контент, который не поместился в блок (такое же значение стоит по умолчанию); значение auto — еслииконтент не помещается в блок, добавляет полосу прокрутки, которая позволяет просматривать не поместившийся контент; scroll — полосы прокрутки добавляются, даже если они не требуются;hidden — весь контент, который не помещается в блок, не отображается браузером.
  • Минимальная ширина и максимальная ширина. Задаётся с помощью свойств min-width и max-width.  Минимальная высота и максимальная высота min- height и max- height.

Отступы для блочных элементов

Отступы между блоками. Для задания отступа используется свойство margin. Для того, чтобы убрать отступ, установленный по умолчанию, используется значение 0. margin: 0; Отступы не наследуются и применяются лишь для того элемента, который был указан. Отступы задаются в px.

  • Чтобы задать отступы только с одной стороны, нужно указать свойство margin-bottom (отступ снизу); margin-top (сверху); margin-right(справа); margin-left(слева).

Пример. margin-bottom: размер;л

  • Сокращенная форма записи для записи разных отступов с 4х сторон. margin: значение margin-top значение margin-right значение margin-bottom значение margin-left;

Также возможно указать 2 значения. Тогда первое будет означать размер отступа сверху и снизу, а второе справа и слева. margin: кол-во px для верха и низа кол-во px для правой и левой стороны. Для задания отступа используется свойство margin. Для того, чтобы убрать отступ, установленный по умолчанию, используется значение 0. margin: 0; Отступы не наследуются и применяются лишь для того элемента, который был указан. Отступы задаются в px.

  1. Чтобы задать отступы только с одной стороны, нужно указать свойство margin-bottom (отступ снизу); margin-top (сверху); margin-right(справа); margin-left(слева).

Пример. margin-bottom: размер;л

  • Сокращенная форма записи для записи разных отступов с 4х сторон. margin: значение margin-top значение margin-right значение margin-bottom значение margin-left;

Также возможно указать 2 значения. Тогда первое будет означать размер отступа сверху и снизу, а второе справа и слева. margin: кол-во px для верха и низа кол-во px для правой и левой стороны.

*Чтобы блок был выровнен равноудаленно от левой и правой стороны устанавливаем значение auto.

  • Между контентом и границей блока. Задаётся с помощью свойства padding: кол-во пикселей.

В остальном всё аналогично свойству margin (см.выше).

*Внутри блока находятся свойства width и height, которые задают ширину и длину, которая отводится под контент. Далее с помощью свойства padding задается отступ от контента до рамки. Далее с помощью свойства border задается рамка, которая также имеет свою ширину. Также прибавляем значение margin.=> Конечная ширина блока зависит от суммарной составляющей всех этих параметров.

Задание фона

  • Задаётся с помощью свойства background-color: #значение цвета;
  • Для задания картинки в качестве фона используется свойство background-image: url(адрес картинки по отношению к файлу стиля); по умолчанию картинка повторяется по всему периметру, который отводится под элемент.
  • Для управления повторением картинки прописываем свойство background-repeat: значения: 1) repeat-x;  — картинка повторяется строго по горизонтали (оси х).2) repeat-y; — картинка повторяется строго по вертикали (оси у) 3) no-repeat; — картинка не будет повторяться, а будет иметь свой оригинальный размер.
  • Чтобы сдвинуть изображение используется свойство background-position:координата по горизонтали координата по вертикали (в пикселях или %);
  • Чтобы задавать местоположение картинки по горизонтали существуют слова: left center right по вертикали: top center bottom

Пример: background-position: right top; — картинка будет размещена в правом верхнем углу.

  • Универсальное свойство- background: значение свойств background-color background-image background-repeat background-position; Последовательность свойств не имеет значения. Нет обязательных значений.

Таблица

  • -border-collapse: свойство для указания, как отображать рамку в таблице. Значения: collapse;-скажет браузеру, что таблица должна быть одинарной.

Форма

  • Для того чтобы сбросить значение отступов по умолчанию вводим селектор * , который означает, что свойства, которые он задаёт будут применены ко всем элементам.

Значение: padding:0; margin:0;

*{

padding:0;

margin:0;

}

  • Чтобы фон формы не совпадал с общим фоном страницы необходимо заключить в html коде форму в тег <div> </div>

*Если рядом с тегом в css прописывается знак [ ] — это означает, что данный стиль будет применен только для тех тегов, значением которых в html коде является значение, указанное в квадратных скобках. Например, значение text указывает, что данный стиль должен быть применен только для тех тегов, у которых атрибут type равен значению текст. Теги со знаком [ ] прописываются через запятую.

Пример: название тега [type=»значение»], название тега [type=»значение»],  название тега, название тега {

                              свойство: значения;

                              свойство: значения;

                              свойство: значения;

}

*Длину и ширину текстовой области формы можно изменить в html коде с помощью обязательных атрибутов rows и cols, изменив их значения.

Плавающие элементы

  • Для выравнивания элементов используется свойство float со значением left — по левому краю; right — по правому краю. Контент в данном случае будет обтекать элемент с противоположной стороны.

*При задании тегов див для основных блоков в качестве имени идентификатора принято использовать следующие названия: id=»header» — для шапки сайта id=»sidebar» — для сайдбара id=»content»-для контента id=»footer»- низ сайта id=»wrapper» — значение общего тега для всех блоков.

  • Для того, чтобы отменить обтекание определенным блоком создаётся очищающий блок в html коде. <div> class=»clear(пример названия)»</div>. В файле стиля задается селектор нужного класс со свойством: clear  со значениями: left — отменено обтекание слева, right — отменено обтекание справа both- отменено обтекание с обеих сторон.

.clear(пример названия) {

       clear:both/left/right;

}

*Если внутри какого-то элемента применяем свойство float, то для родителя задавать свойство overflow: hidden;

Позиционирование

  • Для вёрстки сложных шаблонов.
  • За позиционирование отвечает свойство position со значениями:

1)absolute;-абсолютное позиционирование-местоположение задается по всему окну;

2) relative;- относительное позиционирование-местоположение задаётся относительно фиксированного расположения элемента. Расположение задаётся в файле html.Место, где была изначально закреплена картинка другие элементы не могут занимать, даже после её перемещения.

  • Чтобы элемент разместить на какой-то части странице (например, в углу контента), необходимо контенту задать свойство position: relative; а элементу свойство position: abslute;

3)fixed;-фиксированное позиционирование.  Отличается от абсолютного позиционирования в том, что его координаты закрепляются при прокрутке сайта. (Пример: плывущая вместе с прокруткой реклама на сайте).

Координаты для элемента задаются с помощью свойств: top-Указывает отступ от верней границы окна браузера, right- указывает отступ от правой границы окна браузера ,left- указывает отступ от левой границы окна браузера bottom- указывает отступ от нижней границы окна браузера.

  • right,left-задают координаты по горизонтали (в px или %)
  • top,bottom-задают координаты по вертикали (в px или %)

*С помощью плагина firebag можно изменять какие-то элементы или подбирать какие-то значения. На сам код изменения не влияют. Но можно предварительно в браузере  посмотреть изменения при разных манипуляциях.

Выравнивание элементов

  • Свойство display — задаёт, как должен браузер выводить данный элемент.

Для того, чтобы разместить инлайн элемент (например, картинку) по центру используется следующая конструкция:

margin: 0 auto;

display: block;-означает, что данный элемент должен быть выведен браузером как блочный элемент.

*Таблица reset.css применяется для того, чтобы сбросить все значения браузера по умолчанию в нулевые значения.

Для этого в файле style.css прописываем конструкцию: @import url(reset.css);

* Чтобы убрать межстрочный интервал, используется свойство: line-height со значением 1. Это нужно для того чтобы выровнить строчку по центру блока.

text-transform: capitalize; делает — первая буква заглавная, остальные строчные.

Дополнение

outline отвечает за задание границы вокруг элемента.

чтобы избавиться от границы: outline: 0;

 

Подписывайтесь на обновления моего блога, чтобы не пропустить появление в нем новых статей!

1 thought on “Вёрстка с нуля. Изучаем язык CSS. Основные понятия и функции”

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

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