Технология css: Основы CSS — Руководство для самых маленьких

Что такое CSS, для чего нужны стили CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

Такая технология:

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

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

Правило состоит из селектора и блока объявлений.

css1.png

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс {свойство: значение;}». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор {свойство: значение;}». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Подключение CSS

CSS можно связать с HTML несколькими способами:

• внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
• добавить тег <style> с атрибутом type=»text/css»;
• подключить внешнюю таблицу стилей: <link rel=»stylesheet» href=»путь до style.css» type=»text/css»/>.

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

Введение в CSS | htmlbook.ru

После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h2>Флексагон</h2>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
   три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
   ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
   и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
   склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
   стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
   что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
   Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

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

Типы стилей

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

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

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

1. font-color
2. color
3. font-family
4. text
5. font-size

2. Что такое стиль?

1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
2. Язык разметки гипертекстовых документов.
3. Набор правил форматирования элементов веб-страницы.
4. Метод преобразований текстовых документов в HTML.
5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

1. Colorful Style Sheets
2. Cascading Style Sheets
3. Computer Style Sheets
4. Creative Style Sheets
5. Common Style Sheets

Ответы

1. color

2. Набор правил форматирования элементов веб-страницы.

3. Cascading Style Sheets

что это такое, для чего он нужен и как с его помощью обозначить внешний вид сайта

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.

Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.

Принцип работы CSS

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

CSS применяется для выполнения стилистических решений, а также для компоновки документов типа HTML: задачи высоты, колонок, размещения элементов и так далее.

Как и где можно написать CSS

• CSS может быть прописан как атрибут непосредственно в HTML.

• Можно применять тег<style>в теге<head>документа HTML.

•  CSS также можно прописать отдельным файлом и присвоить ему расширение .css. После этого необходимо связать файл через тег<link> . И HTML

Для чего нужен CSS

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

Что лучше: простой HTML или HTML с CSS

Многие разработчики сайтов задаются вопросом, зачем нужен CSS, если можно использовать простой HTML. Скорее всего, они только познают разработку сайта и имеют ряд пробелов в знаниях. Суть в том, что HTML применяется для составления структуры содержимого страницы. А CSS позволяет отформатировать это содержимое, сделать его более привлекательным для пользователей.

Когда был создан World Wide Web, разработчики применяли только один язык — HTML. Его использовали как средство вывода структурированного текста. У автора в распоряжении был скудный функционал. Максимум, что можно было сделать – обозначить заголовок, выделить параграф. Тегов тоже было мало.

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

Стали распространяться теги структурирования, например<table>. Именно их чаще выбирали для оформления страниц вместо самой структуры. Некоторые браузеры предлагали собственные теги, воспроизвести которые могли только они.

Таким образом, пользователи часто натыкались на сообщение: «Чтобы просмотреть страницу, вам необходимо воспользоваться браузером ХХХ».

Чтобы исправить сложившуюся ситуацию и создать единую базу тегов для форматирования был создан CSS. Он позволил отказаться от привязки тегов к браузерам.

Использовать HTML с CSS удобнее, чем простой HTML. CSS предоставляет следующие преимущества:

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

Продвижение сайта с помощью CSS

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

Для улучшения продвижения сайта специалисты рекомендуют выносить таблицы стилей CSS в отдельный документ, чтобы не увеличивать объем кода. Можно составить один или несколько таких файлов.

Ранее поисковики не умели читать таблицы стилей, что открывало возможность использовать их в черном SEO, например, для создания невидимых текстов. Сейчас лучше отказаться от использования CSS не по назначению.

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

30 лучших техник CSS для начинающих

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

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

При написании CSS, большинство разработчиков, относятся к одной из двух групп.

Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.

Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.

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

Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.

Многие дизайнеры имеют свои собственные Framework’и, которые они создали с течением времени, и это тоже отличная идея. Это помогает сохранить последовательность в Framework проектах.

Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.

Если вы только знакомитесь с CSS, я лично рекомендую, чтобы вы оставались в стороне от этих Framework по меньшей мере год. В противном случае, вы будете только путать себя. Учиться CSS … затем срезать углы!

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

