Learn css basics in two days (1) and css basics in two days

Learn css basics in two days (1) and css basics in two days

 

What is css? What is the role of css?

CSS refers to the stacked style sheet (CAscadingSTyleSHeets) is mainly used to add styles to the HTML structure and build the page structure, such as setting the width and height of elements, colors, and positions.

Before learning css, let's take a look at the position where css code is written in HTML.

Style name	Storage location	Scope of use	Application
Nested Style	Under title in head	Page of the current style	Store the styles used on the current page
Intra-row style	Set the style in the label using the style	Applies only to the current tag	Rarely used (can be used temporarily)
External Style	Stored in other text and referenced by link label	All pages can be referenced	Store some public styles that will be used on all pages

Css code can be written in three forms:

1. First, use the style label. It is usually placed in the head tag of HTML.

<Style>

Div {width: 100px; height: 100px; border: 10px solid red; margin: 0 auto ;}

</Style>

2. Second, nested in the line of HTML code. For example, <div style = "color: red; font-size: 20px"> </div>. This form is currently not commonly used, and we advocate the separation of structure and style.

3. The third type is written in the. css file and introduced by adding link labels to HTML.

<Link rel = "stylesheet" href = "css/index.css">

You can try all the exercises. Most of the actual projects use the third method.

In my opinion, there are actually five parts of the basic css content.

Part 1: Box Model

As the name suggests, the box model can be imagined as a paper box or wooden box in our life.

It has three attributes: margin, padding, and border.

Margin refers to the margin of the box; padding refers to the distance between the Inside side of the large box and the content of the box; border refers to the border of the box. If you do not understand it, you can see:

 

Block-level elements can be regarded as a box.

Now that we have mentioned block-level elements, let's take a look at the three types of HTML elements. Modifying attributes is controlled by the display attribute in css.

Display: block;: block-level element. You can set the width and height of an exclusive row in the browser. Represents elements such as

Display: Inline-block;: block-level element in the row. You can set the width and height. Multiple elements can exist in one row at the same time. Elements: , <input>.

Display: Inline;: line element. width and height cannot be set. The size is determined by the content. Elements <a>, <B>, and <span>

However, the three types can be set through the display attribute. The preceding example only shows the default display attribute of the element.

 

In fact, a webpage consists of boxes of different sizes. By studying the box model, we can lay the foundation for building the Page Structure later.

Part 2: Basic Selector

What is a selector? Why Learning selector?

Personally, to modify the HTML Tag structure, you must first find the tag to be modified. The selector is used to help us select the HTML tag for style modification.

There are seven basic selectors commonly used in Css,

Tag Selector

1. The name of the tag selector is the selector name.

The statement is as follows:

Tag name {

Attribute 1: attribute value 1;

Attribute 2: attribute value 2;

Attribute 3: attribute value 3;

........

}

Purpose: add the same css attribute to all such labels.

2,Class Selector

The class name is defined by the class attribute of the label.

The statement is as follows. A vertex must be added before the class name.

.Class Name {

Attribute 1: attribute value 1;

Attribute 2: attribute value 2;

Attribute 3: attribute value 3;

........

}

Purpose: select all elements with the class name on the page.

3,Id Selector

The id name is defined by the id attribute of the tag.

The statement is as follows. A well id must be added before the id.

# Id {

Attribute 1: attribute value 1;

Attribute 2: attribute value 2;

Attribute 3: attribute value 3;

...........

}

Purpose: The element id value is unique and can only correspond to a specific element in the document.

Add the css style to the unique element with this id name.

Supplement:

1. Difference between id selector and class selector

A. the id selector is equivalent to a person's id card.

One id name can only be set to one element and only one id can be set for each element.

B. The class selector is equivalent to a person's name, and has a duplicate name.

Multiple elements can be set to the same class. One element can have multiple different class names.

2. Naming rules for id selector and class selector

2.1. The naming rules can only be: 0-9, a-z, A-Z ,_,-,

2.2 cannot begin with a number

4,Union Selector

Purpose: select all the two types of elements.

Multiple selectors are separated by commas. Code:

Selector 1, selector 2 {

Attribute name 1: attribute value 1;

Attribute name 2: attribute value 2;

.......

}

5,Intersection Selector

Purpose: select the same part from the two sets:

The Code is as follows:

Selector 1 selector 2 {
Attribute name 1: attribute value 1;

Attribute name 2: attribute value 2;

.......

}

6,Descendant Selector

Purpose: select the tags that meet the conditions in all future tags of a tag.

Code:

Selector (Space) selector {

Attribute name 1: attribute value 1;

Attribute name 2: attribute value 2;

.......

}

7,Child Selector

Purpose: Obtain the direct child element in the current tag (directly placed under the tag without any tag nesting)

Multiple selectors are connected with right angle brackets. Code:

Selector> selector {

Attribute name 1: attribute value 1;

Attribute name 2: attribute value 2;

.......
}

 

8Wildcard

*

Role: Used to act on all labels on the page.

Code:

<Style>

*{

Attribute name 1: attribute value 1;

Attribute name 2: attribute value 2;

.......

}

</Style>

