[HTML + CSS] basic syntax and htmlcss syntax

[HTML + CSS] basic syntax and htmlcss syntax
HTML Basics

<Em> highlight tags and <strong> bold tags

<Q> short text reference, <blockquote> long text reference. These two labels will enclose the text with double quotation marks.

& Nbsp; space

<Br/> line feed,

<Address> address tag

<Code> single-line code, <pre> multi-line code, you can add code labels to make the display look better

<Ul> unordered list, <ol> ordered list: <li> list sub-elements

<Table> table label, caption title label, and summary attribute: used to describe the table, not displayed on the page.

<A> the connection tag and mailto attribute can be sent to the mailbox. If there are multiple parameters after mailto, the first parameter must start? And each of the following parameters is separated by &. For example:

<A href = "mailto: thrforever@126.com? Cc = xiaoming@imooc.com & bcc = xiaoyu@imooc.com & subject = subject & body = Email content "> send </a>

<Input> input box, type: plain text in text, password and password, radio/checkbox single-choice/Multi-choice box: checked = "checked" is selected by default.

<Textarea> text field, you can specify the number of columns cols and number of rows.

<Select> drop-down list. <option> is used for each item. multiple = "moltiple" can be set to support multiple drop-down lists.

<Input> type: sumbit is used to submit data, and reset is used to reset data.

<Lable for = "Control id"> you can click "lable" and "point to" control.

CSS Basics

Css comments:/* comments */

Style priority: inline> embedded> external (embedded and embedded): Who is behind the html file and who is working)

Selector:

(1). Tag selector: p {}

(2). class selector:. class {}

(3). ID selector: # id {}

(4). The sub-selector is valid only for the first level of the sub-user:. class> span {}

(5). Contains (descendant) selector. All sub-levels are valid:. class span {}

(6). General selector :*{}

(7). Pseudo-class selector: used to write moving, floating, and other styles: a: hover {}

(8). Group selector: a span {}

Some css styles are inherited. For example, after a style color is defined, its sub-elements also have this attribute, but border does not.

If the weight is high, the style is used: the label's weight is 1, the class selector's weight is 10, and the ID selector's weight is up to 100, the inherited weight is very low, smaller than 1.

When a style with the same weight exists, it is determined based on the sequence before and after these css styles. the css styles at the end are applied.

If you want to customize the maximum weight, you can use it after the style! Important to solve the problem. Note that important should be written before the semicolon, for example:

p{color:red!important;}p{color:green;}

The red color is used.

Set text font:

body{font-family:"Microsoft Yahei";}

Font-weight: bold; bold

Font-style: italic; italic

Text-decoration: underline; underline

Text-decoration: line-throught; strikethrough

Text: indent: 2em: blank space of 2 Characters

Line-height: 2em; the line height is 2 times the text height

Letter-spacing: 50px; specifies the letter spacing

Word-spacing: 50px; specifies the word spacing

Text-align: center the line elements in block elements, such as text and images.

In css, tag elements in html are generally divided into three different types: block elements, inline elements (also called intra-row elements), and inline block elements.

Common block elements:

<Div> <p>

Common inline elements:

<A> <span> <br> <I> <em> <strong> <label> <q> <var> <cite> <code>

Common inline block elements:

<input>

Display: block; make an element a block element

Display: inline; make the element an inline Element

Display: inline-block: enables an element to become an inline block element (with the characteristics of inline and block elements at the same time)

Features of block elements:

(1). Each block element starts from a new row, and the subsequent element also starts from another row.

(2). You can set the height, width, row height, and top and bottom margins of the element.

(3) If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.

Inline element features:

(1). and other elements are on one row.

(2). the height, width, Row Height, top, and bottom margins of the element cannot be set.

(3) the width of an element is the width of the text or image it contains and cannot be changed.

When there is a gap between inline elements, you can delete unnecessary spaces and line breaks in html to solve the problem.

Features of inline block elements:

(1). and other elements are on one row.

(2). You can set the height, width, row height, and top and bottom margins of the element.

Box Model:

Border: 2px solid red; 2px solid red border, split into border-width: 2px; border-style: solid; border-color: red;

