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

S

specar

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

Для одной ссылки она оформлена следующим образом:

Код: 
.
a.click { margin: 0 auto; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em;
}
a.click { max-width: 22em; color: #FFF; text-decoration: underline;
}

Код (разметка): А вторая ссылка оформлена так:
. #toppics { clear:both; padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:300px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; }
Код (разметка): По какой-то причине (кроме того, что я новичок в этом) он не хочет работать правильно. Вторая ссылка отображается точно так же, как первая, и именно здесь у меня возникла проблема.

Может ли кто-нибудь сказать мне, что я делаю неправильно, и, возможно, направить меня туда, где я смогу узнать, как правильно это сделать?

Заранее спасибо . . .
 
E

edzx

#2
Вы еще не совсем поняли «каскадную» часть таблиц стилей, не так ли?
В правиле #toppics a:active|hover|focus вы устанавливаете фон. Это повлияет на КАЖДУЮ А в #toppics (фактически на каждую ссылку). Если только вы не установите фактический фон в правиле .click или просто фон: прозрачный;

Что-то объявленное всегда будет влиять на каждый элемент, которому оно соответствует, если только вы не удалите его снова в более позднем правиле. Это означает фактическое изменение конкретного правила еще раз.
 
L

Leva888

#3
Что ж, в этом примере вы совершенно правильно поняли: верблюжий регистр - это, по сути, прописная буква в именах, состоящих из нескольких слов. Начинается со строчной буквы (хотя и на этот счет есть разные мнения).

Лично я не очень фанат CamelCase, я предпочитаю разделять имена переменных, используя вместо этого подчеркивание (так что это будет Camel_case) - но это зависит от вас и не имеет особого значения, если вы сохраняете единообразие . Нет ничего более бесполезного, чем непонимание того, почему что-то не работает, пока вы все трижды не проверите и не обнаружите, что вы использовали неправильное имя переменной, или имя класса, или или или.

Что касается «щелчка» в качестве имени класса, то оно как бы противоречит цели разделения контента и стиля. «Клик» — это описательное слово, такое же, как «красный» или «подчеркнутый», которое при изменении CSS теряет всякий смысл. «Почему у вас есть класс с именем .red, который содержит цвет: коричневый; и преобразование текста: верхний регистр;»?
Поэтому, как правило, разумнее давать классам более описательные имена (под этим я подразумеваю то, для чего они предназначены, а не то, что они содержат).
 
Я

Ярослав Терентьев

#4
Вот почему вам нужно назначить идентификатор вашей ссылке, если она уникальна, чтобы избежать путаницы,
Код: 
#foo { margin: 0 auto; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em;
}
#foo { max-width: 22em; color: #FFF; text-decoration: underline;
}
Код (разметка):
 
T

tuirson

#5
PoPSiCLe, у меня есть сайт, который работает, и мой полный HTML-код:


Код: 
 html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img { margin:0; padding:0;
}
img, fieldset { border:none;
}
hr { display:none; 
}

@media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

@media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px)
{ html { font-size:200%; }
}
body { min-width:55em;  font:normal 85%/150% arial,helvetica,sans-serif; color:#FFF; background:#333;
}
.heightWrapper { background:#600;
}
#wrapper { margin:0 auto; max-width: 879px; text-align:center; border: 1px solid #CCC;
}
h1 { padding-left:2em; font-size:100%; 
}
h1 a { position:relative;  display:block; padding:40px 0;  text-decoration:none; font:bold 60px/64px arial,helvetica,sans-serif; color:#FFF;
}
h1 span { position:absolute; top:0; left:-26px; width:877px; height:170px; background:url(/images/header.jpg) center left no-repeat;
}
.advert { padding: 2em 1em 2em 1em; font-size: 1.6em; line-height: 1.25em; text-align:center;
}
h2 { padding: 1em 0 1em 0; font:bold 175%/145% arial,helvetica,sans-serif;
}
#contentWrapper { width:100%; background: #000;
}
#toppics { clear:both;  padding:2em 0 1em; margin:0 2em; border-top:2px solid #400;
}
#toppics ul { list-style:none; padding-bottom:1em;
}
#toppics li { display:inline; vertical-align:top;
}
#toppics a { width:300px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s;
}
#toppics a:active,
#toppics a:focus,
#toppics a:hover { background:#800;
}
#toppics img { display:block; margin:0 auto 0.5em; max-width:100%;
}
.click { margin: 0 auto; margin-top: 1em; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em;
}
a.click:link { max-width: 22em; color: #FFF; text-decoration: underline;
}
#footer { padding:1em; text-align:center;
}
@media (max-width:50em) { body { min-width:192px;  } #contentWrapper { float:none; width:auto; } #content { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #toppics { padding:1em 0 0; margin:0 0.5em; } #toppics a { padding:0.5em; }
}
@media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; }
}
@media (max-width:340px) { #toppics a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; }
}

