CSS basics review day two

This is the 27th day of my participation in Gwen Challenge

CSS properties

inheritance

CSS inheritance: Elements can inherit text properties from ancestors, but cannot inherit box properties. Ancestors set text properties and subsequent elements inherit these text properties.

Text attributes:color.fontSeries,line series, text series and other box properties (not inherited) :width.height.backgroundSeries,border, float, etcCopy the code

CSS is a good property to set some text properties to ancestors, his descendants will inherit these text properties, simplify the code.

body {
	color: # 333;
	font-family: "Arial"."Microsoft Yahei"."SimSun";
	font-size: 14px;
}
Copy the code

Cascade reflects: inheritance

div {
	width: 300px;
	height: 300px;
	background-color: lightblue;
}
Copy the code

CSS cascade sex

How will the same element appear if it is selected by different selectors and set to the same style?

Cascade: The same element is selected by different selectors, set the same style, heavy weight will cascade the low weight.

divClass ="box" id="box"> box </div>
/* The same element is selected by different selectors div. box #box and set text color, how will render */
div {
	font-size: 50px;
	color: red;
}
#box {
	color: blue;
}
.box {
	color: green;
}
Copy the code

Weight: The more specific the element selector, the greater the weight.

Id selector Class selector label selector

Id = 255 class 1

Class 1 = 255 tags

① Select the element and calculate its weight.

Select the element, calculate the weight, just look at the number of ids, the number of classes, the number of tags. First, the number of ID selectors is compared, and the weight of a large number of ids is the largest. If the number of ids is the same, compare the number of classes, the weight of the number of classes is larger; If the number of classes is the same, the number of labels is compared. If the number of tags is the same, look directly at the writing order, whose style will be displayed last.

.box1 .box2 #box3 p {
	color: blue;
	/ * (1, 2, 1) * /
}
/* The number of selectors is the same, and the following styles overlap the preceding */
#box1 .box2 .box3 p {
	color: green;
	/ * (1, 2, 1) * /
}
Copy the code

② The element is not selected, the weight of the element is 0

body {
	font-size: 50px;
	color: red;
}
#box1 {
	color: blue;
}
.box3 {
	color: green;
}
Copy the code

If the distance is the same, look at the selector weight (compare the selector ID, class, tag selector number in order)

.box1 .box2 {
	color: blue;
	/* (0,2,0) */
}
#box1 .box2 {
	color: green;
	/* (1,1,0) */
}
Copy the code

If the distance is the same and the number of selectors is the same, look at the CSS writing order

.box1 #box2 {
	color: orange;
}
/* Same number, see CSS order */
#box1 .box2 {
	color: green;
	/* (1,1,0) */
}
Copy the code

important

Grammar:

Add a space after the attribute value! The important semicolon ends

Effect: Increases the maximum weight of a single attribute of a selected element. Instead of increasing the weight of the entire selector

Important does not affect the proximity rule.

/* The element is not selected */
body {
	font-size: 50px;
	color: red ! important;
}
.box {
	color: green;
}
Copy the code

Writing style

color

Text color:

Attribute values: Three color value representations can be used

color: #B30000; // Hexadecimal notationcolor: rgb(255.0.0); //rgb()
color: red; // Word representationCopy the code

font-style

Sets whether the text is slanted

Default value: normal

Oblique: Oblique

Slant: italic(use, replace English with slant font)

.ob {
	font-style: oblique;
}
.it {
	font-style: italic;
}
Copy the code

font-weight

Sets whether the text is bold

Default value: Normal 500

Bold: BOLD 700

Attribute values: 100-900 (no units)

.f700 {
	font-weight: 700;
}
Copy the code

font-size

The size is px

Read designer annotations at work

Now you have to measure it manually.

Rough measurement: Measure text height directly.

The browser has a minimum font size, which is displayed by default. (Chrome minimum size 12px)

line-height

Line height: The actual height of a line of text.

