Как разобраться в css

Как максимально быстро разобраться с HTML, CSS, JS?

Я всегда восхищался сайтом w3schools.com. Много лет назад (когда HTML4 ещё только набирал популярность) изучил по нему HTML, CSS, JS, XML, RDF, OWL, XSLT, позже этот же сайт помог мне быстро въехаться в ASP.Net. Там одновременно и не втирают элементарные вещи подолгу и не обделяют их вниманием (вдруг кто-то таки не знает).

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

В Сети можно найти несколько сайтов-клонов w3schools с темами, которых нет на оригинале.

Профессионалом там, конечно, не станешь, но чтобы быстро въехать в тему, понять что есть что, к чему, как и где, заложить “скелет” понимания для дальнейшего обтягивания опытом и знаниями с помощью собственной практики и изысканий – ничего лучше я не видел (те же штуки типа codeschool грешат затянутостью и негибкостью, как мне кажется).

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

В этом плане я не видел ничего лучше (да и такого же, хотя бы), чем продукция JetBrains (в Вашем случае – WebStorm) и VisualStudio (с которой Вы, как я понимаю, уже знакомы), хотя знатоки рассказывают о чудесах EMACS и VIM. Ну а дальше – рыскать по Сети в поисках интересных статей, книг, примеров.

По части JavaScript и jQuery мне не известно ничего лучше, чем творчество Антона Шевчука.

По Bootstrap я бы сам не отказался от хорошей наводки.

Если Вам известно, что такое переменная – начинайте писать. JS ничем не отличается от других ЯП, о тонкостях узнаете в процессе. Если Вам известно, что такое тег – начинайте верстать, параллельно погугливая CSS-свойства. Задавал подобный вопрос здесь же на тостере, в итоге, верстку осваивал сам. Книги – бесполезная вещь для таких дел, имхо.

Нравится 5 Комментировать

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

Психология человека такова, что ему трудно понять, зачем ему изучать основы, когда они не имеют ничего общего с практикой. Это и Ваша проблема. А потом набегают на тостер такие ученые, которые не понимают, почему click не работает после ajax, а два inline-block ставятся через пробел.

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

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

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

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

Делайте вывод сами.

Ответ на ваш вопрос в баянистой картинке:

Нравится 2 Комментировать

Источник: https://toster.ru/q/118295

Как опыт создания битов может помочь разобраться в HTML и CSS

Однажды в субботу я засиделся до двух часов ночи за новым проектом.

Так как я битмейкер, вы, наверное, думаете, что на экране было что-то вроде этого:Но на самом деле, там было вот что:
Источник: Мой экран в ту субботу, в два часа ночи Вместо того, чтобы заниматься бочками (1) и снейрами (2), я бился над закрепленной навигационной панелью на своем веб-сайте.

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

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

Поэтому, естественно, я ходил с мыслью: «Слава богу, мне ничем таким заниматься не приходится. Просто сижу себе день-деньской, делаю биты пачками!».

Что тут скажешь. Недолго это продлилось. Благодаря Soundcloud, Spotify и Bandcamp, музыкантам стало значительно проще делиться своими творениями с публикой. С другой стороны, композиции сейчас разбросаны по такому огромному количеству платформ, что слушателям сложно найти именно то, что нужно.

Было ясно: мне необходим веб-сайт, который бы служил централизованной площадкой для хранения всех моих работ. Мне хотелось, чтобы все было, как у моих любимых музыкантов: аккуратная панель навигации, крупное фоновое изображения со мной, подчеркнуто глядящим мимо объектива.
Дань уважения моим героям.

Сначала я попробовал использовать Squarespace, но мне не понравилось, что приходится брать готовый шаблон и работать в рамках предзаданных блоков.

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

com — и в тысячу первый раз видишь все тот же набивший оскомину шаблон.

Мне хотелось создать страничку с нуля — несмотря на то, что никаких фоновых знаний по HTML или CSS у меня не было. Хотелось бросить себе вызов.

Поэтому я заплатил за курс от Udemy, скачал Brackets и приступил к занятиям. И — вау! — сразу же подсел.

Через каких-то пару месяцев сайт был запущен — и я сделал его своими силами, от и до.

Почему это опыт мне так понравился?

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

1) Философия «сделай из дерьма конфетку»: возможность создавать сырой контент в HTML (пусть даже страшный до слез), а потом разукрашивать его в CSS.

