Site icon Vavik96

Шпаргалка по стандартным стилям CSS для начинающих

Стандартные стили для класса Body

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

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(имя-пользователя) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(имя файла шаблона) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(номер страницы) {}
.single-paged-(номер страницы) {}
.page-paged-(номер страницы) {}
.category-paged-(номер страницы) {}
.tag-paged-(номер страницы) {}
.date-paged-(номер страницы) {}
.author-paged-(номер страницы) {}
.search-paged-(номер страницы) {}

Если, например, вы захотите оформить вашу страницу результатов поиска, то можете использовать класс “search-results” для добавления своего оформления. WordPress добавляет этот класс к тегу body только тогда, когда активна страница результатов поиска, поэтому не затрагиваются остальные страницы.

Стандартные стили записей

Как и в случае с элементом body, WordPress добавляет динамические классы к элементам записи. Вот список наиболее популярных из них:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

И снова, WordPress добавляет динамические классы к вашим записям, используя функцию post_class (), которая позволяет вам создавать свои собственные стили для каждого формата. Функция post_class () добавит класс в виде “.format-foo”, где foo — любой выбранный вами формат записи (например, галерея, изображение и т.д.)

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Стандартные стили меню

В нашей статье под названием как стилизировать меню в WordPress мы обсуждали как добавить собственный класс к вашем меню. Мы будем считать, что вы прочли ту статью и то, что вы дали своему классу меню имя “main-menu”.

#header .main-menu{}           /* контейнер */
#header .main-menu ul {}       /* первый неупорядоченный список */
#header .main-menu ul ul {}    /* неупорядоченный список в неупорядоченном списке */
#header .main-menu li {}       /* пункт списка */
#header .main-menu li a {}     /* ссылка в пункте списка */
#header .main-menu li ul {}    /* вложенный список в пункте списка */
#header .main-menu li li {}    /* выпадающий элемент навигации */
#header .main-menu li li a {}  /* анкор выпадающего элемента */


.current_page_item{}           /* Класс для текущей страницы */
.current-cat{}                 /* Класс для текущей рубрики */
.current-menu-item{}           /* Класс для любого другого текущего пункта меню */
.menu-item-type-taxonomy{}     /* Класс для таксономии */
.menu-item-type-post_type{}    /* Класс для страницы */
.menu-item-type-custom{}       /* Класс для любого пользовательского элемента, который был добавлен */
.menu-item-home{}              /* Класс для элемента, ведущего на главную страницу блога */

Обратите внимание, что каждый раз при создании меню в WordPress оно автоматически оборачивается в контейнер (div). Этот div имеет только имя класса, если вы его указали (мы выбрали “main-menu”). И уже внутри него вы стилизируете остальные элементы списка.

Стандартные стили визуального (WISIWYG) редактора

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

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Вы видите, что тут несколько классов, которые относятся только лишь к изображениям. Если, например, пользователь решит вставить изображение, выравненное по левому краю, то WordPress добавит ему класс “alignleft”.

Стандартные стили виджетов WordPress

Виджеты — еще одна популярная фича WordPress. Как разработчик, вы должны контролировать, какие виджеты будут присутствовать в теме, поэтому вы должны знать какие конкретно стили нужно добавить.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

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

.widget_pages ul, .widget_archive ul {}

Стандартные стили формы комментирования

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

/*Вывод комментариев*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

/*Форма комментирования */

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 
.form-submit

В виду того, что это только шпаргалка, реальное количество классов и ID намного больше.

wpincode.com

Exit mobile version