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

preface

Section 1: Basic HTML

Section 2: Basic CSS

Applied visual design combines typography, color theory, graphics, animation, page layout, etc., to express unique information.

text-align width height

The text-align property in the CSS controls the alignment of text

value describe
left Arrange the text to the left.
right Arrange the text to the right.
center Arrange the text in the middle.
justify Achieve the effect of text alignment at both ends. 
h4 {
    text-align: center;
    height: 25px;
}

p {
    text-align: justify;
}

.fullCard {
    width: 245px;
}
Copy the code

strong u em s

  • Font-size: 16px; font-size: 16px; font-size: 16px; font-weight:bold;

  • U Underline the text (confusing the text with the link? Avoid using), automatically add: text-decoration: underline;

  • Font: italic;

  • S Add a line to the text, automatically add: text-decoration: line-through;

  • Hr creates the horizontal line

<div class="cardText">
    <h4><s>Google</s>Alphabet</h4>
	<hr>
    <p>
        <em>Google was founded by Larry Page and Sergey Brin while they were 
        <u>Ph.D. students</u> at 
        <strong>Stanford University</strong>
        .</em>
    </p>
</div>
Copy the code

rgba

RGB values can range from 0 to 255.

Alpha, or transparency, can be between 0 and 1, where 0 is completely transparent and 1 is completely opaque.

h4 {
    text-align: center;
    background-color: rgba(45.45.45.0.1);
    padding: 10px;
    font-size: 27px;
}
Copy the code

box-shadow opactiy

The box-shadow property in the CSS is used to add shadows to elements. You can add multiple shadows separated by commas:

  • offset-xHorizontal offset of the shadow
  • offset-yThe vertical offset of the shadow
  • blur-radiusFuzzy radius
  • spread-radiusShadow spread radius
  • color
  • Two radii are optional.

The opacity property is used to set the transparency of the element, and can be between 0 and 1.

#thumbnail {
    box-shadow: 0 10px 20px rgba(0.0.0.0.19), 
        		0 6px 6px rgba(0.0.0.0.23);
}

.links {
    text-align: left;
    color: black;
    opacity: 0.7;
}
Copy the code

text-transform

value The results of
lowercase “transform me”
uppercase “TRANSFORM ME”
capitalize “Transform Me”
initial Use default values
inherit Using the parent elementtext-transformValue.
none **Default:** does not change the text. 
h4 {
    text-transform: uppercase;
}
Copy the code

font

  • font-size
  • font-weightThe font size
  • line-heightRow height (row spacing)
p {
    font-size: 16px;
    font-weight: 200;
    line-height: 25px;
}
Copy the code

:hover

Pseudo-classes are keywords that can be added to a selector to select elements in a particular state.

You can use the :hover pseudoclass selector to select the hover state of a hyperlink.

<style>
    a {
        color: # 000;
    }

    a:hover {
        color: blue;
    }
</style>

<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
Copy the code

position

In CSS, all HTML elements are boxes, also known as box models.

Block-level elements automatically start on a new line (such as title, p, and div), and the inline (inline) elements come after the previous one (such as IMG and SPAN).

Elements are laid out this way by default as a normal stream of documents, and CSS provides the Position property to override it.

The attributes of the offset in each direction are left, right, top, and bottom, representing the direction away from the original position.

value describe
absolute Generates an absolutely positioned element relative to the first parent element other than the static positioned element.

The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.
fixed Generates fixed positioned elements that are positioned relative to the browser window.

The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.
relative Generates a relatively positioned element that is positioned relative to its normal position.

Therefore, “left:20” adds 20 pixels to the left position of the element.
static The default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations).
sticky Sticky positioning, based on where the user scrolls. It behaves like position:relative;

When the page scrolls beyond the target area, it behaves like Position: Fixed; It will be fixed in the target position.

relative

When the positioning of an element is set to relative, this allows you to specify the relative offset of the element from the current document flow page using CSS.

This does not change the position of the element in the layout, nor does it affect the position of other elements.

h2 {
    position: relative;
    bottom: 10px;
    left: 15px;
}
Copy the code

absolute

Absolute positioning removes the element from the current document stream and is ignored by surrounding elements.

The element is positioned with reference to the nearest ancestor element. If its parent element does not add a positioning rule (default position: relative;) The browser continues to look for the default body tag.

<style>
    #searchbar {
        position: absolute;
        top: 50px;
        right: 50px;
    }
    section {
        position: relative;
    }