2) Использование существующих ресурсов в новом контексте: накачайте отовсюду иконок, шрифтов и так далее и подгоните их под общую концепцию сайта.

3) Применение сторонних инструментов: доступность плагинов jQuery, которые я мог использовать, чтобы улучшить страницу.

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

Давайте не пожалеем времени и рассмотрим эту связь подробнее.

Для тех, кто не в курсе, как создаются треки в хип-хопе, я упрощенно представлю весь процесс как совокупность трех шагов:

1. Драм-партия
2. Семплирование
3. Инструментовка

Эти этапы я буду разбирать на примере своего бита «Clear Skies Ahead» (источник: Soundcloud).

Я выбрал его потому, что структура у него достаточно простая и все исходники доступны… ну и вообще, это прикольный бит.
Сходство №1: Драм-партию можно сравнить с HTML-контентом, который потом дорабатывается в CSSХотелось бы выделить две основных характеристики HTML: 1) HTML задает структуру, выстраивая общую схему страницы.

В стандартном HTML-документе есть такие тэги, как html, head, body, footer, которые четко очерчивают каждую из секций и отсылают ко всем необходимым CSS файлам и плагинам jQuery. 2) HTML несет в себе контент, который впоследствии определенным образом оформляется.

Хотя HTML отвечает в первую очередь за контент, мы изначально пишем код так, чтобы проще было придать ему тот или иной стиль впоследствии. Первые версии, как правило, выглядят отвратно, но мы готовим контент к тому, чтобы украсить его в CSS. Подобные же характеристики мы находим и в драм-партии: 1) Драм-партия задает структуру.

Это каркас мелодии. Она формирует ритм, которому будет следовать слушатель. 2) Драм-партия несет в себе звуки, которые впоследствии определенным образом оформляются. Изначально им не хватает индивидуальности. Обычно только после применения эффектов трек «оживает».

Давайте послушаем драм-партию к рассматриваемому нами биту «Clear Skies Ahead». Базовый паттерн состоит из бочек, снейров и зацикленной барабанной партии.

Звучит… как-то никак. Структура есть, ритм прослеживается, но не чувствуется индивидуальности. Бочка режет слух, снейры звучат безжизненно, а барабаны теряются на заднем плане. А значит, нужно сделать все стильно и красиво!Для усиления низкой частоты у бочки я применил к ней эквалайзер.

Этот эффект позволяет регулировать различные частоты звука. Чтобы сделать снейры поживее, я добавил реверберацию (3), которая создает эффект эха. Сделать семплированную (4) партию заметнее мне помог эффект под названием stereo imager (5).

Все это можно уподобить присвоению элементу классов “equalizer”, “reverb” и “stereo-imager” на разных участках кода.

Kicks

The “boom”

Snare

The “bap”

Drum Break

”Boom-bap”

Далее мы можем определить стиль для каждого из классов в CSS..equalizer { font-weight: bolder;
}
.reverb { text-shadow: 1px 1px blue;
}
.stereo-imager { letter-spacing: 1px;
}
Вот звуковой эквивалент стилизации драм-партии. Как вы сами слышите, применение уместных эффектов вдохнуло в трек жизнь. Так же обстоят дела и с контентом на вашей веб-странице — его можно представлять аудитории только если он был должным образом оформлен в CSS.

Сходство №2: Семплирование — почти то же самое, что адаптирование иконок и шрифтов под новую концепцию

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

В хип-хопе существует техника под названием «нарезка» (chopping) — существующая песня разбивается на маленькие фрагменты, которые потом перемешиваются в другой последовательности, чтобы получился новый трек.

В приведенном клипе я на примере трека «Clear Skies Ahead» подробно рассматриваю три шага:

1. Найдите песню для семплирования (с 00:00)
2. Составьте из фрагментов новую композицию (с 00:13)
3. Добавьте эффекты и внедрите их в бит (с 00:24)

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

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

2. При помощи HTML расположите картинки в том порядке, который соответствует вашей концепции.
3. Добавьте необходимые эффекты в CSS, чтобы придать странице законченный вид..box img { /* Resize images */ width: 50%; height: auto; /* Center images */ display: block; margin-left: auto; margin-right: auto; /* Space out images */ margin-bottom: 30px;
}
img:hover { opacity: 0.5; transition: 0.3s;
}Процесс активного поиска исходников, выстраивания их в нужной последовательности и стилизации в соответствии с собственными предпочтениями происходит как в хип-хопе, так и в веб-разработке.

