按钮上的文字不会变色
I am trying to change the colour of the text on a button, and it just won't change.
Also, somewhat unrelated to the question at hand, if I put my "text-decoration:none;" up in the css section of my code, it just doesn't work, basically.
I got it to work by just moving it down to the html section of my code. My problem right now it that the text just won't change colour! I've tried changing the font to see if that might be a problem, but it's still not working. I've also tried moving the color style tag down to the html section, and that doesn't work either.
How to fix this?
I am trying to make the text black, by the way, but it's stuck at that link-blue colour,
<!DOCTYPE html>
<html>
<head>
<title>Norgafin</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&family=Stack+Sans+Notch:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');
@font-face{
font-family: "Stack Sans Notch";
src: url(<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>Hello, World!</title>);
}
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
.text-box-logo{
max-width:85vw;
margin:0;
font-size:7.5vw;
text-align:center;
font-family:"Stack Sans Notch";
margin-top:8vw;
}
#ImgLogo1{
width:18vw;
height:18vw;
display:block center;
vertical-align:center;
horizontal-align:center;
animation:fadeIn 2s;
}
#nameline1{
height: 3px;
background-color: black;
border: none;
}
#logo{
text-align:center;
}
.text-aboutus-indicator{
font-family:"Stack Sans Notch";
text-align: center;
font-weight:450;
font-size: 1.7em;
padding:0;
margin:0;
}
.referencebar1{
background-color:#fc8732;
width:100vw;
height:6.5vw;
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:0.5vw;
position:fixed;
top:0;
right:0;
}
#ourstory1{
font-family:Aleo;
font-weight:450;
font-size:1.5em;
max-width:75vw;
width:100%;
margin:0 auto;
line-height:1.4;
}
.text-box-aboutus{
max-width:75vw;
margin:0 auto;
font-family:"Aleo";
font-weight:450;
width:100%;
line-height:1.4;
font-size:1.5em;
}
.navbar{
position:fixed;
top:0;
left:0;
display:block;
background-color:#ffffff;
height:6.5vw;
}
.button{
background-color:white;
height:6.5vw;
width:10vw;
display:inline-block;
border:none;
font-family:Aleo;
text-align:center;
position:fixed;
top:0;
right:0;
font-size:3vw;
color:black;
}
</style>
</head>
<body style="background-color:#f0eeed;">
<div class="referencebar1"></div>
<h1 style="text-align: center" id="logo">
<div class="text-box-logo">Norgafin Solutions</div>
<hr id="nameline1">
<img src="https://i.imgur.com/JmMjQ8u.png" id="ImgLogo1">
</h1>
<h3> <div class="text-aboutus-indicator">About Us:</div></h3>
<p>
<div class="text-box-aboutus">Located somewhere, Norgafin solves everyday problems by developing cutting-edge, military grade products, with the help of our state-of-the-art research team.</div>
</p>
<h3><div class="text-aboutus-indicator">Our Story</div></h3>
<p id="ourstory1">
Norgafin was founded and created by two sisters, Ellis's sister', and Oliver's sister. Over 200 years were spent in the making of what you see here today. Inspiration has been a faundamental ingredient in our products and services. Many late nights were spent mulling over our cutting-edge and novel achievements, and working hard to bring them to life. It is our greatest pleasure to be able to put up this site, and to present to you our products and our story.
</p>
<button class="button">
<a href="" style="text-decoration:none">Home</a>
</button>
<!--<nav class="navbar">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Products</a>
<a href="">Our Team</a>
</nav>-->
</body>
</html>
解决方案
You have a clickable element <a> nested inside a <button> element, which is also clickable. This is technically invalid HTML.
As for why your current HTML is styled the way it is? That's because the browser defines a default color for <a> tags. Your current CSS uses the .button selector. The native color for the <a> tag overrides the inherited color from the .button ancestor.
The easy fix is to simply remove the <a> tag:
<button class="button">
Home
</button>
If you need an additional element to apply styling, use a <span> tag instead:
<button class="button">
<span>Home</span>
</button>
The <span> tag is semantically meaningless, and is perfectly valid to nest inside a clickable element, yet it can provide another element to apply styling to, if necessary.
相关文章