</style>
<body>
    <section>
        <form id="searchbar">
            <label for="search">Search:</label>
            <input type="search" id="search" name="search">
            <input type="submit" name="submit" value="Go!">
        </form>
    </section>
</body>
Copy the code

fixed

Fixed positioning is a special absolute positioning that positions elements relative to the browser window.

Like Absoulte, it works with the CSS offset property and also removes elements from the current document stream. Other elements will ignore it and may need to adjust the layout of other locations.

The biggest difference: Fixed positioned elements do not move as the screen scrolls.

#navbar {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    background-color: # 767676;
}
Copy the code

float

Set the float property of the element, which is not in the document flow and floats left or right until its outer edge touches the border containing the box or another float box.

The width attribute is usually used to specify the horizontal space occupied by the floating element.

#left {
    float: left;
    width: 50%;
}
#right {
    float: right;
    width: 40%;
}
Copy the code

z-index

You can use the Z-index attribute to specify the stacking order of elements.

The value of z-index is an integer, and the element with the highest value is superimposed on the element with the lowest value.

.first {
    background-color: red;
    position: absolute;
    z-index: 2;
}
.second {
    background-color: blue;
    position: absolute;
    left: 40px;
    top: 50px;
    z-index: 1;
}
Copy the code

center horizontally

You can use display: block; Change the inline element img to a block-level element and center the image horizontally.

<style>
    div {
        background-color: blue;
        height: 100px;
        width: 100px;
        margin: auto;
    }

    img {
        display: block;
        margin: auto;
    }
</style>

<div></div>
<img src="https://gitee.com/mancuojie/typo/raw/master/202109080155881.png" alt="🦔">
Copy the code

Color

Color model – Wikipedia

When two colors are exactly at opposite ends of the color ring, they complement each other. Two complementary colors turn gray when combined.

Once the primary color is selected, match it with the two colors adjacent to its complement color on the color ring. This kind of collocation has contrast, but also does not break harmonious.

hsl

Hue, Saturation, Lightness

The hue value is the Angle from 0 to 360 degrees corresponding to the color inside the color ring.

Saturation refers to the purity of the color, that is, the percentage of gray in the color. The higher the saturation, the less gray, the purer the color; On the other hand, it’s all grey. Saturation ranges from 0 to 100 as a percentage of gray.

Brightness determines how light or dark a color is, the proportion of white or black in the color. 100% brightness represents pure white, 0% brightness represents pure black, and 50% brightness represents the color selected from the hue.

HSL () makes it easier for CSS to change color tones. For example, adding white to a solid color with l produces a lighter hue; Adding black creates a deeper tone. Alternatively, you can change both the shade and light of a color by adding gray to a solid color with S.

The default background-color of all elements is transparent, and you can adjust the hue and shadow by changing saturation and brightness.

<style>
    header {
        background-color: hsl(180.90%.35%);
        color: #FFFFFF;
    }

    nav {
        background-color: hsl(180.80%.25%);
    }

    nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
    }

    nav li {
        display: inline;
        margin-right: 20px;
    }

</style>

<header>
    <h1>Cooking with FCC!</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Classes</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
Copy the code

linear-gradient

The first parameter specifies the direction of the color transition — its value is Angle.

90deg represents a vertical gradient (left to right) and 45deg represents a diagonal gradient (bottom left to top right).

The other parameters specify the order of the gradient colors.

div {
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg.#CCFFFF.#FFCCCC);
}
Copy the code

Repeating-linear-gradient () repeats the specified gradient.

There are many parameters, and this test only uses Angle values and color codes.

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
        90deg,
        yellow 0px,
        blue 40px,
        green 40px,
        red 80px
    );
}
Copy the code

background

The background attribute supports the use of the URL () function as the attribute value

We can link images with textures or styles.

<style>
    body {
        background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
    }
</style>
Copy the code

transform

When using pseudo-classes to select an element’s specified state (such as hover), we can easily add interactions to the element using the Transform attribute.

scale

Used to change the display scale of an element.

<style>
    div {
        width: 70%;
        height: 100px;
        margin: 50px auto;
        background: linear-gradient(
            53deg.#ccfffc.#ffcccf
        );
    }

    div:hover {
        transform: scale(1.1);
    }
</style>

<div></div>
Copy the code

skewX skewY

SkewX () : Flips the selected element along the X axis (horizontally) at the specified Angle.

SkewY () : Flips the element at a specified Angle along the Y-axis (vertical direction).

#top {
    background-color: red;
    transform: skewY(-10deg);
}

#bottom {
    background-color: blue;
    transform: skewX(24deg);
}
Copy the code