Сходство №3: Добавление виртуального инструмента — все равно что добавление плагина jQuery, чтобы улучшить страницу.

В качестве финального аккорда я хотел добавить низкий звук саб-баса, который свяжет все воедино. Он выступит в качестве «клея» для композиции, выровняет низкие частоты и заполнит пустоты. «А что делать, если у меня нет гитары? Да и была бы, я все равно не умею на ней играть!» Здесь в игру вступают виртуальные инструменты.

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

Для «Clear Skies Ahead» я добавил виртуальный инструмент, который содержал саб-бас, записал его и применил к существующему биту.

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

Чтобы проиллюстрировать этот процесс на материале моего веб-сайта, давайте добавим галерею, чтобы отображать те четыре картинки с временами года, о которых шла речь раннее.

Вместо того, чтобы делать ее самостоятельно, воспользуемся каким-нибудь симпатичным плагином от jQuery. Я остановил выбор на Swipebox:

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

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

Так проще схватывать новые концепты, и к тому же на них переносится часть того интереса, который вы испытываете к любимым занятиям. В моем случае понимание связи между HTML/CSS и созданием музыки значительно ускорило процесс обучения и сделало его занятнее. Работая над сайтом, я входил в то же потоковое состояние, которое часто испытываю в процессе создания битов. Что общего у ваших интересов с теми новыми навыками, которым вы пытаетесь научиться? На первый взгляд они могут показаться в корне различными, но не торопитесь, вглядитесь попристальнее. Раз уж такие непохожие с виду умения, как разработка и создание битов, можно объединить, то у вас не должно возникнуть проблем с тем, чтобы обнаружить такую же сильную связь между вашими увлечениями!Примечания(1) Бочка — большой барабан, по которому определяется темп композиции. (2) Снейр — малый барабан. (3) Реверберация — это процесс постепенного уменьшения интенсивности звука при его многократных отражениях. Иногда под реверберацией понимается имитация данного эффекта с помощью ревербераторов. (4) Семплирование – использование семплов для написания своей музыки. Семпл – относительно небольшой оцифрованный звуковой фрагмент. Семплы широко используются при написании современной музыки. (5) Stereo imager – стереокартина, которая, по сути, является дополнительной характеристикой звуковой сцены, а, фактически, ни чем иным, как её образностью. Этот параметр определяет величину и локализацию музыкальных образов на звуковой сцене.

Источник: https://habr.com/company/everydaytools/blog/321860/

HTML и CSS

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

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

Это естественно на тот случай если вы хотите изучить все от самых основ и не сделать себе кашу в голове.

Если же вы уже знаете, что-либо о языках HTML и CSS, то вы так же можете найти здесь недостающие вам знания, или же, углубить уже изученное.

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

1 | 2 | Следующая | Последняя

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…

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

Подробнее…
1 | 2 | Следующая | Последняя

Источник: https://for-net.ru/view_cat.php?cat=6

Разбираем код HTML-документа. Выясняем что такое тег

Заголовок статьи

Абзац статьи.

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — :

— это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

— открывающий тег.

— закрывающий тег.

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

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

Рассмотрим другие теги используемые в нашем HTML коде.

Теги — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

Заголовок статьи

Абзац статьи.

Каждый HTML-документ начинается с открывающегося тега и заканчивается закрывающимся тегом<\p>

Теги и — голова и тело HTML-документа

Между тегами располагаются два блока.
1. Первый блок начинается и заканчивается тегами — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами — их называют телом HTML-документа.

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

В нашем примере, между тегами , находится текст:
Название страницы

Текст помещённый между тегами появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.

Теги

и — заголовок и абзац статьи

В теле нашего HTML-документа, между тегами , располагаются два вида тегов:

— теги заголовока статьи,
— теги абзаца статьи.

— между этими тегами располагается текст, который является заголовком статьи. Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:

Разбираем HTML код

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

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обощаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами Каждый HTML-документ состоит из двух блоков, головы и тела:
1. — голова HTML-документа,
2. — тело HTML-документа.

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

В теле HTML-документа между тегами , располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1, абзацев p, изображений img, ссылок a, кнопок input и т.д.