Note: When you select a wildcard, all the tags on the page are traversed and their attributes are set.

 

More css3 selectors will be added later.

After learning about the selector concept, we can use the selector to set styles for HTML elements.

Different selectors have different application scenarios and can only be learned in practice.

Selector weight

After learning the selector, I have to talk about it.Weight.

The priorities of different selectors are different. If you set different values for the same attribute, the style set for the selector with a higher priority will cascade the style set for the lower priority. This is one of the features of css: cascade.

Css also has a feature called inheritance. That is to say, css attributes are set for a parent element, and its child elements are not set. By default, the attributes of the parent element are inherited.

Priority:

! Important> intra-row style> id selector> class selector> tag selector> wildcard> browser default style> inherit

! ImportantIt has the highest priority and is generally used for code debugging. When used, it is directly written after the attribute value to be applied. But please note :! The important attribute cannot be inherited.

Div {

Color: red! Important;

}

Intra-row styleSecond, it has been mentioned at the position where css code is written, that is, css is directly written into HTML tags in the form of attributes.

The Id selector, class selector, label selector, and wildcard are inherited.

There is also a browser default style. Different tag browsers will give a default style. For example, tag a has an underline by default and the color is blue.

• Calculate the weight of a combo Selector
• (0, 0, 0)
• (Improtant, id selector, class selector, label selector)

(0, 0, 0) = "the first 0 corresponds to the number of important, the second 0 corresponds to the number of id selectors, and the third 0 corresponds to the number of class selectors, the fourth 0 corresponds to the number of tag selectors, that is, the weight of the current selector.

• Rules
• 1. Check whether selected items are selected. if selected, the weights are calculated based on the number of IDS, classes, and labels. Who is listening. If they are all the same, the content written after the listener prevails.
• 2. If not selected, the weight is 0. If everyone is 0, the proximity principle is adopted.

 

Note the working principle of the selector: when searching for elements, the selector does not look from left to right, but from right to left.

 

OK. Here, the css selector is finished. after learning the selector, we can modify the style of the element. How can we modify it? See the frequently used style modifier section below.

Part 3 common style Modification

Common style settings:

1. Size: width and height

For an element, we can set its size through its width, height, and width. Note that the unit of the attribute value is pixel px, which can also be expressed as a percentage.

As follows: div {

Width: 200px;

Height: 100px;

}

Div {

Width: 80%;

Height: 100%;

}

 

2,Background:

Background attributes:

"> Background-image: sets the background image. Format: background-image: url (image path); // by default, the slice is tiled if it is smaller than the container.

Background-repeat: Set whether the background is tiled:

Valid value:

No-repeat: not tiled

Repeat-x: tiled horizontally

Repeat-y: tiled vertically

Repeat: tiled

Background-position: Set the position of the background image.

Usage:

Background-postion: x y;

Note: x and y can be specific values.

X and y can be some English words.

X: left center right

Y: top center under bottom

Connection Mode of background:

Background: background-color background-image background-repeat background-position;

3,Font:

Font style attributes:

Font-size: 18px; font size

Font-weight: an integer of bold or normal or-; font width

Font-family: ""; font type

Font-style: normal or italic; font style

Font connection mode

Font-size and font-family must be written

Font: Font-style font-weight font-size font-family;

 

4,Text

Text-align:Used to set the text alignment

There are three methods

Left: left-aligned content.

Center: Align content in the center.

Right: right-aligned content.

Text-indent:Used for text indent. The property value can be directly expressed in pixels.

Text-decoration:Used to modify the text none | underline | overline | line-through

None:

No text Decoration

Underline:

The decoration of the specified text is an underscore.

Overline:

The decoration of the specified text is underlined.

Line-through:

The decoration of the specified text is a hyphen

Line-height: Defines the Row Height.

5,Color:

There are three color formats,

1. Color keyword representation, which can be defined by English words, such as red, blue, and green.

The hexadecimal notation is expressed by the hexadecimal number in the #000000 to # ffffff range.

3. Three-Color Representation, rgb (r, g, B), where r, g, and B represent red, green, and blue, respectively. The value range is 0 to 255.

6,Border

Border has three attributes: width, style, and color. Common styles include solid line, dashed dotted line, dotted line, and double line contour.

Border: 1px solid red; this is a combination of border statements. You can also write data separately.

Border-width: 5px;

Border-style: dashed;

Border-corlor: # ccc;

In addition. The four edges can also be modified separately, such as border-top, border-bottom, border-left, and border-right.

Correspond to the top, bottom, left, and right sides.

7,Margin, padding

The style settings of margin and padding are basically the same. You can set the same value for the four sides, or set the four sides separately, such as margin-top and padding-left. The value can be pixel or percentage.

It is worth noting that margin can be a negative value, but padding cannot.

8,List style list-style

It is often used to clear the default list style list-style: none;

List-style-image: url (skin/ico.png); set the small icon before the list,

 

For other style settings, see the css tutorial of w3school.

The above is just the most basic style settings that I often use at work. It is definitely not comprehensive enough. Here it is only for entry-level students. For more information, see http://www.w3school.com.cn/css/index.asp

 

All rights reserved. If you need to reprint it, please indicate the source.