Border-style (border style) Common: dashed (dotted line), dotted (DOT line), solid (solid line)

Border-width (border width) can be set to thin, medium, and thick. It is most commonly used to set pixels directly.

Border-bottom: 1px solid red: only set the style for the lower border

Padding: 20px 10px 15px 30px; and padding-top: 20px; padding-right: 10px; padding-bottom: 15px; padding-left: 30px, the order is top, right, bottom, left.

Padding: 10px 20px; up/down 10px, around 20px

Padding: 10px; top right bottom left all 10px

The usage of margin, border, and padding is the same.

(1). Include (descendant) Selector
(1). Include (descendant) Selector
Flow, floating model, and Layer Model css contain three basic layout models: Flow, Layer, and Float. There are three layout models on the webpage: Flow model) float and Layer ).

The default Layout mode is the flow layout model. features:

(1). Block elements are vertically distributed from top to bottom in order within the contained elements, because by default, block elements are 100% in width. In fact, block elements occupy positions in the form of rows.

(2) inline elements are displayed horizontally from left to right in the contained element.

Floating model:

Float: left; set the left float to display any element from left to right.

The layer model has three forms: absolute position: absolute, relative position: relative, and fixed position: fixed)

(1 ). absolute positioning: After position: absolute is set, use the left, right, top, and bottom attributes (similar to the spacing settings) to perform absolute positioning on the parent inclusion block with the positioning attribute closest to it, if such a block does not exist, it is relative to the body element.

(2) relative positioning: Set position: relative and use the left, right, top, and bottom attributes to determine the offset position of the element in the normal document stream. The relative positioning process generates an element (and the element floats like a layer) in the static (float) mode, and then moves relative to the previous position, the direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. the position before the offset remains unchanged (that is, the original space is still there ).

(3) fixed positioning: Set position: fixed; similar to absolute positioning, but it is relative to the browser view. When you drag the scroll bar, its position will not change.

To use position: absolute to locate an element, the following conditions must be met:

(1). the positioning element must be a predecessor element of the relative positioning element.

(2) The position: relative must be added to the element of the reference positioning;

(3) add position: absolute to the positioning element;

Css Abbreviation:

Body {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px; line-height: 1.5em; font-family: "", sans-serif ;}

Can be abbreviated:

Body {font: italic small-caps bold 12px/1.5em "", sans-serif ;}

You must specify at least the font-size and font-family attributes when using this shorthand. If other attributes are not specified, the default values are used, "/" must be added between font-size and line-height "/".

Generally, the following abbreviations are common because there are few Chinese websites in English:

Body {font: 12px/1.5em "", sans-serif ;}

Color value:

P {color: red ;}

P {color: rgb (200 );}

P {color: rgb (20%, 33%, 25% );}

P {color: # ff00ff ;}

Length value:

In the css specification, assume 90 pixels = 1 inch

If the font-size is 14px, 1em = 14px. The calculation standard is based on the font-size of the parent element.

Line-height: 130%; set the line height to 130% of the font size.

How to Set horizontal center of block elements

Width: 500px;

Margin: 20px auto;

Method for centering an element in a wide block:

(1) Add the table label and set margin: 0 auto;

(2) set the display: inline of the fast-level element, and use text-align: center in the parent container to center the element.

(3) set float for the parent element, and set position: relative; and left: 50%; Set position: relative and left:-50%; for the child element.

Set height: 100px, and line-height: 100px to align the text vertically.

Vertical center of multi-line text:

Method 1:

In css, a vertical-align attribute is used to center a value. However, this attribute takes effect only when the parent element is td or th. Therefore, you need to set a table label for the external element, set vertical-align: middle;

Method 2:

Set the display: table-cell; and vertical-align: middle of block-level elements;

Ginkgo changes the display type:

When one of the following two statements is set for an element (except for display: none:

(1). position: absolute;

(2). float: left; or float: right;

The element is automatically displayed in the display: inline-block mode. Of course, you can set the values of width and height, for example, you can specify the width and height for a after setting Element.

(1). Include (descendant) selector (1). Include (descendant) Selector