Читать далее: Добавляем статью в HTML-документ

Вам понравились уроки? Поддержите проект “Учебники для вебмастера”! Можете отправить с карточки, мобильного телефона или яндекс.кошелька.

Минимальная сумма перевода 30 руб.

Источник: http://gabdrahimov.ru/html-uchebnik-razbiraem-kod

CSS

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

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

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

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

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

Чтобы он учел отметки, необходимо прописать их на языке CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

Стали распространяться теги структурирования, например

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://semantica.in/blog/css.html

Основы CSS – Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии “Для самых маленьких”, в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS – Каскадных таблиц стилей (Cascading Style Sheets).

Поделиться

Твитнуть

Поделиться

Класснуть

Плюсануть

Запинить

Спонсор выпуска – Нетология: http://netolo.gy/cSU (Промо-код на 2000 руб.: wdm_prog).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока “Основы HTML для начинающих”, в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки.

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

Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

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

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

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

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

1. Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

2. Прописать стили в самом документе, используя тег .

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

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

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

   Пример вывода опции из админки в тело документа:

3. Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

   Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

   Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

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

   Инлайновая стилизация (от слова inline – встроенный) работает только в том элементе, в котором она прописана. Инлайновые стили имеют наибольший приоритет.

   То-есть если во внешнем файле у вас указана одна картинка для фона, а в инлайновых стилях другая – сработает вторая.

1.2 CSS синтаксис

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

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

Просто, не правда ли?

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

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

//HTML: //CSS: .my-class { background-color: #999; }

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет – серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление – серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

//HTML Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами. //CSS .parent .children { color: #666; } .parent { padding: 10px; color: #999; }

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента.

Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .

parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999.

Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .

parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили – инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
   Пример использования !important: .my-class { background-color: #999!important; }
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   //HTML

   Далеко-далеко за словесными горами.

   //CSS .my-class { margin: 10px; } будет иметь меньший приоритет для дочернего p, чем: .my-class p { margin: 15px; } В результате тег

   , находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

.my-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

.my-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

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

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

color	960 раз	Цвет текста элемента:
background-color	755 раз	Цвет фона элемента:
font-size	524 раза	Размер шрифта:
opacity	435 раз	Уровень прозрачности элемента:
padding	372 раза	Размер полей внутри элемента:
width	356 раз	Ширина блочного элемента, не включая размеры границ и полей:
margin	311 раз	Внешние отступы элемента:
height	305 раз	Высота блочного элемента, не включая размеры границ и полей:
font-weight	280 раз	Насыщенность шрифта:
text-align	245 раз	Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

Технически Медиа-запрос – это простое логическое выражение, которое может быть или истинным или ложным.

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство – all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

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

1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=”решетку” и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
3. Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов. Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной – это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
4. Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д. Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
5. Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких – подробное руководство;
6. Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
7. Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки – переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует;
8. Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

А на сегодня всё, спасибо за внимание 🙂

Источник: https://webdesign-master.ru/blog/html-css/2017-01-10-css-rukovodstvo.html

Основы CSS для начинающих

Пример<\p>

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

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

Пример

где,

css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

4. Самый распространенный способ применений каскадной таблицы стилей – это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

Пример

где,

css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

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

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

С селекторами элементов (тегов) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

p { color: red; }

p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

Другими словами, при разметке своего документа Вы помечаете элементы документа с помощью идентификаторов (которые являются уникальными во всем документе) или приводите их к одному классу (он может повторяться в документе).

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

Текст CSS будет таким:

#idred { color: red; } .black { color: black; }

Текст документа будет таким:

Пример красного абзаца<\p>

Пример черного абзаца<\p>

Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

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

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

Текст CSS:

a[href=”/ваша нужная ссылка”]{ font-size: 20px;

Текст HTML документа:

ссылка

ссылка

Как Вы видите у нужной нам ссылки, шрифт стал 20 пикселей.

Теперь рассмотрим тоже популярный вид селекторов это – селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:

Текст CSS:

p { color: red; } div p { color: green; }

Текст HTML документа:

Пример красного абзаца<\p>

Пример абзаца, который имеет потомка элемент div

 

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

Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих, где более подробно описаны все возможности CSS и как их применять на практике.

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

Источник: https://info-comp.ru/obucheniest/188–osnovi-css.html

Урок 39 Основа языка CSS: это должен знать каждый блоггер

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом  блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

За внешний вид блога на WordPress отвечает файл style.css, находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css текстовым редактором Notepad++, найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

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

Теория по CSS

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

Шрифт

font-size –  размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

font-size: 14 px;

font-family – шрифт для элемента (font-family: имя_шрифта)

font-family: Tahoma;

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

font-weight: bold;

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

font-style: normal;

font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

p { font: bold italic 12px verdana; }

Размер

width – ширина элемента (width: значение в пикселях, процентах и т.п.)

width: 333px;

height – высота элемента (аналогично width)

height: 333px;

max-width – максимальная ширина элемента (по аналогии)

max-width: 333px;

min-width – минимальная ширина элемента (так же как и width)

min-width: 333px;

max-height – максимальная высота элемента;

max-height: 333px;

min-height – минимальная высота;

min-height : 333px;

Свойства текста

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)

text-align: center;

vertical-align – вертикальное выравнивание;

vertical-align: justify;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

line-height: 1.5;

color – цвет текста (color: цвет). Цвета могут задавать по-разному:

1. используя название (red, green, white и т.д.);
2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #

color: #000000;

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

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

letter-spacing: 7px; 

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

text-transform: uppercase; 

Фон

background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

background: #000 url('images/wpnew.png') repeat-y;

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

background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):

