ГлавнаяРазноеCss для начинающих

Урок 1. Что такое 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, который располагает что-либо с правой стороны. Вы можете просто добавить дополнительный класс в декларации, вот так:

<div class="box right"></div>

<div class="box right"></div>

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

Будьте очень осторожны при использовании имен классов «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-left: 5px;

margin-right: 7px;

margin-top: 8px;

}

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

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

#crayon {

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

}

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

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

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

/* Here's how you comment CSS */

/* Here's how you comment CSS */

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

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

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

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

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

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

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

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; }

#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 за ближайшие 6 дней

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

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

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

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

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

.left {float:left} .right {float:right} <div id="coolbox" class="left">...</div>

.left {float:left}

.right {float:right}

<div id="coolbox" class="left">...</div>

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

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

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

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

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

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

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

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

<div class="header-text"><h2>Header Text</h2></div>

<div class="header-text"><h2>Header Text</h2></div>  

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

<h2>Header Text</h2>

<h2>Header Text</h2>

Тогда вы сможете легко добавлять стиле 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: 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-ы, чтобы каждый элемент находился в списке, потому что они не понимают, как правильно их использовать.

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

<a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Contact</a>

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

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

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

body #container .someclass ul li {....}

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 за ближайшие 6 дней

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

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

webformyself.com

CSS для начинающих

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

Видеоверсия:[iframe align="center" mode="normal" autoplay="no" maxwidth="1280"]

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки - HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем  веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

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

Содержание будущей картины

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

Итоговая картина

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS

 

 

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке "Установить".

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

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

Во время загрузки html страницы, через тег <link> загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.

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

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

Зачем изучать CSS?

Не думаю что в наше время можно найти хоть один более или менее "приличный" сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.

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

Плюсы CSS

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

Как быстро научиться основам CSS

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

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

Суть работы с каскадными таблицами стилей довольна проста, поэтому не теряйте время и приступайте к ее освоению. Список уроков:

На этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу
  2. [popup_trigger tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на моем блоге

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

site4business.net

CSS

Обычно файл со стилями хранится в корневой папке сайта и к странице подключается единственной строчкой кода:

<link rel="stylesheet" href="style.css">, где style.css - название этого файла и его расположение в серверной папке. 

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

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

Главные преимущества CSS:

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

 - управление отображением множества документов с помощью одной таблицы стилей, общий дизайн для всех страниц;

 - возможность создания респонсивных сайтов, которые адаптивно отображаются на мониторе и мобильных гаджетах;

 - более точный контроль над внешним видом страниц (позиционирование, размер, поля и т.д.) ;

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

Синтаксис CSS

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

Например:

p {

font-family: "Compact", sans-serif;

  }

h3 {

font-size: 110 %;

color: blue;

background: gray;

       } 

p#paragraph2 {

margin: 0;

  }

a:hover {

text-decoration: none;

  }

Выше приведено четыре правила с селекторами p, h3,  p#paragraph2, a:hover. Согласно первому правилу элементы p (параграфы)  будут отображаться шрифтом Compact, или каким-либо другим шрифтом с засечками  из серии sans-serif, если Compact недоступен.

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

Третье  правило будет применяться только к элементам p, атрибут id (идентификатор) которых равен paragraph2. Такие элементы не будут иметь внешних отступов (margin).

Четвертое правило определяет стиль hover для элементов a. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило убирает подчеркивание, когда курсор мыши находится над этими элементами.

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

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

sayt-s-nulya.ru

16 полезных уроков по CSS3 для начинающих

Поделиться:

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

Кому будет полезно :Начинающим программистам, верстальщикам

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

Язык : Русский

Смотрите также : 9 полезнейших сайтов для изучения программирования

Смотрите также : Курс по HTML5 для начинающих

Смотрите также : 10 полезных ресурсов, которые помогут вам обучиться верстке сайтов

Поделиться:

say-hi.me

Знакомство с CSS. Основы CSS для начинающих. Урок №1

Знакомство с CSS. Основы CSS для начинающих. Урок №1

Всем привет!В этом первом уроке я хотел бы познакомить вас, начинающих веб-мастеров, с основами CSS.Здесь ничего сложного нет, для начала нужно просто понять, что такое CSS и для чего вообще он нужен.Попробую все объяснить поэтапно и нормальным, доступным языком для начинающих.

