1.
How to host a website
1. create a new repository
2. Upload program
3. setting-> pages
4. change branch to main
2. File path
double dots: ../[Link] => go up a level
single dot: ./[Link] => current directory, folder that file is currently located, the single dot can be omitted
3. CSS
3.1 Cascade
1. position (lower down the file, the important it is)
li{
color:red;
color:blue; // display blue
}
li{
color:green; //not red, not blue, but gree displayed
}
2. specificity
<li id = "first-id" class="first-class" draggable></li>
li {color: clue}
.first-class {color:red}
li[draggable] {color:purple}
#first-id {color:orange}
//from top to down, more specific, finally displayed in orange
3. type
//1. external
<link rel="stylessheet" href="/[Link]">
//2. internal
<styles> </styles>
//3. inline (this will be the final one to dispaly)
<h1 style="">
HELLO
</h1>
4. Importance
color: green !important; // on top of everything
3.2 selector
group
selector, selector{
child = apply to direct child of left side
selector > selector {
color: firebrick;
}
Descendant
selector selector {
color: blue
}
chaining = apply where ALL selectors are true, no space between, start with element
selectorselector {
color: seagreen;
}
<h1 id="title" class="big heading">hellow </h1>
h1#[Link]
3.3 positioning
static(default), even if add "left: 50px"
Relative: position relative to default position
Absolute: relative to nearest positioned ancestor or top left corner of webpage
z-index
Fix position
3.4 Display
Block: take entire line
Inline: same line
Inline-block: two blocks in horizontal line
none
3.5 float
float decides text如何排版
img{
float: left //img left, text float around
}
footer{
clear: left; //ignore anything floating
}
Apply to two columns design : float left + float right
3.6 media query
//break point is 600px, can use min-width or max-width, min target bigger screen, max target smaller
screen.
@media (min-width: 600px) and (max-width:900px) {
h1 {
font-size:15px
}
}
//example
<!DOCTYPE html>
<html lang="en">
<!--
TODO: Change the background color for each device
[lightsalmon] Mobile Devices: 319px — 480px
[powderblue] iPads and Tablets: 481px — 1200px
[limegreen] Laptops: 1201px — 1600px
[seagreen] Desktops: 1601px and more
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Media Query</title>
<style>
body {
background-color: aquamarine;
}
@media (min-width:1201px) and (max-width:1600px){
body {
background-color: limegreen;
}
}
@media (min-width:481px) and (max-width:1200px) {
body{
background-color: powderblue;
}
}
@media (min-width:319px) and (max-width:480px) {
body{
background-color: lightsalmon;
}
}
</style>
</head>
<body>
</body>
</html>
4. Flex
.container {
display: flex;
gap: 10px
}
flex-basis: 100px (set on the child of container, not the container itself. Related to flex-direction, column->height,
row->width)
Inline-flex: 根据element本身的⻓度排列
4.1 layout
[Link]
cheatsheet: [Link]
[Link]
Order: 0 (default)
Flex-wrap: nowrap; (⽐如到最右边没有空间了，但是不换⾏)
Justify content
Flex-start
Flex-end
center
Space between (两端到头)
Align-items
need to set the height of the container
start
end
center
baseline
Stretch （占满整个container）
Align-self: seperate the item itself apart from the group
Align-content => use only with flex-wrap: wrap
4.2 flex sizing
Content width < width property < flex-basis < min-width (longest word) < max-width (longest line)
Flex-basis: row->width; column->height
Flex-grow: 0 or 1
Flex-shrink: 0 or 1
组合， flex: 1 1 0, first grow, second is shrink, last is flex basis, 最简洁的写法 flex:1 , all children will be equal in width， 想要
整⻬排列的card element⾥⾯
.pricing-plan{
flex:1;
max-width: 400px;
padding: 20px;
background-color: beige;
border-radius: 5px;
text-align: center;
}
5 Grid
5.1 compare flexbox and grid
Flex: align content on one dimensional line
Grid: layout content one two dimensional grid
.container{
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 10px
}
5.2 grid sizing
[Link]
Fixed size
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
}
Auto sizing
.grid-container {
display: grid;
grid-template-rows: 100px auto; //second row only fit the content
grid-template-columns: 200px auto; //second column could be take the rest space
}
fraction
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}
Min-max
.grid-container {
display: grid;
grid-template-rows: 200px minmax(400px, 5fr);
grid-template-columns: 200px minmax(400px, 5fr);
}
Repeat
.grid-container {
display: grid;
grid-template-rows: repeat(2, 200px);
grid-template-columns: repeat(2, 200px);
grid-auto-rows: 300px; //多出来的⼀个element会⾃动变成300px每⾏
}
5.3 grid placement
.container {
height: 100vh;
display: grid;
gap: 3rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
}
.cowboy {
background-color: #00B9FF;
grid-column: span 2; //占2个columns
grid-column-start: 2; //从第⼆个column的位置开始
grid-column-end: -1 //right hand most line of the grid
grid-row 设置占多少⾏
}
how to give coordinates of a grid item?
grid-area: 1 / 3 / 3 / 4
//1. row start
//2. row end
//3. column start
//4. column end