Relive the HTML frameset, CSS, selectors

Sub-frame (frameset)

The HTML framework is the technique of dividing windows into multiple windows where each window displays different Web content, which is also called a sub-frame in the background.

Frameset

Note that if you write frameset on the page, you can't have the body.

<frameset></frameset>

Common Properties:

Cols the unit can write pixels or write percentages after the above content can also write * (* represents the remaining)

Rows Branch units can write pixels or write percentages and can write in addition to the above content * (* represents all remaining)

Frameborder Frame Border 0/1

Border Border thickness

Frame to divide the window into several will have a corresponding number of frame tags appear

<frame/>

Common Properties:

Name to set the area a name to use as a jump

SRC Default Display page link

Noresize not allow border adjustment

Scrolling scroll bar

Yes scroll bar |no does not appear scroll bar

Introduction to CSS

Cascading style Sheets cascading style sheets (cascading style sheets)

is a text file that does not need to be compiled by the browser to execute directly

function is to define the appearance of Web pages such as fonts, backgrounds, etc...

Can be used with JavaScript to make brilliant effects

CSS Features

Precise positioning

Accurate control of any element of the page

Fine-grained control

Pixel-level adjustments are possible

Separation of styles from content

Easy to maintain, easy to reuse

How to use

Inline

The style attribute written in the tag is called inline

For example: <p style= "Color:yellow" > Ancestral psoriasis, tyranny of old Chinese medicine </p>

Embedded

The attribute in the style tag written in the head tag is called inline

For example:

<style>

p{color:red;}

</style>

Outreach

Used in an externally introduced way

For example: <link rel= "stylesheet" type= "Text/css" href= "./css.css"/>

Basic syntax

CSS format

Selector Selector

The collection of elements responsible for scoping, to be modified

Statement

Consists of a property name and a property value that is concatenated with a colon (attribute name: Property value) for setting a specific style

CSS composition

Consists of a selector and one or more declarations, with semicolons between multiple declarations

Selector {Property Name: property value; Property Name: property value;}

CSS annotations

Html comments <!---->

The comment in the stylesheet is a/* This is a comment */

Annotations cannot be nested

Unit

Length Units

EM multiples

The smallest unit displayed on the Px:pixel pixel screen is used for web design.

PPI (DPI) pixels per inch is a rate that represents the sharpness accuracy

Pt is a standard length unit 1pt=1/72 inch for the printing industry

Formula: px = PT*DPI/72;

cm/mm cm/mm

Color units

English name: Red Green blue .....

Hexadecimal RGB #000000-#ffffff

Rgb

Digital (0-255) RGB (255,0,0)

Percent (0-100%) RGB (100%,0%,0%)

URL address

No quotation mark URL (test.jpg)

Absolute path URL (http://www.baidu.com/test.jpg)

Use single quote URL ('./test.jpg ')

Use the double quotation mark URL ("./test.jpg")

Selector Selector

HTML selectors

is to use HTML elements as selectors

For example: p{color:red}

ID Selector

Use ID value as Selector

How to use: #id值 {declaration}

For example: #duang {color:red;}

Class Selector

Use class values as selectors

How to use:. Class Value {declaration}

For example:. butingke{color:red}

Note: Do not use the ID selector easily, use the class selector to choose More!

Association Selector

Single-use selectors through a one-level down lookup

Use spaces between each selector

For example: UL #zhangsan b{color:red}

Combo Selector

Multiple selectors are combined in a comma-delimited middle

For example: p,.pangzi{color:red}

Pseudo element Selector

: Link not visited

: hover when mouse moves over the link

: Active Mouse Selected link

: visited links that have been visited

Only the A tag has the above four pseudo-element content

Text labels other than a label now have only two pseudo-element contents (hover,active)

Selector Priority: Association selector >id selector >class selector >html Selector

Exclude the above content

The closer you are to the higher the priority (nearest principle)

If there is an error, please point it out! I correct it in time!

Relive the HTML frameset, CSS, selectors