Features: Text line height inside vertical center.

The unit is the px;

line-height: 200px;
Copy the code

Single-line text vertically centered: The height of the box is the same as the height of the line.

div.box1 {
	width: 300px;
	height: 100px;
        4font-size: 30px;
	line-height: 100px;
	background-color: pink;
}
Copy the code

Percentage means: %(indicates and font ratio)

.box2 {
	width: 400px;
	height: 100px;
	border: 1px solid # 000;
	font-size: 20px;
	/*line-height: 100px; * /
	/*line-height = 100px*/
	line-height: 500%;
}
Copy the code

font-family

Font. Generally we use font, use computer default font, special font, calculation does not have, so can not normally render.

English font: Arial

Chinese: Microsoft Yahei, backup font SimSun;

/* Write the English font first, then write the Chinese font */
font-family: "Arial"."Microsoft Yahei"."SimSun";
Copy the code

Font: is a compound property that can be written as a compound. Each attribute is separated by a space.

The property value can be omitted to indicate the default value, at least in font size.

font: Slanted or not bold font/line height;font: italic bold 30px/100px "Arial"."Microsoft Yahei";
Copy the code

Text control properties:

text-indent

Sets the indentation of the first line of text.

The unit is EM. 2em indicates that the first line is indented 2 Chinese characters

text-indent: 2em;
Copy the code

Unit: percentage (relative to parent box width)

ext-indent: 20%;
Copy the code

Unit: px

text-indent: 100px;
Copy the code

text-align

Set the text level left and right center.

Attribute values:

Default: left(left)

Keep to the right

Center (center)

text-align: center;
Copy the code

Img: Insert image (text)

text-align: center; Center text (single line, multiple lines)

text-decoration

Whether text is underlined

Default values (except for the A tag) :

No underline: None

Underline: underline

text-decoration: none;
text-decoration: underline;
Copy the code

The box model

An overview of the

width: box width height: box height Border: border padding: inside margin margin: outside marginCopy the code

Content area:

The content width =widthHigh content =height
Copy the code

Actual occupied area:

Actual possession width =width + padding * 2 + border * 2Actual possession height =height + padding * 2 + border * 2
Copy the code

Calculation:

The actual width =500 + 50 * 2 + 10 * 2 = 620pxThe actual height =300 + 50 * 2 + 10 * 2 = 420px
Copy the code

Usually given is the box occupying width and height, we need to calculate the content width and height of the box.

Box content widthwidth= actual box width -Padding * 2 - border * 2Box heightheight= actual height of the box -Padding * 2 - border * 2
Copy the code

The width of the box is 500px, the height of the box is 300px, the margins are 50px, and the borders are 20px. Calculate the width and height of the box

width = 500 - 50 * 2 - 20 * 2 = 360px
height = 300- 50* 2 - 20 *2 = 160px
Copy the code

Background (background color and background image) Render area: inside the border (padding area can render background)

background-image: url(images/star.gif);
Copy the code

padding

Inside margin: The distance between the content and the inside border.

paddingPadding-left padding-right padding-top padding-bottom: padding-left padding-right padding-top padding-bottomCopy the code

Can be written compound writing method: four value method: top right, bottom left;

padding: 30px 40px 50px 60px;
Copy the code

Three value method: up right (left) down;

padding: 30px 50px 60px;
Copy the code

Binary method: up (down) right (left);

padding: 30px 50px;
Copy the code

Single value method: four directions are the same;

padding: 30px;
Copy the code

In general, we are used to write the single-value method first, and use a single attribute to cascade off in special directions.

padding: 30px;
padding-left: 100px;
Copy the code

margin

Margin: The distance between boxes

It’s the same as padding

Margin is also a compound property that can be split in direction

margin-left
margin-right
margin-top
margin-bottom
Copy the code

Can be written in compound form:

Four value method: upper right lower left; (Three value method, two value method, single value method)

margin: 20px 30px 40px 50px;
Copy the code