CSS Basics points Summary

CSS Basics points Summary

CSS refers to cascading style sheets (cascading style Sheets)
Techniques for formatting Web page content

1. Style rules
Inline (inline) this label style
Inside (inline) head inside style
External (outer) head inside link

Style enclosed in curly braces {}
Recommended shorthand for performance optimization, font-size shorthand for font

Selectors and selectors, separated
Div,p,form

Renders the most recent element

inline > inline = out-of-union
Back two to see the order of

2. Selector
Element selector: Tag Selector, div,p, etc.
Name {... }

Class selector: With. Class
. name {... }

ID selector: With #
#名称 {..... }

CSS derivation, descendant selector; Div Span{}div span below
Parent Selector __ Child Selector {... }

Below are not commonly used:
CSS sub-element selector >
CSS adjacent Sibling selector +
Property Selector []
CSS pseudo-Class dynamic is pseudo-class
Pseudo-element static is pseudo-element
Adjacent sibling selector + Selector
child element Parent Selector > Child Selector

* Wildcard: function all elements
*{margin:0
padding:0}
Reset reset technology for browser compatibility issues

I don't need this reset now, it's all normalize.
What you need to clear 0 and what to zero

Must master
Pseudo-Class: Used to add some special effects
Hover (effect of mouse pointer over the display)
FirstChild

Div:hover
Or Div:hover img (img inside DIV)

☆ Weight value (must say weight value)
First-class inline (start tag, style) 1000
Second-level id0100
Third class and Pseudo class 0010
Four elements and pseudo-elements 0001

No weight value 0000
* Wildcard Characters
Important: There is a special case, let the other selector weight failure, so that their weight value is the highest

Weight values are additive and non-rounded

3.CSS Stacking

CSS Inheritance
child element Parent Element Inheritance Property
Inheritable: Colors, fonts

Non-inheritable: margin,padding (margin, padding)

Four states of the 4.a label
A:link No Access
A:hover Mouse Move in
A:visted has visited
A:active is selected

5.CSS style
☆ background: Picture (URL), color, repetition (no-repeat), size (sizes), positioning (position)

<style>
div{
width:500px;
height:500px;
border:1px solid red;
Background:url ("12.jpg");
/* Set non-repeating fill interface */
Background-repeat:no-repeat;

/* This can be used to fill the entire border interface size, generally set to the border size */
background-size:500px,500px;
}
</style>

☆ Text: Indent (can ±), color, decoration (underline, underline), line spacing, alignment, word spacing, capitalization

Text indent with log, picture ...
/*a Label Remove underline */
A{text-decoration:none;}

Center vertically: vertical-align:middle;line-height: Row Height value
Horizontal Center: Text-align:center
Centering can be used elsewhere, such as tables and so on

Text
Custom fonts: Font-face general use, these fonts to the server, the use of the time will be downloaded
Instead of the font family, font-family this intelligent use of their own computer fonts

Font-weight: Bold (Bold,bolder bold and thicker)
Font tilt: font-style:oblique;
Font-size: Size

☆ List: Type (. 123, etc.), positioning, picture (custom icon)
List to do navigation
UL Li
Cancel small dots or other point types
/* Set the small dot in front of the list to set other */
Li{list-style:none;}

☆ Contour (less used): color, style, width

CSS style Code Listing:
-----------------------------------------------------------------------
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>css</title>

<!--Associated external style sheet, suffix name .css-->
<link rel= "stylesheet" href= "external style. css" >

<!--inline, written in style-->
<style type= "Text/css" >
div {width:30px;color:red;font-size:30px}

/* class selector, which does not have a label in front of it, the default is the class and ID selector of the upper one */
. span1{
Color:lime;
}
/*id Selector */
#span1 {
Color:brown;
}

/* Write the tag name in front of. and # for the class and ID selector for this tag */
P.small {line-height:90%;

}
P.big {font-size:200%}

p#123{
Color:orange;
}

/*hover for mouse to move to the effect here */
div:hover{
Background:yellow;
}
img:hover{
width:300px;
Height:auto;
}

/* Derivation, descendant selector, representing the style of span inside div */
Div span{}
</style>

<body>

<div>
<p class= "Big" >big</p>
<p class= "Small" >small</p>
<p id= "123" >darkgreen</p>
</div>

<div class= "Span1" > (. Class) class= "Span1" </div>

<div id= "Span1" > (#id) id= "Span1" </div>

<!--quoted external style, head inside link-->

</body>
-----------------------------------------------------------------------

CSS style code listings: backgrounds, other formats, such as text alignment, etc.
-----------------------------------------------------------------------
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSS box model, positioning </title>

<style>
div{
width:500px;
height:500px;
border:1px solid red;
Background:url ("12.jpg");
/* Set non-repeating fill interface */
Background-repeat:no-repeat;

/* This can be used to fill the entire border interface size, generally set to the border size */
background-size:500px,500px;
}

/*a Label Remove underline */
a{
Text-decoration:none;
border:1px solid red;
/* Line Height */
line-height:100px;
}

/* Set the small dot in front of the list to set other */
li{
List-style:none;
}

</style>

<body>

<div></div>

<ul>
<li>s</li>
</ul>
<a href= "" ><br> I am a link </a>

</body>
-----------------------------------------------------------------------

The difference between PT and PX in HTML is

pt--Point. Typically, the unit that identifies a font in a Web page.
px--pixels. It is also generally the unit that identifies the font in the Web page.
Two relationships: one inch =72pt (dots) =96px (pixels), most commonly used in Web pages: 9pt=12px.
In Flash, it is generally the common identity unit of a font.

CSS Basics points Summary