rotate

If you rotate an element, positive is clockwise and negative is counterclockwise.

.heart {
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
}
Copy the code

Create Graphics

Crescent Moon

Create a round, transparent shape with blurred shadows that decrease slightly to the sides.

As you can see, the shadow is a crescent moon.

<style>
    .center {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 25px 10px 0 0 blue;
    }

</style>
<div class="center"></div>
Copy the code

Heart

The pseudo-elements ::before and ::after can be added before or after the selected element.

Must be used with content, which is usually used to add content to an element such as a picture or text.

The Content property is still required, and its value can be an empty string when used to implement shapes.

<style>
    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
    }

    .heart::after {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }

    .heart::before {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }
</style>

<div class="heart"></div>
Copy the code

Animation

Animates elements: The animation property controls the appearance of the animation, and the @KeyFrames rule controls changes in the stages of the animation.

@KeyFrames sets the animation effect by applying CSS rules to specific frames of duration (from 0% to 100%).

Eight attribute values instructions
animation-name Used to set the name of the animation, i.e@keyframesThe name used in.
animation-duration The animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function How will the set animation complete a cycle
animation-delay Sets the delay interval before animation starts
animation-iteration-count Defines the number of times an animation is played
animation-direction Specifies whether the animation should take turns playing backwards
animation-fill-mode Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing)
animation-play-state Specifies whether the animation is running or paused 
<style>
    div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
        position: relative;
    }

    #rect {
        animation-name: rainbow;
        animation-duration: 4s;
    }

    @keyframes rainbow {
        0% {
            background-color: blue;
            top: 0;
            left: 0;
        }
        50% {
            background-color: green;
            top: 50px;
            left: 25px;
        }
        100% {
            background-color: yellow;
            top: 0;
            left: -25px; }}</style>

<div id="rect"></div>
Copy the code

fill-mode

value describe
none Do not change the default behavior.
forwards When the animation is complete, hold the last property value (defined in the last keyframe).
backwards During the period of time specified by animation-delay before the animation is displayed, the start property value (defined in the first keyframe) is applied.
both Both forward and backward fill modes are applied. 
<style>
    button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
    }

    button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
    }

    @keyframes background-color {
        100% {
            background-color: #4791d0; }}</style>

<button>Register</button>
Copy the code

iteration-count

nimation-iteration-count describe
n Defines the number of times an animation is played.
infinite Specifies that the animation should play an unlimited number of times. 
<style>
    .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }

    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }

    .heart:after {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }

    .heart:before {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }

    @keyframes backdiv {
        50% {
            background: #ffe6f2; }}@keyframes beat {
        0% {
            transform: scale(1) rotate(-45deg);
        }
        50% {
            transform: scale(0.6) rotate(-45deg); }}</style>
<div class="back"></div>
<div class="heart"></div>
Copy the code

timing-function

✿ cubic-bezier.com

Use a mathematical function called the Cubic Bezier function to generate the speed curve.

value describe
linear The speed of the animation is the same from beginning to end.
ease The default. The animation starts at a low speed, then speeds up and slows down before ending.
ease-in The animation starts at a low speed and ends at a high speed.
ease-out The animation starts at high speed and ends at low speed.
ease-in-out The animation starts and ends at low speed.
cubic-bezier(n.n.n.n) Its own value in the cubic- Bezier function. Possible values range from 0 to 1.

The cubic- Bezier function consists of four points on a 1 * 1 grid: P0, P1, P2, p3.

Where p0 and P3 are fixed values, representing the starting and ending points of the curve, and the coordinate values are (0, 0) and (1, 1) in sequence.

You simply set the x and y values of the other two points, which determine the shape of the curve and thus determine the speed curve of the animation.

In CSS, p1 and P2 are identified by (x1, y1, x2, y2).

In layman’s terms, place a line on an axis of range 1 and pull it from the points P1 and P2 (X is [0, 1], Y is arbitrary).

<style>
    .balls {
        border-radius: 50%;
        position: fixed;
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    #red {
        background: red;
        left: 25%;
        /*animation-timing-function: linear; * /
        animation-timing-function: cubic-bezier(0.25.0.25.0.75.0.75);
    }

    #blue {
        background: blue;
        left: 50%;
        animation-timing-function: ease-out;
    }

    #green {
        background: green;
        left: 75%;
        animation-timing-function: cubic-bezier(0.311.0.441.0.444.1.649);
    }

    @keyframes jump {
        50% {
            top: 10%; }}</style>

<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
Copy the code