MeyerWeb является популярным сбросом вместе с разработчиком сбросов Yahoo. Или вы всегда можете создать собственный сброс.

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

Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш h2, h3 и Н3 элементы имеют одни и те же шрифт и цвет:

Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h2 { size: 2.1em}) в конце таблицы стилей.

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

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

«контейнер», в котором Вы хотите сделать обтекание справа, и у вас уже есть класс .right в CSS, который располагает что-либо с правой стороны. Вы можете просто добавить дополнительный класс в декларации, вот так:

&lt;div class=&quot;box right&quot;&gt;&lt;/div&gt;

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

Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.

Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!

9. Используйте правильный тип документа

Декларация типа документа (doctype) имеет значение в вопросах наличия или отсутствия разметки и CSS. В самом деле, весь внешний вид вашего сайта может сильно измениться в зависимости от DOCTYPE, который вы заявляете.

Узнайте больше о том, какие типы документа используются на List Apart.

10. Используйте сокращения

Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:

#crayon {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}

Вы можете комбинировать эти стили в одной строке, например так:

#crayon {
margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
}

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

11. Оставляйте Ваши комментарии в CSS коде.

Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:

/* Here’s how you comment CSS */

12. Понимайте разницу между блочными и строчными элементами

Блочные элементы являются элементами, которые четко занимают каждую строку после их объявления, охватывают всю ширину свободного пространства. Строчные элементы занимают лишь столько места, сколько им нужно, и не перескакивают на новую строку после использования.

Вот списки элементов, которые могут быть строчными или блочными:

span, a, strong, em, img, br, input, abbr, acronym

И блочные элементы:

div, h2…h6, p, ul, li, table, blockquote, pre, form

13. Отсортируйте свойства в алфавитном порядке.

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

#cotton-candy {
color: #fff;
float: left;
font-weight:
height: 200px;
margin: 0;
padding: 0;
width: 150px;
}

Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!

14. Используйте CSS Компрессоры

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

15. Исползуйте классы Generic

Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).

Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.

.left {float:left}
.right {float:right}

&lt;div id=&quot;coolbox&quot; class=&quot;left&quot;&gt;…&lt;/div&gt;

Таким образом, вам не нужно постоянно добавлять «float: left», чтобы все элементы, которые необходимы, всплыли.

16. Используйте «Margin: 0 auto» для центрирования

Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать

margin: 0 auto; // top, bottom — and left, right values, respectively.

для центровки Div-а абзацев и других элементов в макете.

17. Не всегда оборачивайте элементы в DIV

Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль

&lt;div class=&quot;header-text&quot;&gt;&lt;h2&gt;Header Text&lt;/h2&gt;&lt;/div&gt;

Иногда может показаться, что легче просто создать уникальные стили элементов, как в примере выше, но вы начнете наводить беспорядок в вашем CSS. Это бы прекрасно работало:

&lt;h2&gt;Header Text&lt;/h2&gt;

Тогда вы сможете легко добавлять стиле h2, вместо родительского Div.

18. Используйте Firebug

Если вы еще не загрузили Firebug, то остановитесь и сделайте это. Серьезно. Это небольшой инструмент, который должен иметь любой веб-разработчик. Среди многих функций, которые поставляются с расширениями Firefox (отладки JavaScript, HTML проверить, найти ошибки), можно также визуально проверить, изменять и редактировать CSS в режиме реального времени. Вы можете узнать больше о том, что делает Firebug на официальном сайте Firebug.

19. Меньше Hack

Избегайте использования хаков, если это возможно. Конечно, дизайн должен выглядеть одинаково во всех браузерах, но использование только хаков делает ваши дизайны трудно поддерживаемыми в будущем. Кроме того, использование сброса файла (см. № 4) может устранить почти все неровности между браузерами.

20. Умеренно используйте абсолютное позиционирование

Абсолютное позиционирование является удобным аспектом CSS, который позволяет вам определить, где именно элемент должен быть расположен на странице в точном пикселе. Однако из-за игнорирования абсолютного позиционирования другими элементами на странице, макеты могут получить довольно “корявыми”, если есть несколько абсолютно позиционируемых бегающих элементов в макете.

