CSS Learning notes: Common styles

Css

1.CSS Overview

Cascading Style Sheets

Function: Control the display effect of the page, and finally use HTML to display the page content, with CSS style to control the display of the page content

Comments with/ * * /

How 2.CSS and HTML are combined

1. attribute style combination ( inline style )

Write the style Property in the label .

Style= " Property: Value "

2.style Tag Combination ( inline )

<style>

Code ....

</style>

3.Link label combination ( most commonly used )

1. define an external style file first

2. Introduction of <link rel= "stylesheet" type= "Text/css" href= "Divstyle.css"/>

4.import for Import

@import url (CSS file location );

3.CSS Style precedence and code specification

From the outside to the inside, from top to bottom level gradually increase ( nearest principle )

Writing specification:

Attribute: property value ; Properties 1 : Property Value 1

Property: Property value 1 property value 2; as border:1px solid blue; no comma in the middle

4.CSS Three kinds of commonly used selectors

The HTML tag name selector . Using the tag name of HTML

class selector . In fact, the class attribute in the tag used

1. use . start with definition

2. can make the same label have different display effect

3. can make different labels have the same display effect

The ID selector . In fact, the ID attribute in the tag is used .

1. use # to define, introduce the ID attribute in the tag

2. when using, it is best to keep the ID unique

5.CSS three expansion selectors

1. Correlation Selector

p,div{color:red} div and p are separated by commas , so you can write multiple html tags at once

2. Combo Selector

Div p{color:red} div with a P tag in the Middle with a space separating

3. pseudo element selector

A:link hyperlink is not clicked.

the state after the a:visited is visited.

A:hover The cursor moves to the status on the hyperlink (not clicked)

A:active Status when clicking a hyperlink

a:link{

Color:blue;

Text-decoration:none;

}

a:hover{

color:red;

Text-decoration:underline;

}

a:active{

Color:green;

Text-decoration:none;

}

a:visited{

Color:yellow;

Text-decoration:underline;

}

common operations for 6.CSS

Introduction of 1.CSS Medium scale units

1in = 2.54cm = 25.4 mm = 72PT = 6pc

PT (Point, LB): pt=1/72 (Inch), is a unit of physical length

PX ( pixels ) =1/dpi (inches): Specifies the dpi of precision (Dots per inch, number of pixels) Windows system By default is the 96dpi,apple system by default is 72dpi.

Em=16px.

Calculated as 96dpi under Windows, PT=PX*72/96=PX*3/4

2. Font settings

Font:italic Bold 42 "song Body"; Note Order

Or: Font-style:italic

Font-weight:bold

Font-size:42

Font-family: "The song Body"

3. Text Settings

Text-align to set text alignment

Text-indent:2em; Set Indent (The value can be positive and negative , default is 0)

Text-decoration: set text decorations common property values underline overline ( dash ) None

4. Background settings

background-color:red; Background Color

Background-image:url ("photo-3.jpg"); Background Image

Background-repeat:no-repeat; There is no repeat repeat-y (repeat in y Direction ) repeat-x

background-position:30px 30px; where the background picture appears ( leftposition,topposition )

5. Border

Border: (Border width) (border style) (border color);

Style:solid;dish;

5 box model (Border margin padding)

Border Border

Out of margin patches

padding inside patch

margin:20px; upper right lower left 20px

margin:40px 10px; Up and down 20px

margin:10px 40px 50px; on 10px around 40px under 50px

6 Positioning Settings (position,float,clear)

Position:static ( default ); absolute (positioning overlay ); fixed (4.0 not supported ); relative ( objects do not cascade )

Absolute: The beginning and end relative to the parent block ( or body) using upper right left , Follow Z-index

After positioning , the subsequent block changes ( leaving the following element to the premise )

Relative: use upper right and bottom left relative to position of top left corner before floating

After positioning . The block behind does not change

Z-index:z in the direction of the position , 0 layers at the bottom , z the larger the more outward .

levels can be adjusted by Z

Top;right;bottom;left

float: Floating position

Left center Right

Clear: clears the left or right content ( similar to another line , but not exactly the same )

Left Right both

To set the block size :

width:100px;

height:100px

7. List settings

List-style List Style

List-style-image List Pictures

8. Mouse style settings (cursor)

CSS Learning notes: Common styles