全栈工程师成长记

编程重新定义人生

CSSxCountry

CSSxCountry

Leverl 1 - Frost-Proof Fundamentals

Slope Style

Adding CSS:

  • Inline style attribute
<h1 style="color: #98c7d4;">CSS Cross Country</h1>
  • In the <head>
<head>
    <style>
        h1 { color: #98c7d4; } 
    </style>
</head>
  • External <link>
<head>
     <title>CSS Cross Country</title>
     <link rel="stylesheet" href="styles.css" />
</head>

Selectors

Primary DOM selectors:

  • Element selector h1

  • Class selector .intro

  • ID selector #header

Compound selectors:

<h1 class="intro" id="header">Nice and Toasty</h1>

h1#header {
     color: #aba4ac;
     margin-bottom: 10px;
}  

Cascade Order

Style priority is determined by position in site

Increasing Priority⬇️

  • External
  • In the
  • Inline style attribute
  • Using !important
Priority is also dependent on position in document

the second color definition for .downhill overrides the first

.intro {
     color: #444245;
   }
.intro {
     color: #dddadd;
   }
Non-conflicting properties will be combined
.intro {   
  color: #dddadd;
}
.intro {
  margin-bottom: 5px;
  width: 900px;
}

⬇️

.intro {
  color: #dddadd;
  margin-bottom: 5px;
  width: 900px;
}

Floating Left & Right

Removes elements from the document flow and moves them to a specified edge

float: left / right / none

Challenges 1 - External Stylesheets

Refactor the <head> tag so that all CSS is instead found on an external stylesheet.

  body {
    color: #4b4648;
    font-family: tahoma, arial, sans-serif;
    font-size: 14px;
  }
  .content {
    border: 1px solid #cac3c6;
    margin: 0 auto;
    padding: 20px;
    width: 260px;
  }
  h1 {
    color: #6d9fac;
    font-size: 22px;
    text-align: center;
  }

Challenges 2 - ID Selector

Select the slogan only by its ID attribute, then center the text and make it italic. If you don't remember the CSS properties, refer to Mozilla's CSS Reference.

#slogan {
text-align: center;
font-style: italic;
}

Challenges 3 - Compound Selector

Add a declaration that selects the <section> via both class attributes, removing the border when both are present

.content {
  border: 2px solid #ccc;
}

.content.home{
  border: 0px;
}

Challenges 4 - Style Specificity

Remove the non-external styles found on the HTML page so that !important is no longer needed to set the <header> background in style.css.

header {
  background: #e0e2e6;
}

Challenges 5 - Floats

Float the <aside> to the right and add 10px of margin to its left and bottom sides.

aside {
  float: right;
  width: 120px;
  margin-left: 10px;
  margin-bottom: 10px;
}

Challenges 6 - Columns

Now let's make the <article> a column with the same width as the <aside> column and float it left.

aside {
  float: right;
  width: 120px;
}

article{
  float: left;
  width: 120px;
}


Leverl 2 - Clear Carving

Clearing Floats

Common float-clearing methods:

Clear with a subsequent element
• Requires sequence to stay intact - breaks if things move
• Background / border do not extend

img {
  float: left;
}
.intro {
  clear: both;
}

Manual clearing
• Requires an empty element
• Might not be necessary later

.clear {
    clear: both;
 }

The clear x
• Originally developed by Tony Aslett
• Refined version by Nicholas Gallagher
• When used on the parent, the children will be self-cleared

.group:before, 
.group:after {
  content: "";
  display: table; }
.group:after {
  clear: both; }
.group {
  zoom: 1; /* IE6&7 */ }

Inheritance & Specificity

Nested elements automatically inherit parent styles

Selectors can be nested to override parent properties

Dealing with specificity

The priority of a selector (specificity):

inline styles?,of ID selectors,of class selectors,of element selectors
O,O,O,O

Why using IDs sparingly will decrease complexity

Challenges 1 - Clearfix

Rather than using <div class="clear"></div> to clear floats, refactor this page to use the clearfix method via .group.

...
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}
<ul class="group">...</ul>
<section class="group">...</section>

Challenges 2 - Nested Selectors

Use a nested selector to make paragraphs only within asides italic.

p {
  font-style: normal;
}

aside p {
  font-style: italic;
}

Challenges 3 - Inherited Styles

For anchor tags within aside paragraphs, override the inherited italics with a normal font-style.

p {
  font-style: normal;
}
aside p {
  font-style: italic;
}
aside p a {
  font-style: normal;
}

Challenges 4 - Specificity

Refactor the CSS declarations for .active a and .copyright so that the !important rule can be removed.

.main li a {
  color: #7ab2c1;
}
.main .active a {
  color: #826c55;
}
.primary p {
  font-size: 12px;
}
.primary .copyright {
  font-size: 10px;
}

Challenges 5 - Removing ID Selectors

Refactor #home scoped anchor tags to be scoped to the .home class instead, so that the .button declaration no longer needs reference to the home class or ID.

.home a {
  color: #c09e79;
}
article .button {
  color: #fff;
}



Level 3 - Box Bindings

The Box Model

An imaginary diagram that outlines each DOM element:

content area
padding area
border area
margin area

Total calculated box width =
content width + padding width + border width

When adapting a design, you'll need to calculate the content width

The overflow property:
overflow: visible / auto / hidden / scroll
overflow-x overflow-y

  • visible - the default value, which allows content to extend beyond container boundaries
  • auto - adds a scrollbar as needed when content over ows
  • hidden - hides content that extends beyond the container
  • scroll - adds a scrollbar at all times, even if unneeded