21. Используйте Text-transform

Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:

text-transform: lowercase;

Теперь все буквы в заголовке будут строчными по умолчанию. text-transform позволяет вам изменить ваш текст (первая буква заглавной, все буквы заглавной или строчными буквами).

22. Не используйте отрицательные поля, чтобы скрыть h2

Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh2 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.

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

23. Проверьте Ваш CSS и XHTML

Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.

24. Ems против Пикселей

Всегда были упорные обсуждения, будет ли лучше использовать пиксели (px) или емы (em) при определении размеров шрифта. Пиксели — более статичный способ определения размеров шрифта, емы более масштабируемое, с различными размерами. С появлением различных типов просмотра веб-страниц (ноутбук, мобильный и т.д.), емы, все чаще становятся по умолчанию для измерения размера шрифта, поскольку они допускают наибольшую гибкость формы. Вы можете узнать больше о том, почему вы должны использовать em для размеров шрифта в этой ветке форума вдумчиво. About.com также имеет большую статью о различиях между измерениями размеров.

25. Не стоит недооценивать Список

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

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

Вы часто будете видеть навигационные ссылки так:

&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;

Хотя технически это будет прекрасно работать после небольшой доработки CSS, но код небрежен. Если вы хотите добавить список ссылок, используй маркированный список, глупый гусь!

26. Избегайте дополнительных Селекторов

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

body #container .someclass ul li {….}

В этом случае, просто .someclass li работали бы нормально.

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

27. Добавьте Поля и отступы для всего

Различные браузеры представляют элементы по-разному. IE делает определенные элементы иначе, чем Firefox. IE 6 представляет элементы иначе, чем IE 7 и IE 8. Хотя браузеры начинают более четко соблюдать стандарты W3C, они все еще не совершенны.

Одно из основных различий между версиями браузеров, какими предоставляются padding и margin. Если вы не используете сброс, вы можете определить поля и отступы для всех элементов на странице, чтобы быть на безопасной стороне. Вы можете сделать это быстро, глобально сбросить, вот так:

Теперь для всех элементов padding и margin нуль, если не определен другой стиль в таблице стилей.

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

28. Когда все готово, попробуйте объектно-ориентировать CSS

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

Если вы новичок в CSS / XHTML играх, OOCSS может быть немного сложным в начале. Но необходимо больше понять принципы для объектно-ориентированного программирования в целом.

29. Используйте несколько таблиц стилей

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

Например, у меня могла быть избирательная программа, которая будет иметь уникальный набор стилей. Вместо того, чтобы, в том числе, делать опрос основных стилей, я мог бы просто создать poll.css стилей только для страниц, которые показывают опрос.

Однако, будьте уверены, что рассмотрение вопроса о числе запросов HTTP, предпринимаются. Многие дизайнеры предпочитают развивать несколько стилей, а затем объединить их в один файл. Это позволяет сократить количество запросов HTTP до одного. Кроме того, весь файл будет храниться в кэше на компьютере пользователя.

30. Проверьте, Закрыты ли Элементы перед началом отладки

Если вы заметили, что ваш проект выглядит немного шатким, есть вероятность, что это потому, что вы забыли закрыть тег div>. Вы можете воспользоваться XHTML валидатором, для нахождения всяких ошибок.

Вы также можете прочитать…

Перевод и редакция: Рог Виктор и Андрей Бернацкий.

Автор: Glen Stansberry.

Источник: http://net.tutsplus.com

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

CSS Основы

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по CSS. Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с JavaScript позволяют создавать динамические HTML-страницы (DHTML), красота и удобство которых, порой, просто поражают.

Разумеется, для того, чтобы создавать подобные вещи необходимо познакомиться с основами CSS. И данная категория сайта поможет Вам это сделать максимально быстро и эффективно.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS.

2) Способы и их приоритеты задания CSS-стиля.

3) Типы селекторов в CSS.

4) CSS хаки для браузеров.

5) Правила написания CSS.

