私はCssから身体にアクセスできません

Question

私はCodepenでこのトリビュートページを作成しました。 Bootsrapを追加しました。そして、私はcssから身体にアクセスできません。私のコードはここで確認できます。

body { 
 
    background-color: black; 
 
} 
 

 
.header { 
 
    font-size: 100px; 
 
    font-family: "Libre Barcode 39 Text"; 
 
    text-align: center; 
 
} 
 

 
.mainPicture { 
 
    width: 95px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>

Answer 1

ブートストラップスタイルは、あなたのスタイルをオーバーライドしています。ブートストラップスタイルを上書きするには！importantを使用してください。詳細については、これらの用途

html>body { 
 
    background-color: black; 
 
} 
 

 
.header { 
 
    font-size: 100px; 
 
    font-family: "Libre Barcode 39 Text"; 
 
    text-align: center; 
 
} 
 

 
.mainPicture { 
 
    width: 95px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>

をチェックするために

代替ソリューション： -

使用html > bodyは良い練習になります特異性を高めるために

html > body { 
 
    background-color: black; 
 
} 
 

 
.header { 
 
    font-size: 100px; 
 
    font-family: "Libre Barcode 39 Text"; 
 
    text-align: center; 
 
} 
 

 
.mainPicture { 
 
    width: 95px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>