Positioning

Elements have a position value of static by default:
position: static / relative / absolute / fixed

  • Using a value other than static causes an object to become a positioned element
  • Positioned elements may use the top, left, bottom, and right properties for placement

Relative positioning:

  • Renders in the normal flow, then shifted via positioning properties

Use HTML5 Boilerplate

Absolute positioning:

  • Takes an element out of the normal ow for manual positioning

Fixed positioning:

  • A xes an element to a speci c place in the window, where it will stay regardless of scrolling

Z-Index

Manually adjusting overlap:

  • No z-index or equal z-index = overlap determined by placement in DOM
  • Higher values appear above lower values
  • Elements must be positioned for z-index to take effect. Use relative if you're not interested in moving the object

More about how floats, positioning and z-index stacks

Challenges 1 - Box Model

The <figure> in our page footer should have a total box width of 120px. Add an appropriate content width given its base padding and border.

footer figure {
  background: #e0e2e6;
  border: 1px solid #c5c9cf;
  padding: 15px;
  width: 88px
}

Challenges 2 - Box Model Overflow

Add an appropriate content height to give the <figure> a height of 120px, hide any overflow on the x-axis, and add a scroll bar on the y-axis if necessary. Hint: Use overflow-x and overflow-y to target the different axes.

footer figure {
  background: #e0e2e6;
  border: 1px solid #c5c9cf;
  padding: 15px;
  width: 88px;
  height: 88px;
  overflow-x: hidden;
  overflow-y: auto;
}

Challenges 3 - Relative Positioning

Anchors with a .button class are floated to the right of our <h3>, but we'd like them to be centered vertically. Use relative positioning to move the button down 3px.

.button {
  float: right;
  position: relative;
  top: 3px;
}

Challenges 4 - Scoping Position

We've attempted to position the newsletter paragraph to stick to the bottom of the footer, but it's sticking to the window instead. Add the necessary positioning to <footer> to scope it.

.newsletter {
  position: absolute;
  bottom: 0;
  width: 100%;
}

footer{
    position: relative;
}

Challenges 5 - Absolute Positioning

Use absolute positioning to place the <figure> in the upper right corner of the footer. Set a z-index on .newsletter to keep it above <figure> after it's positioned.

footer figure {
  position: absolute;
  top: 0;
  right: 0;
}
.copyright {
  width: 120px;
}
.newsletter {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

Level 4 - Grooming Your Code

Staying Dry

D - Don’t
R - Repeat
Y - Yourself

Selected CSS property shorthands
font: italic bold 16px/18px sans-serif; 
/* style weight size/line-height family */

background: #000 url(image.jpg) no-repeat center top; 
/* color image repeat x-pos y-pos */

list-style: disc inside none; 
/* style position image */

margin or padding: 0 10px 0 10px / 0 10px 0 / 0 10px; 
/* top right bottom left / top right&left bottom / top&bottom right&left */

border: 3px solid #ccc; 
/* width style color */

Display Types

display: none / block / inline / inline-block

Block elements

  • Stretch the full width of their container
  • Behave as though there is a line break before and after the element
  • Full box model can be manipulated
Tags that are block-level by default: 
<div>, <p>, <ul>, <ol>, <li> and <h1> through<h6>.

Inline elements

  • Typically found within block-level elements
  • Only take up the space of the content inside
  • Do not generate a line break before and after the content

Tags that are inline by default include:
<span>, <a>, <em>, <img>,and <strong>.

Inline-block
Same flow as an inline element but behave as a block element

Centering

Centering a block-level element:

  • Define a width, and the element width must be less than that of the parent container

margin: 0 auto;

Centering inline and inline-block elements:

text-align:center

Chanlenges 1 - DRY

Refactor any repeated declarations and apply them to a single parent container

body {
    color: #444;
}

Chanlenges 2 - Selector Combination

Combine selectors that share the same properties into a comma-delimited list

header, article {
  margin: 0 0 20px 0;
}

Chanlenges 3 - Selector Combination II

Combine selectors that share the same properties into a comma-delimited list, then override the comma-delimited definition with individual definitions.

header, article {
  padding: 20px;
}
hader {
  background: #ccc;
  font-size: 16px;
}
article {
  font-size: 14px;
  margin-bottom: 20px;
}

Chalenges 4 - Shorthand

Refactor the paragraph properties to use shorthand syntax.

p {
  margin: 0 0 10px 0;
  font: 14px/16px tahoma, arial, sans-serif;
}

Chalenges 5 - Inline

Use display: inline to make the nav list items display horizontal with right and left margins of 5px. Be sure to use the shorthand syntax for margin.

nav li {
  display: inline;
  margin: 0 5px;
}

Challenges 6 - Horizontal Centering

Give the unordered list in <nav> a width of 250px and center it horizontally within its parent container. Use shorthand syntax where appropriate.

nav li {
  display: inline;
  margin: 0 5px;
}
nav ul {
  width: 250px;
  margin: 0 auto;
}

Level 5 - CSS Safety

Protecting Your layout

Collapsing margins will not occur when one or more block element has:

  • Padding or border
  • Relative or absolute positioning
  • A float left or right

More Collapsing margins info

Specificity Problems

Resets & normalization:

Eric Meyer's Reset CSS

Normalize.css

Level 6 - Image Issues

Image Use