HTML&CSSCSS

CSS skills 1

  1. Web site folder directory design

    • index.html

    • src > style.css

    • src > script.js

    • src > assets > video >videos && src > assets > images > svgs


  2. Resource Site

    Videos and pictures: https://www.pexels.com/

    svg icon: https://remixicon.com/ https://fontawesome.com/ https://svgsilh.com/ icon download and use


  3. Web Design Ideas

    A layered approach can be adopted: the hidden menu is placed on the bottom layer, the background image/video is placed on the upper layer, the filter is placed on the upper layer, and finally the real HTML body is placed on the top layer. Note here that layering only needs to be implemented with z-index, there is no need to have html layers, and there is no need to put pictures/videos in css and use bg to do it.

    Uncover the hidden layer: The upper element of z-index (the entire upper page) can be positioned absolutely, and the edge to be opened after setting, such as right:0;. In this way, you can set right:Npx when you want to open it later.

    Fixed-height web pages: For single-page web pages that do not scroll, the height should be set to min-height: 100vh. vh is the viewing height.


  4. Code abbreviation and naming

    Create a label with a class name: section.showcase will create <section class='showcase'></section>.

    The first line at the top of the website can be called header or nav. Each slightly larger element inside can be given a class name.

    Multi-line label generation: (li>a>img)*3. This abbreviated structure can be used to jump to the input of the structure with the tab key.

    Random paragraphs: Lorem * n Multiply as many paragraphs as you want.


  5. video

    Video settings: mute mute; autoplay autoplay; loop playback loop.

    Video as background:

    1
    2
    3
    4
    5
    6
    7
    8
    position: absolute; //It must be absolute, because the background occupies the entire webpage.
    top:0;
    left:0; //fix absolute position
    width: 100%;
    height:100%; //Video resolution may be different from web page, that is, there are upper and lower black borders
    object-fit:cover; //Solutions with different resolutions. You can remove black borders and change the background video according to the width and height of the webpage.
    opacity:0.8; //Make the video transparent, and the upper text can be displayed.
    z-index:0; //The video is at the bottom. It is not necessary to write this setting.

    Filter: You can directly give the video a div of the same level as html, class=’overlay’. Then overlay on top of the video.

    1
    2
    3
    4
    5
    6
    7
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%; //The previous setting is consistent with the video
    background-color:var(--overlay-color) //Theme color, it is best to set it in a variable form. But the default is opaque.
    mix-blend-mode:overlay; //The theme color, video, and background color of the text layer will be superimposed.
    1
    background-color: rgba(255,255,255,0.5) //Another way of processing filter color. It is not suitable for dealing with the theme color, and the color will be blurred.

  1. button

    Generally, buttons are not made with button, but with a tag. The a tag is also transparent (that is, blocks can be placed in the inline), so you can set a div inside the a tag. If there is no specific link button, href=’#’, click to refresh the current page.


    Using the a tag as a button needs to ensure that the text cannot be reduced too small, nor can it wrap. So set it to display:inline-block;. The characteristic of the inline part here is that multiple a will flow to the next line when the window is reduced; and the characteristic of the block part is that the text inside a will not become smaller or wrap due to extrusion. That is, it looks like inline on the outside, but it is a block inside. Note that if the img icon is set inside the a tag, it also needs to be set as an inline-block element.


    The underline also needs to be removed when the a tag is used as a button: text-decoration: none;.

    Space between each letter in the text: letter-spacing: 2px;.

    The button should appear larger: padding: 10px 30px;.

    Changes on mouseover: cursor: pointer.


  2. text group

    Generally, a website will have text groups with different font styles stacked together. In practice, you can use a div.text to wrap these text groups, and then subdivide them with tags such as h2, h3, and p. The advantage of this is that div.text can be used as a whole element and laid out together with the header/nav and footer of the website.


    Case problem: It should be changed in css with text-transform: uppercase; instead of uppercase directly in html, because it may be fixed in the future.

    The text in the p paragraph may need to be limited, that is, it can be reduced but not too long. max-width:Npx;


  3. svg with switchable icons

    svg image When using it, download it first, and then use the img tag directly in html.

    Switchable icons such as menu and close are usually not added in html. That is, the fixed icon is written into html, and the variable icon is written into css. When writing, use background: url(). The switching function can use .active, just write the link and configuration item of another icon.


    At this time, because the icon becomes the background, it will repeat and not be centered. So use:

    1
    2
    3
    background-repeat: no-repeat; //no repeat
    background-size: 30px; //svg The size of the vector image can be changed at will, and the size of the downloaded vector image varies greatly.
    background-position: center; //center

    The svg icon has a special black and white discoloration, use filter:invert(1); to invert the color of black and white.


  4. Temporarily hide an element

    display: none in css. Or comment out the html code directly.


  5. Change css font

    In the google fonts site, search for Poppins in the upper right corner. You can select all fonts and load them all in Poppins. After that, directly import Poppins’ link: @import .... This just imports css, but it doesn’t work yet.


    You should * {box-sizing: border-box;} before changing the font. This is because if width:100px, border:3px, the overall length is 106px. After setting box-sizing, the overall length is still 100px, that is, the border will not exceed the width.

    1
    2
    3
    4
    5
    * {box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family:'Poppins', sans-serif; //Find fonts from left to right. There may be no network in front of it, so it can't be used.
    }

    The reason why it is not written in the body here is that the elements in the body are inherited, while * directly selects all elements. If the margin of a certain layer under the body is changed, then its lower layer will inherit the new margin, resulting in uncertainty.


    Change the font in a sub-element: font-size attributes generally use rem units, such as 5rem; but line-height should not use rem, but em, such as 1em. Because rem runs according to the default font size of the browser, and after changing font-size in a sub-element (such as responsive), the em below it will go according to the size of font-size. If it is set to rem, it will cause a height limit error.

    1
    2
    3
    font-size: 5rem;
    font-weight: 800;
    line-height: 1em;

    One way to do this is to set :root{font-size:62.5%;}. In this way, the default 16px is changed to 10px, 1rem=10px, which is convenient for calculation. For example, the width of 80px can be directly written as 8rem. At the same time, you can directly change the font-size when you need to change the size. This approach is standard in large projects.


Share