6) Как создать всплывающую подсказку на CSS.

7) Как изменить внешний вид первой буквы через CSS.

8) Как задать вид курсора через CSS.

9) Как изменить вид курсора при наведении мыши с помощью CSS.

10) Как сделать подменю на CSS.

11) О замене свойства min-width в IE6.

12) О валидности CSS.

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS.

15) Как сделать закруглённые углы через CSS.

16) Как вместо маркера списка поставить своё изображение через CSS.

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS.

19) Что такое дочерние селекторы в CSS.

20) Какие единицы измерения имеются в CSS.

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS.

26) Что такое CSS спрайты.

27) Как прижать футер (подвал) к низу через CSS.

28) Как запретить изменение размеров textarea через CSS.

29) Как нарисовать треугольник через CSS.

30) Как обработать событие click через CSS.

31) Как задать свой курсор через CSS.

32) Как сделать горизонтальное выпадающее меню на CSS.

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS.

35) Можно ли использовать CSS3.

36) Как сделать тень на CSS.

37) Как задать атрибуты cellpadding и cellspacing на CSS.

38) Как сделать div со 100% height.

39) О совместимости z-index и плеера Youtube.

40) Почему плохо использовать -moz, -ms, -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset.

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS.

45) Что такое clearfix.

46) Как частично отменить float.

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS.

50) Что такое less.

51) Как сделать эффект загнутого уголка на CSS.

52) Как сделать отзывчивый «липкий» подвал сайта.

53) Как использовать Google Fonts API.

54) Как использовать сервис Livetools.

55) Как разрешить или запретить выделение текста на CSS.

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS.

57) Зачем нужно свойство page-break-inside в CSS.

58) Как выравнять по центру блок переменной ширины на CSS.

59) Как сделать треугольники на чистом CSS.

60) Сервис по генерации CSS треугольников.

61) Как прижать футер к нижней грани страницы(позиционирование).

62) Как прижать футер к низу страницы(табличный способ).

63) Изучаем Sass. Установка и настройка.

64) Как скрыть элемент на странице на CSS.

65) Изучаем Sass. Основы.

66) Когда использовать reset.css и normalize.css.

67) Сервис по работе с изображениями с мощным API.

68) Как сделать эффект увеличения картинки на CSS.

69) Koala — быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS.

71) Изучаем Sass. Миксины.

72) Изучаем Sass. Математические операции.

73) Анимированная иконка меню на Sass.

74) Изучаем Sass. Функции.

75) Что такое PostCSS.

76) Как установить и настроить PostCSS.

77) Как сделать возможность оценивания на CSS.

78) Изучаем Sass. Стиль написания кода.

79) Изучаем Sass. Расширение родительского селектора.

80) 10 полезных SASS миксинов.

81) Как сделать интро в стиле «Звёздных Войн» на CSS.

82) Bootstrap 4. Введение.

83) Bootstrap 4. Установка.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Контейнеры и ключевые точки.

86) Bootstrap 4. Система сеток.

87) Bootstrap 4. Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4.

89) Bootstrap 4. Что такое Jumbotrons.

90) Bootstrap 4. Утилиты и типография.

91) Bootstrap 4. Компонент Cards.

92) Разницу между class и id на примере тега div.

93) Неудачные элементы веб-дизайна, которые не стоит использовать.

94) Bootstrap 4. Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке. Часть 1.

97) Как верстать PSD макет по Bootstrap сетке. Часть 2.

98) Как использовать псевдоэлементы after и before в CSS.

99) Об особенностях ширины и высоты блока в CSS.

100) Псевдоэлемене after и псевдоклассе last-child.

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

106) Препроцессор LESS, начиная с простого.

107) Как устроена сетка Bootstrap.

108) Модальное окно на Bootstrap. Стилизация.

109) Как сделать фон в CSS

110) Как сделать анимированную кнопку на CSS.

111) Пример адаптивной верстки на Bootstrap.

112) Адаптивная верстка макета (Bootstrap 4.

113) Верстка макета на SASS.

114) Flex-свойства на практике.

