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

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

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

 
.
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; /* make sure this is past both columns */ 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 a:active|hover|focus вы устанавливаете фон.

Это повлияет на КАЖДУЮ А в #toppics (фактически на каждую ссылку). Если только вы не установите фактический фон в правиле .click или просто фон: прозрачный;

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

Это означает фактическое изменение конкретного правила еще раз.

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

Начинается со строчной буквы (хотя и на этот счет есть разные мнения).

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

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

«Клик» — это описательное слово, такое же, как «красный» или «подчеркнутый», которое при изменении CSS теряет всякий смысл.

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

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

 #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;
}

Код (разметка):

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

 

/* null margins and padding to give good cross-browser baseline */
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;
 /*
 HR in my code are for semantic breaks in topic/section, NOT
 style/presenation, so hide them from screen.css users
 */
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
 * {
 -webkit-text-size-adjust:none;
 -ms-text-size-adjust:none;
 }
}

/* fix for HDX displays like the Kindle Fire HDX */
@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; /* for pre CSS3 capable browsers */
 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%; /* prevent FF reverse inheritance bug */
}

h1 a {
 position:relative; /* so we can absolute position span over this */
 display:block;
 padding:40px 0;
 /* 40px top + 40px bottom + 64px line-height == image height */
 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; /* make sure this is past both columns */
 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; /* CSS3 possible, so let it go narrower */
 }
 #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> <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="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <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, спасибо за ваше предложение.

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

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

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

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

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

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

например, как в случае с mysqli.

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

Как всегда, я ценю ваш вклад, Deathshadow, но я должен спросить.

. . что, черт возьми, такое CamelCase? Кажется, я понимаю «специфичность». . . # является родительским и имеет приоритет над дочерним классом.

Теперь позвольте мне спросить вас: у меня всегда сложилось впечатление, что конкретный #whatever — это то, что следует использовать только один раз.

Если его необходимо использовать более одного раза, то это должно быть «class=whatever». Это действительно?

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

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

. . Читать дальше вместо клика.

Я тоже буду работать над этим.

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

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

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

Я внес предложенное вами изменение в свой CSS, но это не устранило проблему.

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

Проблема в том, что мне не нужен темно-красный фон вокруг текста красной кнопки (css.click). Вот что я получаю, когда навожу курсор мыши на текст: и вот что я пытаюсь сделать: Я надеюсь, что я имею смысл. Большое спасибо . . .

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