Селекторы типов и классов (comp.inet.elendok) : Рассылка : Subscribe.Ru

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 134 RSS

← Июнь 2014 →
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

За последние 60 дней ни разу не выходила

Сайт рассылки: http://your3w.ru/
Открыта: 14-04-2014

Автор

iViktor

Статистика

134 подписчиков
0 за неделю

← Все выпуски →

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

2014-05-16 10:56 Селекторы типов и классов
2014-05-23 07:57 ID селекторы — использование и создание
2014-05-29 10:17 Групповые и универсальный селекторы CSS — оформление веб страницы
2014-05-29 10:48 Применение селекторов потомков в CSS
2014-05-30 11:33 Как использовать псевдоклассы и псевдоэлементы
2014-06-03 08:22 Селекторы атрибутов в CSS

Селекторы типов и классов
2014-05-16 10:56 viktor

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

Copyright © 2014, your3w.ru - Простыми словами о создании сайтов и блогов.... Все права защищены. | Постоянная ссылка | Комментов нет
Вы также можете ознакомиться с другими постами рубрики Основы CSS.

ID селекторы — использование и создание
2014-05-23 07:57 viktor

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

Групповые и универсальный селекторы CSS — оформление веб страницы
2014-05-29 10:17 viktor

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

Применение селекторов потомков в CSS
2014-05-29 10:48 viktor

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

Как использовать псевдоклассы и псевдоэлементы
2014-05-30 11:33 viktor

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

Оформление ссылок – использование псевдоклассов

Для оформления ссылок в зависимости от действий над ними посетителя сайта существует четыре псевдокласса вот они:

a:link – псевдокласс оформляет ссылки над которой не осуществлялось никаких действий посетителем. Такой их стиль вы видите, когда только открываете страницу.

a:hover — псевдокласс для ссылки над которой занесён указатель мыши.

Так же псевдокласс (:hover) успешно можно применять не только для оформления ссылок но и для выделения других тегов например текста или тега контейнера (div) которые бы меняли свой внешний вид при наведении на них курсора. Для создания такого селектора можно использовать как теги (p:hover) для текста или (.master:hover) для класса так и идентификаторы или групповые селекторы.

a:active – псевдокласс оформляющий ссылку во время щелчка мыши по ней.

a:visited – псевдокласс формирующий внешний вид ссылки по которой уже осуществлялся переход.

Видео по работе с псевдоклассами для ссылок:

Оформление фрагментов текста и форм — псевдоэлементы

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

В CSS3 изменились правила написания для этих селекторов псевдоэлементов ранее они писались с одним двоеточием в начале а теперь с двумя ::first-letter ::first-line современные браузеры понимают раннюю транскрипцию с одним двоеточием. Чего нельзя сказать о старых вариантах браузеров, которые наотрез не хотят понимать новое написание. Это касается IE8 который работает только с одним двоеточием.

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

К примеру, с его помощью можно изменять цвет фона для поля используя правило для этого псевдокласса вот такого вида:

input:focus { background: #FFFFCC; }

Псевдоэлемент :before

Ещё более интересный эффект можно получить используя псевдоэлементы :before и :after. Первый из них позволяет добавить маркер или сообщение перед определённым элементом страницы. К примеру, нам нужно вывести подсказку перед текстовым абзацем, всё что нам нужно сделать в этом случае это задать класс для нужного абзаца. Пусть это будет класс (.note) и создать правило для псевдоэлемента вот такого вида:

p.note:before {content: “Прочти Это!!!”;}

Везде на странице где вы будете применять абзацы с классом (.note) будет появляться и подсказка (содержимое псеводэлемента :before).

Псевдоэлемент :after

:after- псевдоэлемент действующий также как и (:befor) только наоборот. То есть он выводит своё содержимое после нужного элемента страницы. С его помощью, например, можно вывести закрывающую кавычку после цитаты.

Псевдоэлемент ::selection

И ещё один псевдоэлемент на сегодня это ::selection. Он ссылается на выбранные пользователем элементы страницы. Яркий пример его использования — это выделение текста курсором мыши, который обычно подсвечивается на странице синим цветом. Однако этот цвет можно изменить в соответствии со стилем вашего ресурса. Правило CSS для этого случая будет выглядеть так:

::selection {
 color: #FFFFFF;
background-color: #993366; }

Свойства, которые мы можем использовать при работе с таким селектором псевдоэлемента это цвет текста (color) и фоновый цвет (background-color). К сожалению (::selection) работает не во всех браузерах IE8 и Firefox его не поддерживают. Для того чтобы заставить его работать в «Огненной лисе» нужно использовать соответствующий префикс, правило в этом случае будет выглядеть так:

::-moz-selection {
 color: #FFFFFF;
background-color: #993366; }

Для обеспечения работы этого псевдоэлемента на только в Firefox но и в других браузерах в таблице стилей нужно использовать оба правила для (::selection).

На этом сегодня всё в следующем посте я расскажу о селекторах атрибутов.
Автор: Виктор Докучаев.

Селекторы атрибутов в CSS
2014-06-03 08:22 viktor

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

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

Эффективная работа в Photoshop

Статистика

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

Оформление ссылок – использование псевдоклассов

Оформление фрагментов текста и форм — псевдоэлементы

Псевдоэлемент :before

Псевдоэлемент :after

Псевдоэлемент ::selection