My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.
I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is`
<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
Here is the HTML code of attributes I want to change`
<h1>Space</h1> <section class="parallax"> <div class="parallax-inner"> <h2>Space</h2> </div> </section> <h1>Space</h1>
And here is my main.css, which takes effect only when the bootstrap line is deleted.
.parallax { background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed; background-size: 100% 100%; } .parallax-inner { padding-top: 10%; padding-bottom: 10%; text-align: center; font-size: 575%; } .h1 { font-size: 575%; }
I have tried !importnant tags too.
I am not a bootstrap expert, but .parallax
and .parallax-inner
sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.
If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...
To override a pre existing style use !important
after your CSS rule. For example.
h4 {
font-size: 14px !important
}
The above rule will override any other font size assignment for h4
如果要绕过自举样式的冲突,则必须更加具体。例如,可以将.parallax div与其父元素作为目标。
In CSS, a period . denotes a class. If you want to work with the tags alone, simply put 'h1' instead of '.h1' in your css stylesheet.
.parallax { background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed; background-size: 100% 100%; } .parallax-inner { padding-top: 10%; padding-bottom: 10%; text-align: center; font-size: 575%; } .h1 { font-size: 575%; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.