microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

updated css lesson

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-15 13:39:15 -08:00
parent 0d8d7e0e24
commit bc8746904d
3 changed files with 72 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@@ -3355,7 +3355,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -3376,12 +3377,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -3396,17 +3399,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -3523,7 +3529,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -3535,6 +3542,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -3549,6 +3557,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@@ -3556,12 +3565,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -3580,6 +3591,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -3660,7 +3672,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -3672,6 +3685,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -3757,7 +3771,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -3793,6 +3808,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -3812,6 +3828,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -3855,12 +3872,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },

54
step1-00/css-demo.css
View File

@@ -1,29 +1,31 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
/* Targeting an HTML tag */
h1 { h1 {
padding: 10px;
margin-bottom: 15px;
margin-top: 15px;
color: black; color: black;
background: #ddd; background: #ddd;
border: 1px solid #ababab; border: 1px solid #ababab;
margin-bottom: 15px;
margin-top: 15px;
padding: 10px;
} }
a { /* Overriding inherited styles */
color: white; span {
} color: #004578;
a:hover {
color: #ccc;
} }
/* Targeting a class name */
.tiles { .tiles {
display: flex; display: flex;
} }
/* Decendant selector */
.tiles img { .tiles img {
display: block; width: 100%;
margin: 0 auto;
max-width: 75%;
} }
/* Direct decendant selector */
.tiles > div { .tiles > div {
background: rgb(10, 10, 10); background: rgb(10, 10, 10);
color: white; color: white;
@@ -32,18 +34,38 @@ a:hover {
margin-right: 20px; margin-right: 20px;
} }
/* Qualified selector */
div.links {
background: #004578;
}
/* Style inheritance only works for unstyled elements */
a {
color: white;
}
/* Pseudo hover selector */
a:hover {
color: #ccc;
}
/* Sibling selectors */
a ~ a {
display: block;
}
/* Positional Pseudo Selectors */
.tiles > div:last-child { .tiles > div:last-child {
margin-right: 0; margin-right: 0;
} }
a + a { /* ID and selector lists */
display: block; #contact-form label,
} #contact-form input {
#contact-form > * {
display: block; display: block;
} }
/* Attribute selector */
input[type='submit'] { input[type='submit'] {
margin-top: 10px; margin-top: 10px;
} }

8
step1-00/css-demo.html
View File

@@ -6,7 +6,7 @@
<div> <div>
<h1>This is my <span>Title</span></h1> <h1>This is my <span>Title</span></h1>
<div class="tiles"> <div class="tiles">
<div> <div class="links">
<h2>Important Links</h2> <h2>Important Links</h2>
<a href="#">We're Awesome</a> <a href="#">We're Awesome</a>
<a href="#">Learn More</a> <a href="#">Learn More</a>
@@ -14,14 +14,14 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="./fabric.jpg" alt="fabric logo" /> <img src="./fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>
<form id="contact-form"> <div id="contact-form">
<label>Email</label><input type="email" /> <label>Email</label><input type="email" />
<input value="Submit" type="submit" /> <input value="Submit" type="submit" />
</form> </div>
</div> </div>
</div> </div>
</div> </div>