○ Что такое CSS?CSS (от англ. Cascading Style Sheets) – это каскадные таблицы стилей, позволяющие управлять внешним видом сайта (цвет фона, размер и цвет текста, оформление ссылок, позиция блоков на сайте и др.).Другими словами можно сказать так, что CSS это инструмент позволяющий сделать полный ремонт в вашем доме (покраска потолков и полов, клейка обоев, перестановка мебели).Метафору вы поняли.В общем, если дело касается оформления сайта, то в этом ваш лучший помощник CSS.

○ Чем же хорош CSS, если оформление веб-документа можно осуществить и с помощью HTML?Если оформлять документ только с помощью HTML, то в случае каких-либо изменений, например, замена цвета заголовка в статье, вам придется угробить на это массу времени, так как по отдельности на 1000 страницах веб-документа нужно будет внести исправления.В CSS же все довольно просто.  Достаточно указать в одном css файле цвет к заголовкам, и на всех 1000 страницах веб-документа он изменится автоматически. Да, да, это огромноя экономия времени, и риск на инфаркт уменьшается.

Не буду вас нагружать с первого урока, скажу только, что css файл имеет расширение «*.css» и зачастую файлу присваивают название «style.css» (но это не обязательно).Еще скажу, что файл CSS работает только в паре с HTML. Сам по себе CSS работать не будет. Так что если вы не знаете основ HTML, рекомендую с ними ознакомиться прежде, чем вы откроете урок №2.

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

Предыдущая запись Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2 Следующая запись Коротко о PHP. Основы PHP с нуля. Урок №1

stepkinblog.ru

Изучаем CSS. Урок 1

Здравствуй, уважаемый читатель.

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

Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:

Урок 1. Что такое html?Урок 2. Параграфы, заголовкиУрок 3. СпискиУрок 4. ИзображенияУрок 5. Ссылки. Часть 1Урок 5. Ссылки. Часть 2Урок 6. АтрибутыУрок 7. ТаблицыУрок 8. Выделения текстаУрок 9. Формы. Часть 1Урок 9. Формы. Часть 2Урок 10. МетатегиУрок 11. КомментарииУрок 12. Теги div и span

Теория и практика

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

1 2 3 4 5 6 7 8 9 10 <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Первый урок изучения CSS</p> </body> </html>

Как вы заметили файл со стилями подключается с помощью тега <link>, который находится между тегами <head></head>. Атрибут rel="stylesheet" определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href="style.css" определяет где находится файл с таблицей стилей. Ну и атрибут type="text/css" определяет тип данных.

Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++

1 2 3 body{ background-color:#C1BAFF; }

Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

Урок 1. Что такое CSS? 4.25/5 (85.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Основы работы с CSS для начинающих. Урок 1

Мы начали две новых рубрики об основах работы с html и css. Их можно изучать по отдельности, но нужно не забывать, что они взаимосвязаны и дополняют друг друга.

Напомним, для создания  интернет-страниц чаще всего используется два языка — html и css. Первый отвечает за структуру, а второй за оформление и внешний вид.

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

Синтаксис css

Перейдем к сути.

Все свойства через css задаются следующим образом:

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

Вот пример обычного кода с использованием css, чтобы задать тексту красный цвет:

<p style=»color: red»> — где style — это атрибут, а вот color — свойство, red — значение.

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

Но, подключать стили можно и другими способами.

Например, с помощью классов.

Селекторы и классы в css

Сейчас объясним. Всё дело в том, что при написании стилей используются так называемые «селекторы».

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

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

Пример, тот же красный цвет для всех абзацев можно задать так:

p { color: #FF0000; } — p — селектор, color — свойство, #FF0000- значение.

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

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

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

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

<p class=»first-subparagraph»>, а затем создаете .first-subparagraph { color: #FF0000; }.

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

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

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

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

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

Здесь нужно понять одно — их очень уж много.

И если со свойствами еще более-менее понятно, для тех знает английский язык (они произошли от него), то их значения бывают самыми разными.

Условно значения в css можно поделить на несколько типов в зависимости от использования букв и цифр.

Например, только в нашей статье мы привела уже два из самых распространенных вариантов значений: буквенный — словами («red» — тут опять же всё завязано на английский язык), и символьный — буквами и цифрами («#FF0000» — вот здесь всё несколько сложнее).

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

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

Следите за обновлениями.

По любым вопросах относительно основ css (и не только основ) — пишите в комментарии.

 

Также стоит прочитать

sitesnulya.ru