background-position: left top;

background-color – цвет фона (background-color: цвет);

background-color: #333333;

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

background-attachment: scroll;

background-image – изображение фона (background-image: url(путь к файлу)):

background-image: url('images/wpnew.gif');

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )

background-repeat: repeat-y;

Позиции

float – определение выравнивания объекта (float: left | right)

float: left;

Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

visibility: hidden

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

border: 1px solid black;

• solid – сплошная рамка
• dotted – точечная
• dashed – пунктирная

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

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа (сверху, справа, снизу и слева соответственно);

margin: 3px 3px 3px 3px;

margin-top – верхний отступ;

margin-top: 3px;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

Поля

padding – свойства поля (сверху, справа, снизу и слева соответственно);

padding: 3px 3px 3px 3px;

padding-top – верхнее поле

padding-top: 3px;

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover { … })

a:hover { background: #333333; color: #333333;}

:visited – стиль посещенной ссылки (A:visited { … })

a:visited {color: #333333;}

Практика по CSS

Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

1. Открываю блог, используя Mozilla Firefox и внутри нее подгружаю FireBug
2. Нажимаю на стрелочку и выбираю объект на блоге (подробнее как это делать я рассказывал в предыдущем уроке)
3. В правой части FireBug ищу код, который отвечает за шрифт (напомню это font-family):
4. Как видите, в моем случае по умолчанию стоит шрифт Georgia. Честно, мне он не нравится. Пожалуй, я поставлю Tahoma. Для этого я просто дописываю слово Tahoma как первое слово после font-family:
5. Размера шрифта я оставил 12px. Изменения в Firefox видны сразу, если меня все это устраивает, я просто открываю файл style.css нахожу там 14ую строку (в каком файле искать ее и в какой строке я указал стрелкой на рисунке выше). И в этой 14ой строке (вернее до куда она протягивается) дописал шрифт, который мне нужен (т. е. Tahoma):
6. Сохранил файл и обновил на сервере. В результате теперь в статьях у меня стоит шрифт Tahoma.

Аналогичным образом Вы можете изменить, что угодно на блоге. Использование дополнения FireBug для Firefox делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере. Таким образом, Вы сэкономите кучу времени.

Мелкие изменения, которые я совершил на демонстрируемом блоге (если Вы активный читатель уроков WordPress, Вы знаете адрес того блога):

1. Поменял шрифт в статьях с Georgia на Tahoma (как это сделать показал выше);
2. Изменил цвет наведения на ссылки:
   1 прямоугольник был, и отвечает за цвет ссылки h1.. 2 прямоугольник я добавил: просто скопировал с первого и изменил следующее:

   3 – добавил двоеточие и слово hover, т.е. означает, что поменял стиль ссылки при наведении на него;

   4 – изменил цвет ссылки.

_____________________

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

Источник: https://wpnew.ru/sozdanie-bloga/razdel-3-dizajn-bloga/yazyk-css.html