Web Learning Note _01

Introduction

In the past, I also continued to learn some web-based knowledge, including the front and back end are involved, I am also more interested in, thank you Peter Teacher, willing to provide free of charge from the beginning of the teaching, have seen some of Peter Teacher's video, rhythm is very suitable for me, Determined to follow Peter's systematic study again. Thanks peter!

1.CSS: Cascading Style Sheets

CSS, cascading style sheets, cascading means that the smaller the scope, the higher the priority, as if the style is stacked one layer at a level.

By building CSS to control the style of the Web page, and can make the content and style separation, so that more convenient to manage the style, previously seen an article, when the style is particularly complex, with object-oriented thinking to control the style, very effective.

To make the CSS work in the Web page, you need to add link to the head tag:

<link rel= "stylesheet" href= "Main.css" >

Main.css can represent the location of a file with a relative path (as shown above, in the same directory as the HTML file).

The contents of a CSS file can start with a tag, the contents of the curly braces are the style of the tag, or it can be a. class or #id that is used to control the style precisely:

body{
Background:orange;
}
h1{
Background:white;
Color:green;
Text-align:center;
}

The above content can be found that although the H1 tag is inside the body, the H1 style is based on H1, because the scope of the H1 is smaller and the content is more accurate.

2. Inline elements and block elements

There are two types of elements on an HTML page: block-level elements, inline elements (inline elements)

Block elements: Elements such as H1, which can have only one element in a row, and another row if there is a second block element;

Inline elements: elements that represent a format, such as I, can have multiple elements in the same row, and if a second element appears, and one row is not full, then the first element appears in the same row.

With browser developer tools such as Chrom: review elements, you can view the details of each element in the page, and you can view or change the style of the element in real time, very handy.

3. Box model for block elements

As shown, each block element is such a box model that occupies the web space. Each box model is composed of content, padding, border and margin, which can change the width, color and filling form of each filled part.

Sets the width and height of the block element, changing the height and width of the content.

4. Class and ID of the element

You can control the style of an element more precisely by setting the class and ID on the element.

Adding a class attribute to a tag allows the element to inherit all the formatting of a class, and the same class can appear on multiple elements.

Add an id attribute to a label, you can set the attribute to an element individually, and the same ID can be only one element.

Class and ID follow the cascading principle, and more accurate IDs tend to have higher precedence:

. welcome{
Color:blue;
Font-weight:bold;
}
#first_text {
Font-weight:normal;
}

As in the above style, if a p has both the class= "Welcome" attribute and the id= "First_text" attribute, then his style is blue and non-bold.

Web Learning Note _01