Коды css для сайта: Разбираем CSS-код — Как создать сайт – 12 Полезных CSS-кодов для WEB-Разработчиков

Разбираем CSS-код — Как создать сайт

Разбираем код языка CSS

Урок №2
Разбираем CSS код

В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:


h2 {
 color: white;
 background-color: green;
}
p {
 color: orange;
 font-size: 20px;
}

Открыв в браузере файл index.html вы должны увидеть следующее.

В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.

CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами <style> </style>. Сам CSS-код начинается с имени тега, а затем идут фигурные скобки { }, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.

Схема CSS-кода выглядит следующим образом:


имяТега { 
 CSS-свойство: значение; 
}

После CSS-свойства, нужно обязательно ставить двоеточие :

, а после значения точку с запятой ;

Для заголовка h2 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.

Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.

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

Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.

К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,

padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.

К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.

В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):


<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h2 {
    color: white;
    background-color: green;
    width: 50%;
    text-align: center;
    padding: 5px;
    font-family: Impact;
   }
   p {
    color: orange; 
    font-size: 20px;
    background-color: #ffc;
    width: 50%;
    padding: 10px;
    font-family: Arial;
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв в браузере, файл index.html вы должны увидеть следующее.

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

Читать далее: Основные CSS-свойства


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

20 полезных сервисов генерации CSS кода для веб-разработчиков | DesigNonstop

20 полезных сервисов генерации CSS кода для веб-разработчиков

5

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

1. Code Pen
В этом проекте можно найти демо версии замечательных примеров CSS3 эффектов для использования в интерфейсах. Например, оригинальные кнопки или формы обратной связи.

codepen.io

2. Css3 Generator
Предлагается более 10 генераторов кода — Border Radius, Box Shadow, Multiple Columns, Transform, Flexbox, Gradient и т.д.
css3generator.com

3. Live Tools
Этот минималистический по дизайну сервис дает возможность сгенерировать коды кнопок, форм обратной связи, иконок и (внимание!) различных лент (ribbons).
livetools.uiparade.com

4. Web Code
А здесь генерируются коды для анимации, фона, обводки, цвета, курсора, списков, колонок и много другое.
webcode.tools

5. Responsive Grid System
Невероятно удобный инструмент для адаптивного дизайна. А также простой и гибкий способ использования Responsive Grid System.

responsivegridsystem.com

6. Css Ttemplater
С помощью этого сервиса генерируются HTML+CSS шаблоны с возможностью выборки различных базовых параметров.
csstemplater.com

7. Css Matic
Мульти-сайт генератор с четырьмя инструментами для создания теней, границ радиусов, шумов текстур и CSS градиентов.
cssmatic.com

8. Css Sprite Gen
Оптимизируйте свой сайт с помощью CSS спрайтов, чтобы увеличить скорость сайта и снизить количество HTTP запросов.
css.spritegen.com

9. Enjoy Css
Генерируйте код играючи! А также наслаждайтесь неплохой коллекцией кодов сниппетов, эффектов для текста и различных кнопок.

enjoycss.com

10. Image Slider Maker
С помощью этого сервиса можно генерировать слайдеры картинок.
imageslidermaker.com

11. The Echoplex
Здесь можно сгенерировать макет сайта, учитывая параметры выравнивания элементов по нескольким осям, распределения свободного места между элементами и т.д.
the-echoplex.net

12. Css Load
Генератор вращающихся индикаторов загрузки AJAX средствами CSS и HTML.
cssload.net

13. Colorzilla
Генератор градиентов.

colorzilla.com

14. How To Center In Css
Инструмент для центрирования различных элементов
howtocenterincss.com

15. Wait Animate
Позволяет создать бесконечную CSS анимацию с паузой между повторениями.
waitanimate.wstone.io

16. S Sd
Здесь можно создать модную длинную трехмерную тень.
new.s-sd.ru

17. Css 3d
Генератор красивых 3d лент на чистом CSS.
css3d.net

18. Css Portal
Большой портал с огромным количеством всевозможных генераторов, примеров и коллекцией кодов.

cssportal.com

19. Css3 Maker
Генератор различных CSS стилей.
css3maker.com

20. Web Core It
CSS генератор разноцветного градиентного фона
webcore-it.com

7 полезных советов по написанию хорошего кода CSS

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

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

Написание кода CSS может стать нетривиальной задачей, когда вам приходится писать определённый код снова и снова, просто чтобы заставить различные браузеры отображать разметку одинаково. Вот где потребуется CSS Reset. При том, что этим приёмом пользуются такие гении CSS, как E. Meyer, нет причин не сбросить все ваши браузеры «в ноль» и начать строить стили заново.

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

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

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

/********** Код верхнего заголовка **********/

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

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

.your_classname {
background: #F00;
border: 0;
color: #343434;
float: left;
margin: 0;
padding: 0;
}

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

.your_classname {
	background: #F00;
	border: 0;
	color: #343434;
	float: left;
	margin: 0;
	padding: 0;
}

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

.classname { border: 0; }

.classname {
	background: #0F0;
	border: 0;
	color: #454545;
	float: left;
	margin: 0;
	padding: 0;
}

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

.classname {
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-top: 1px;
}

Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

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

Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.

.classname {
	border: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin: 48px;
	padding: 0;
	position: relative;
	z-index: 101;
}

Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

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

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

Данная публикация представляет собой перевод статьи «7 Good Tips for Writing Better CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Учебные коды по HTML, CSS, JavaScript, PHP, MySQL

На странице собраны учебные коды по HTML, CSS, JavaScript, PHP, MySQL и другим веб-технологиям. Все примеры кодов сопровождаются инструкциями и подробными комментариями.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Учебные коды HTML+CSS

Учебный сайт №1

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

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

Последнее обновление: 25.10.19.
 Сайт в интернете:  смотреть
 Скачать код сайта (7.35 Мб):  здесь

Пример верстки сайта №2

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

Последнее обновление: 25.12.17.
 Сайт в интернете: смотреть
 Скачать код сайта (2 Мб):  здесь

Учебные коды JavaScript

Библиотека функций JavaScript

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

Учебные коды PHP

Учебный сайт №1 на PHP

Это тот же учебный сайт №1, но написанный с использованием PHP. И хотя php-кода как такового совсем немного, а сам сайт можно сверстать и без знаний языка, вы наверняка сможете оценить преимущества верстки страниц с использованием PHP и, скорее всего, пожелаете хотя бы бегло ознакомиться с его основами.

Последнее обновление: 27.10.19.
 Сайт в интернете:  смотреть
 Скачать код сайта (7.35 Мб):  здесь

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

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