У меня есть CSS в теге <a>.
Почему? color Не применяется?Inline CSS не работает
HTML:
<a href="example.com" style="
.button {
color: red;
}
.button:hover {
color: blue;
}">text</a>В его текущая форма вашего HTML недопустима, так как ваш атрибут style пытается использовать псевдоклассы (:active, :hover) и селекторов классов (.button). Атрибут style может включать только блоки объявления (без брекетов).
Значение атрибута стиля должен соответствовать синтаксису содержимого декларации CSS блока (без учета ограничивающих скобок)
CSS атрибуты стиля (http://www.w3.org/TR/css-style-attr/)
CSS- блок декларации определяется как:
Блок объявлений начинается с левой фигурной скобки ({) и заканчивается соответствующей фигурной скобкой (}). Между ними должен быть список с нулевыми или более разделенными запятой (;) объявлениями.
Синтаксис и основные типы данных (http://www.w3.org/TR/CSS21/syndata.html#rule-sets)
В идеале правила стиля будут перемещены в отдельную таблицу стилей, включенных в head страницы, но вы могли бы уйти с извлечением правила в style тег ,
<style>
.button {
text-decoration: none;
text-align: center;
padding: 6px 16px;
border: outset 5px #005072;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #000000;
background-color: #a62152;
background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 2px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=-1);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.button:hover {
padding: 6px 16px;
border: outset 5px #005072;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #573bc7;
background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 3px #2fb5b1;
filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
}
.button:active {
padding: 6px 16px;
border: inset 5px #005072;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #4326b5;
background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 9px #36cfb0;
filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
}
</style>
<a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>Итак, вам нужно:
style блок на свою страницу (предпочтительно в head)style в a к этому style блокclass="button" в aПрименение стилей к элементам является одним из основных принципов построения веб-страницы, так что я хотел бы предложить, что вы будете следовать некоторые учебники, чтобы научить себя основы. Learning the Web выглядит как хорошее место для начала.
С другой стороны, похоже, что вы используете Blogger. Вы можете добавлять пользовательские CSS, выполнив следующие действия:
- Вход на Blogger.com.
- Нажмите на свой блог.
- В левой части страницы нажмите «Шаблоны»> «Настроить»> «Дополнительно».
- Здесь вы можете изменять цвета и шрифты.
- Чтобы внести изменения с помощью пользовательского CSS, нажмите Добавить CSS.
Используй CSS, чтобы изменить формат своего блог (https://support.google.com/blogger/answer/41954?hl=en)
Мне пришлось добавить -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; к зависанию и активности, но кроме этого, он работал. Благодаря! –
Как избежать подчеркивания при показе при парящей? –
Это, вероятно, устанавливается другой декларацией в таблице стилей. Попробуйте добавить 'text-decoration: none;' to ': hover'. –
Вы не можете поставить состояние парения для кнопки на атрибут стиля. вы можете вставить тег стиля, а затем использовать: парить селектор псевдо
и о классе .button, просто добавьте еще один класс или продлить его ..
что-то вроде:
<style>
/* Default button style */
.button {
adding: 6px 16px;
border: outset 5px #005072;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*............. insert the rest here */
}
/* hover style - only stuff that should be
overriden when hovering goes here,
the default will still be relavent */
.button:hover {
background: red;
}
/* new button - it will inherit the default button
properties and override some of them */
.button.special {
background: green;
}
</style>
<a href="#" class="button">Default button</a>
<a href="#" class="button special">Special button</a>
Извините, но я новичок. В любом случае вы можете предоставить полученный код? –
Я не уверен, что вам нужно больше, чем это .. это окончательный код. – dcohenb
Вот что работает для меня (похоже, что @hidden Гоббса предлагали):
<style>
.button {
text-decoration: none;
text-align: center;
padding: 6px 16px;
border: outset 5px #005072;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #000000;
background-color: #a62152;
background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 2px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=-1);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.button:hover {
text-decoration: none;
padding: 6px 16px;
border: outset 5px #005072;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius: 0px;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #573bc7;
background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 3px #2fb5b1;
filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
}
.button:active {
padding: 6px 16px;
border: inset 5px #005072;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius: 0px;
font: 18px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #4326b5;
background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
-webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
-moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
text-shadow: 1px -1px 9px #36cfb0;
filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
}
</style><a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>Конечно, target="_blank" не требуется для выполнения вышеизложенного, это просто, если вы предпочитаете, чтобы ссылка открывалась на новой вкладке.
все, что я знаю, у вас обязательно должен быть не весь стиль внутри тега в HTML. переместите это в внешний файл CSS ... – Jesse