115) Адаптивная верстка на
flex (часть 1).

116) Адаптивная верстка на
flex (часть 2).

117) Минусы и плюсы использования иконочных шрифтов.

118) Верстка таблицы (SCSS + flexbox).

119) Плавная анимация движения на CSS.

120) Как сделать вкладки на чистом CSS.

121) Нарисовать стрелку на CSS.

122) Плавный переход. CSS свойство transition.

123) Эффект размытия и фокуса на CSS.

124) Свойство transform-origin на примере.

125) Анимация рамки на CSS.

126) Рисуем иконку пользователя на CSS.

127) Рисуем сердечко на CSS.

128) Три эффекта наведения на кнопку.

129) Вcплывающее окно на чистом CSS.

130) Блок со скошенным углом на CSS.

131) Скошенный блок при помощью clip-path.

132) Первая буква логотипа Google.

133) Выноски в стиле комиксов.

134) Коллекция CSS компонентов.

135) Угловая лента на CSS.

136) 3 способа выравнивания блоков по ширине.

137) Виды CSS селекторов.

138) CSS фреймворк Materialize (Установка).

139) CSS фреймворк Materialize (Navbar).

140) Использование переменных в CSS.

141) Как прижать футер к низу страницы.

142) Что нового в Bootstrap 5?

143) CSS Grid Layout #1 (Базовая сетка).

144) CSS Grid Layout #2 (Позиционирование ячеек).

145) Ошибки новичков при верстке сайтов #1.

146) Ошибки новичков при верстке сайтов #2.

147) Ошибки новичков при верстке сайтов #3.

148) Ошибки новичков при верстке сайтов #4.

149) Пример адаптивной верстки на flexbox #1.

150) Пример адаптивной верстки на flexbox #2.

Все материалы по основам CSS

HTML, CSS и JS — основные технологии верстки сайтов

В предыдущих 2-х уроках я рассказал, что такое верстка сайта и что HTML — это главная технология в верстке сайтов. В этом уроке опишу простыми словами еще 2 обязательные технологии: CSS и Javascript (сокращенно JS).

Сразу вернусь к примеру с автомобилем. Как вы помните, на примере автомобиля верстка сайта — это как автомобиль без двигателя. Так вот HTML — это как просто кузов автомобиля, CSS — его цвет, а Javascript — это отрывающиеся двери, поднимаемые стекла.

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

 Что такое CSS простыми словами

CSS расшифровывается как «Cascading Style Sheets» — каскадные таблицы стилей. На сайте CSS задает визуальное оформление: цвета, размеры шрифтов и т.п. На HTML создается только содержимое (текст и картинки) и возможность открыть это содержимое в интернет-браузере. Без CSS это будет сплошной текст и картинки как в Word. Чтобы содержимое стало выглядеть как интересный сайт, нужен CSS.

Я в прошлом уроке привел пример HTML-тега — <p></p>. Сейчас покажу, как изменить цвет текста: <p>Это абзац.</p>. Здесь я просто написал, что нужен цвет зеленый (color: green). То есть в CSS просто английские слова — пишете те значения, которые вам нужны.

Вот результат этого примера в браузере:

Что такое Javascript простыми словами

Javascript делает такие вещи, как листание картинок влево-вправо, увеличение картинок, открывающиеся окна. То есть Javascript создает какие-то эффекты при нажатии мышки. Например, нажмите на эту кнопку Кнопка

Я надеюсь, что за эти 3 коротких урока вы поняли общую суть верстки сайтов. Но даже, если для вас это пока сложновато, перейдите на уровень ПРОФЕССИОНАЛ, где за несколько несложных уроков вы сами сверстаете сайт интернет-магазина. Вот что у вас должно примерно получиться по итогу курса imdiz.ru/store.

Уроки несложные и написаны простым языком. Добро пожаловать на уровень ПРОФЕССИОНАЛ!

Основы CSS

Для удобства и сокращения кода CSS Вы можете группировать и комбинировать селекторы.

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

К примеру, если Вы хотите, чтобы абзацы и заголовки h3 и h4 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h3> и <h4> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом: