Home>

I am a beginner currently studying FlexBox.

Css does not apply to HTML.
I would be grateful if anyone could help.

<! DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <link rel = "stylesheet" href = "div # div10.css" media = "screen and (max-width: 900px)">
</head >>
<body>

     1 
     2 
     3 
     4 
     5 
     6 
     7 
     8 
     9 
     10 

</body>
</html>
# div1 {
    background-color: rgba (255,0,0,0.9);
}
# div2 {
    background-color: rgba (255,0,10,0.9);
}
# div3 {
    background-color: rgba (255,0,20,0.9);
}
# div4 {
    background-color: rgba (255,0,30,0.9);
}
# div5 {
    background-color: rgba (255,0,40,0.9);
}
# div6 {
    background-color: rgba (255,0,50,0.9);
}
# div7 {
    background-color: rgba (255,0,60,0.9);
}
# div8 {
    background-color: rgba (255,0,70,0.9);
}
# div9 {
    background-color: rgba (255,0,80,0.9);
}
# div10 {
    background-color: rgba (255,0,90,0.9);
}
# div1, # div2, # div3, # div4, # div5, # div6, # div7, # div8, # div9, # div10 {
    width: 100px;
    height: 100px;
    font-size: 400px;
}
#container {
    width: 98px;
    height: 400px;
    background-color: papayawhip;
    display: flex;
    flex-direction:
}
  • Answer # 1

    Well, there are several overlapping causes.

    In the value (URL) of the href attribute of the link element that specifies the CSS filediv # div10.cssIt is written that.In the URL#Has a special meaning (delimiter for URI reference)Because there is, directly in the file name#Cannot be written.
    If the CSS file name you want to read is "div # div10.css", you need to percent-encode it and write "div% 23div10.css", and if the file name is "div10.css", you need to write "div10.css". Do not write "#" here.

    Media queries on CSS files with media attributesscreen and (max-width: 900px)Is specified, so if the media type is not a computer screen or the computer screen is wider than 900 pixels, the stylesheet will not be applied.

    Besides, in the head elementRequired title elementIs not written, there is an extra>after the end tag of the head element, or near the end of CSSflex-directionIt is wrong that the property value is not written.