Код (разметка): И полный стиль:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen3.css" media="screen,projection,tv" > <title> Title Of The Site Will Go Here </title> </head><body> <div id="wrapper"> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="toppics"> <div class="advert"> Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="click"> <a href="**"> Click Here Now To See More Of What We Have For Sale </a> </div> </div></div> </div> </body> </html>
Код (разметка): Если вы случайно посмотрите на сайт, если вы спуститесь к БОЛЬШОЙ красной кнопке и наведете курсор мыши на текст, вы увидите проблему, о которой я говорю. Я планирую использовать этот простой дизайн для небольшого побочного бизнеса, который начинает моя жена, и я просто не могу понять, что делаю неправильно.

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

большое спасибо за вашу помощь . . .
 
N

Narkosha46

#6
это это.... ЭТОТ!!! Эй, Зевс Х, молочная железа пашет Рождество ЭТОТ!!!

Выберите технику, которая работает на любом языке, на котором вы работаете (ЖЕЛАТЕЛЬНО тот, который рекомендован самими создателями языка), и ПРИДЕРЖИВАЙТЕСЬ ЕЕ.

Нет НИЧЕГО более раздражающего, чем попытка работать с кодом, в котором нет ни причины, ни рифмы к тому, как это делается.

Также имейте в виду, что некоторые языки смешивают их все по какой-то причине - см. php, где отдельные функции пишутся строчными буквами (htmlspecialchars, strrstr, addslashes). Перед функцией из определенной библиотеки имя библиотеки подчеркивается (array_combine, array_diff, mysql_connect), начиная с заглавной буквы, а CamelCase означает, что это определение класса (ArrayIterator, PDO, PDOStatement), а все заглавные буквы означают определение константы объекта. , или суперглобальный.

Вот почему это раздражает, когда они игнорируют это... например, как в случае с mysqli. Это ДОЛЖЕН быть MySqlI, но по какой-то причине они решили «нет». (вероятно, потому, что они думали, что болтуны, которые не могут понять, как использовать объектную версию вместо идиотских процедурных оберток, будут сбиты с толку)
 
C

c0matose

#7
Как всегда, я ценю ваш вклад, Deathshadow, но я должен спросить. . . что, черт возьми, такое CamelCase?

Кажется, я понимаю «специфичность». . . # является родительским и имеет приоритет над дочерним классом. Теперь позвольте мне спросить вас: у меня всегда сложилось впечатление, что конкретный #whatever — это то, что следует использовать только один раз. Если его необходимо использовать более одного раза, то это должно быть «class=whatever». Это действительно?

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

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

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

С уважением . . .
 
W

wsed

#8
Я внес предложенное вами изменение в свой CSS, но это не устранило проблему. Если вы не просматривали реальную страницу, когда вы наводите указатель мыши на текст большой красной кнопки (css.click), он все равно показывает маленький темно-красный фон, как и изображения щенков вокруг него. Проблема в том, что мне не нужен темно-красный фон вокруг текста красной кнопки (css.click).

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


и вот что я пытаюсь сделать:


Я надеюсь, что я имею смысл.

Большое спасибо . . .
 
J

Jesika

#10
У вас это где-то работает? Либо проблема с каскадом, либо у вас ошибка в CSS. если это копипаста, то непосредственно перед объявлением a.click стоит точка, которой не должно быть. И как выглядит HTML? Здесь нет ограничений на код — вставьте ВСЕ, что может иметь значение, включая полный HTML и CSS.
 
Get involved!

Here you can only see a limited number of comments. On СЕО Форум Вебмастеров you see all comments and all functions are available to you. To the thread