Certification notes based on open source projects responsive web design | freeCodeCamp.org

preface

Remind before view: good use Ctrl+F, notes not detailed, but for understanding, part of the difficult to understand the content I gave examples or links to the document, there are some small games I recommend to deepen the understanding of some attributes of the front end, I hope to point a small like 💕

style color

<style>
    h2 {
	color: red;
    }
</style>

<! -- or -->

<h2 style="color: red;">CatPhotoApp</h2>
Copy the code

class

An HTML element can have multiple classes

<style>
    .red-text {
        color: red;
        background-color: silver;
    }
</style>

<h2 class="red-text">CatPhotoApp</h2>
Copy the code

font

Browse Fonts – Google Fonts

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

<style>
    p {
        font-size: 16px;
        font-family: monospace;
        font-weight: 200;
    }
    
    h2 {
        font-family: Lobster, "Open Sans";
    }
</style>
Copy the code

size border

<style>
    .smaller-image {
        width: 100px;
    }
    
    .thick-green-border {
        border-color: green;
        border-width: 10px;
        border-style: solid;
        border-radius: 10px; 	/ * * / 50%
    }
</style>

<img class = "smaller-image thick-green-border"  
     src="https://bit.ly/fcc-relaxing-cat"  
     alt="A cute orange cat."
>
Copy the code

id

An HTML element can have only one ID

<style>
    #cat-photo-form {
        background-color: green;
    }
</style>

<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
	<button type="submit">Submit</button>
</form>
Copy the code

padding margin border

The rectangular space occupied by each HTML element is controlled by three important attributes: padding, margin, and border.

Padding controls how much space is left between the element content and the border.

Margin controls the border distance between an element’s border and other elements.

With margin set to negative, the element takes up more space.

.red-box {
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    
    /* Specifies */ clockwise
    padding: 20px 40px 20px 40px;
}

.blue-box {
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
    
    margin: 20px 40px 20px 40px;
}

Copy the code

attribute selectors

/* [attr=value] */

[type='radio'] {
    margin-top: 10px;
    margin-bottom: 15px;
}
Copy the code

em rem

Their actual values, relative to the unit length, depend on the values of the other lengths.

Em Font size relative to the text in the current object.

Rem is only relative to the HTML root element.

Introduction to the differences between PX, EM and REM (runoob.com)

.red-box {
    background-color: red;
    margin: 20px 40px 20px 40px;
    padding: 1.5 em;
}
Copy the code

body class id important

Styles can be inherited from the body

<style>
    body {
        background-color: black;
        color: green;
        font-family: monospace;
    }
</style>

<h1>Hello World</h1>
Copy the code

Class overrides the CSS style of the body.

The order in which classes are declared in the

The ID selector always takes precedence over the class selector.

Inline styles take precedence over ID selectors.

To ensure that your CSS style is not affected, you can use! Important.

<style>
    body {
        background-color: black;
        font-family: monospace;
        color: green;
    }

    .pink-text {
        color: pink ! important;
    }

    .blue-text {
        color: blue;
    }

    #orange-text {
        color: orange;
    }

</style>

<h1 class="pink-text blue-text" id="orange-text" style="color: white;">Hello World!</h1>
Copy the code

color hex

Hexadecimal encoding uses six hexadecimal characters to represent colors, in groups of two characters representing red (R), green (G), and blue (B).

It can be abbreviated to three numbers representing red (R), green (G), and blue (B).

#FF0000 and #F00 are exactly the same color.

<style>
    .red-text {
        color: #FF0000;
    }
    
    .green-text {
        color: #0F0;
    }
    
    .blue-text {
        color: rgb(0.0.255);
    }
    
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="green-text">I am green!</h1>

<h1 class="blue-text">I am blue!</h1>
Copy the code

var

Change multiple values at once through CSS variables

--penguin-skin: gray;

background: var(--penguin-skin);
Copy the code

The alternate value is not intended to enhance browser compatibility, nor does it apply to Internet Explorer. Instead, it’s used to make the browser display a color if it can’t find your variable.

background: var(--penguin-skin, black);
Copy the code

browser fallbacks

Provides browser degradation solutions to avoid browser compatibility issues.

For example, Internet Explorer ignores background colors because it does not support CSS variables.

Provide another, broader value before the declaration, older browsers will downgrade to use this scheme, and newer browsers will override the downgrade scheme in subsequent declarations.

<style>
    :root {
        --red-color: red;
    }
    .red-box {
        background: red;
        background: var(--red-color);
        height: 200px;
        width:200px;
    }
</style>

<div class="red-box"></div>
Copy the code

:root

CSS variables are inheritable, just like normal properties.

When a variable is created, it is available in the selector that created the variable. Also available in the descendant selectors of this selector.

:root is a pseudo-class selector. Variables created in :root are available globally, that is, in any selector.

If you create the same variable in the element, the value of the variable used for the entire page is rewritten.

:root {
    --penguin-belly: pink;
}

.penguin {
    --penguin-belly: white;
}
Copy the code

@media

CSS variables simplify the way media queries are defined.

When the screen is less than or greater than the value set by the media query, the element style that uses the variable changes whenever we update the value of the variable.

:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
}

@media (max-width: 350px) {
    :root {
        --penguin-size: 200px; --penguin-skin: black; }}Copy the code