01 Basic HTML&CSS 【FCC】

下面记载了首刷 FCC 过程中记录下来的对应笔记（按 FCC顺序有选择记录），截取部分网站原文整理而成，祝小伙伴们刷题愉快～

Import a Google Font.

Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name
When one font isn’t available, you can tell the browser to “degrade” to another font.
Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
Style:

Code:

<link href=https://fonts.googleapis.com/css?family=Lobster rel="stylesheet" type="text/css">

font-family: Lobster,monospace

#id

select and modify specific elements with JavaScript.
id attributes should be unique. Browsers won’t enforce this, but it is a widely agreed upon best practice.

An id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

Basic CSS: Create a Set of Rad#Import a Google Font.

Family names arecase-sensitive and need to be wrapped in quotes if there is a space in the name

Whenone font isn’t available, you can tell the browser to “degrade” to another font.

Genericfont family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
Style:

Code:

<link href=https://fonts.googleapis.com/css?family=Lobsterrel="stylesheet" type="text/css"]]>
ont-family:Lobster,monospace

Basic CSS: Create a Set of Radio Buttons

You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
Style:

Code:

<labelfor="indoor"><input  id="indoor"type="radio"name="indoor-outdoor"checked/>indoor</label]]>
 <labelfor="outdoor"><inputid=  "indoor"type="radio"name="indoor-outdoor"/>outdoor</label]]>

Basic CSS: Use Attribute Selectors to Style Elements

This is a stub. Help our community expand it.This quick style guide will help ensure your pull request gets accepted.
注意：⚠️不可以乱加空格 ！！！

[type='checkbox']{margin:10px0px15px0px; }

Basic CSS: Understand Absolute versus Relative Units

In and mm refer to inches and millimeters, respectively. Absolutelength units approximate the actual measurement on a screen, but there are some differences depending on a screen’s resolution.

Basic CSS: Override All Other Styles by using Important

why you would ever want to override CSS ？

In many situations, you will use CSS libraries. These may accidentally override yourown CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important

Above code:

body {
    background-color:black;
    font-family:monospace;
    color:green;
  }//Every HTML pagehas a body element.
  #orange-text {
    color:orange;
  }
  .pink-text {
    color:pink !important;
  }
  .blue-text {
    color:blue;
  }

Basic CSS: Create a custom CSS Variable

This will change the background of whatever element you are targeting to gray, because that is the value of the --penguin-skinvariable.

Code:

--penguin-skin: gray;
background:var(--penguin-skin);

Basic CSS: Attach a Fallback value to a CSS Variable

This fallback is not used to increase browser compatibility , and it will not workon IE browsers. Rather, it is used so that the browser has a color to displayif it cannot find your variable.

Code:

ackground:var(--pengiun-skin,balck);

Basic CSS:Improve Compatibility with Browser Fallbacks

When your browser parses the CSS of a webpage, it ignores any properties that it doesn’trecognize or support. , it’s as easy as providing another more widelysupported value immediately before your declaration

Thatway an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.

Basic CSS: Cascading CSS variables

When youcreate a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading.
You can think of the :rootelement as a container for your entire HTML document, in thesame way that an htmlelement is a container for the body element.

Basic CSS: Change a variable for a specific area

When you create your variables in :root they will set the value of that variable for the whole page.You can then over-write these variables by setting them again within a specific element

Code:

.penguin{--penguin-belly:white;}  /* rewrite */

Basic CSS: Use a media query to change a variable

CSS Variables can simplify the way you use mediaqueries.
For instance, when your screen is smaller or larger than your media query break point, you canchange the value of a variable, and it will apply its style wherever it is used.

Code:

@media (max-width: 350px) { :root {}}