Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to write the internal style of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The internal style should be written between the tags

Style

Link, this should also be put in between.

The first kind:

@ import "write css file path directly"

The second kind:

@ import url (write stylesheet file path)

1. Selector

1. Derived selector

For example: (select span in div)

Div span {give style}

Ha ha ha

two。 And

Such as: (both p and an are selected)

Pforce a {give style}

Hello 1

Hello

II.

Background color:

Background-color: # ccc

Background means background.

Color means color.

Background picture:

Background-image: url (write image path)

Background-repeat: repeat-y

Repeat means repeated tiling.

Repeat-y means tiling according to the y-axis

Repeat-x means to tile by x-axis.

Background-repeat:no-repeat means not tiling.

Background-position (sets the location of the background image on the web page.)

Background-position:center; (meaning to locate the position of the picture)

1.center (centered)

2.top (part I)

3.right (right)

4.left (left)

5.bottom (part two)

Background-position:50% 50%; (this method can also center the background image)

Background-attachment:fixed (keeps the background fixed and does not follow the scroll bar)

Fixed (meaning fixed)

Attachment (meaning attached to there)

Background-size (specifies that the size of the background picture is css3)

Size means size.

Attribute: 1.contain

(expand the image image to the maximum size so that its width and height fully fit the content area)

It means to scale the filled area proportionally.

2.cover (paved area)

3.percentage (sets the width and height of the background image as a percentage of the parent element)

Note: if only one value is set, the second value will be set to "auto".

CSS personal summary notes (collection)

III. Font

Here, it should be noted that when the quotation marks are nested, the outer layer should use double quotation marks and the inner layer should use single quotation marks.

Font-family: "Microsoft Acer", "Font II", "Font III". (define fonts)

The advantage of defining multiple fonts is that the system will start from the first font by default. If the system does not have this font, the font set by the browser will be used by default.

Font-style:normal; (defines how fonts are displayed)

Normal (normal display)

Italic (text tilt display)

Font-weight:900; (sets the thickness of the text)

Weight (meaning weight)

Default value: normal equals 400

It can also be set to bold equals 700.

Note: set the text thickness to 100-900 and specify 9 levels of boldness for the font.

Font-size:50px; (sets the size of text)

The units are: px em

1em=16 pixel

2em is equal to twice the current font size.

IV. Text

Text-indent:

Text (text)

Indent (indent)

Unit: em

Px

Note:

Can be set to a negative value. With this technique, you can achieve many interesting effects, such as "hanging indentation", in which the first line is suspended to the left of the rest of the element:

Text-align (for text alignment)

Align (meaning to arrange)

The following properties are: 1.left (left alignment)

2.right (right align)

3.center (centered)

4.justify (like the alignment of both ends in an word document)

Word-spacing (sets the standard interval between changed words)

Spacing (interval)

Unit: em

Px

To use this, both words and words must have spaces in order to achieve the effect.

Such as:

Hello. Welcome to my studio.)

Text-decoration (commonly used to remove underscores)

Decoration (meaning of decoration)

Attribute: 1.none remove underline

2.underline (add underscore)

3.overline (add underline)

4.line-through (to draw a line across a line, usually used for a discount)

5.blink (flashing)

Line-height (used to set row height)

Letter-spacing letter spacing

5. A style of a label

A:hover (mouse pointer over link)

Usage:

A:hover {

Font-size:20px

When the mouse slides up, the font becomes larger, 20px.

VI. List

List style:

How to remove the dots in front of an unordered list:

List-style:none

7. Forms:

Table, th, td

Border: 1px solid blue

Border: boundary border

1px defines the thickness of the border

Solid defines solid lines

Blue defines the color

Border-collapse:collapse; (collapses the border into a single border)

Border-spacing:50px; (open the spacing between lattices)

But it will only take effect if the border lines are not merged.)

VIII. Convert inline elements to block elements

Display:block

Block converts it to block elements

Inline converts it to inline elements

IX. Outer margin and inner margin

Inner margin:

Padding-top (part I)

Padding-right (right)

Padding-bottom (part two)

Padding-left (left)

Outer margin:

Margin-top (part I)

Margin-right (right)

Margin-bottom (part two)

Margin-left (left)

Note: instead of using the outer margin or the inner margin, it depends on who is right!

Relative positioning: (although the element leaves the original position, it does not release the original space)

Position: relative

Left: 30px

Top: 20px

Absolute positioning: (absolute positioning elements leave and release the original space)

Position: absolute

Left: 30px

Top: 20px

In order to adapt to the browser, be sure to write a relative positioning as a reference when using absolute center.

12. Overflow: handling of spillovers

Scroll bar appears in scroll (rolling curtain)

Hidden hiding

Auto automatically appears scroll bar

Pseudo-class selector:

# a ul li:first-child {

Margin-left:0px

First-child (meaning of first child)

The above code is to find the Li in the ul in class an and remove the outer left spacing of the first li tag.

Last-child (Last one)

# a ul li:nth-child (1) {

The number of choices in brackets is the number of choices.

If the multiple of three is to write 3N

XIII. The weight of CSS style:

ID > Class > tag itself (attribute selector)

14. Understanding of relative positioning and absolute positioning:

Absolute positioning: drag the object given this positioning method from the document flow, and use attributes such as left,right,top,bottom to make absolute positioning relative to the nearest parent object with positioning settings. If the parent of the object does not set positioning properties, that is, it still follows the HTML positioning rules, it is positioned according to the upper-left corner of the body object as a reference.

Relative positioning (relative): objects cannot be cascaded and offset in the normal document stream according to attributes such as left,right,top,bottom.

And do not release the original position. Locate according to the current position.

15. Edge Shadow:

Box-shadow (Shadow the border)

Div

Box-shadow: 10px 10px 5px # 888888

Shadow horizontal offset value (plus or minus); Shadow Vertical offset value (plus or minus); Shadow blur value; Shadow Color

Fillet the border:

Border-radius:4px

Pay attention to the fact that the value in this is not strange.

Related attribute: border-top-right-radius

Border-bottom-right-radius

Border-bottom-left-radius

Border-top-left-radius

When text overflows, it appears as an ellipsis (.)

Text-overflow: ellipsis

Resize:none

16. The removal of the blue border after clicking on input:

Outline:none; removes the blue line from input.

17. Ul ol dl has an outer margin by default:

Give them all the margin:0;padding:0.

This is the end of the content of "how to write the internal style of CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.