- Div+css layout: Div is a container for storing content (text, pictures, elements)
CSS is used to specify the location and appearance of content placed in a div. Make HTML file content less, HTML becomes simple, content and style separate CSS can unify website style
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
DOCTYPE: Document type for specifying a DTD (indicating the current version of this HTML file)
- < element name Background-color:rgb (255, 255, 255); Color:rgb (0, 0, 0); font-family: Microsoft ya black; font-size:14px; Font-style:normal; Font-weight:normal; line-height:1.5; " > property Name: Attribute value; "/>
- <style type= "Text/css" >
Here is the content </style>
- Font: font-size font size; font-weight font weight; Font-style font style italic; color font
- Text-decoration:underline;none;
Filter Technology Filter:
- <style type= "Text/css" >
img{Filter:gray;} </style> mouse hover back to original color
- <style type= "Text/css" >
a:link img{ filter:gray; &NBSP ; } a:hover img{ filter: "; } &NBSP;A:V isited img{ color:red; &NB Sp } </style>
- Selector: class selector, ID selector, HTML selector, wildcard selector
- Class selector: <link rel= "stylesheet" type= "Text/css" href= "#" >; using class= "class selector name"
. class selector name {. style1{
Property Name: attribute value; font-weight:bold;
... font-size:2px;
} }
- ID selector: with id= "ID selector name"
#id选择器名 { & nbsp #style2 {
Property Name: attribute value; font-weight:bold;
... font-size:2px;
} }
- HTML selector: The name of an HTML file element
html element name { body{
Property Name: property value;
... font-size:2px;
} }
- When an element is decorated by an ID selector, class selector, and HTML selector at the same time, the priority is
ID selector > class selector >html selector
- An element has at most one ID selector, but can have more than one class selector.
- When referencing multiple class selectors, class= "Style1 style2" with the last class selector style as the main
- Wildcard selector: All elements conform to one style
*{margin:0;padding:0; } margin:10 10 10 10; If margin gives four values, it means top, right, bottom, left
- Parent-Child selector: A child selector tag is a tag that can be recognized by HTML;
Parent-Child selection can have multiple levels for the ID selector and class selector
#style2 span span{color= "red"; Font-size= "20"; }
- In some CSS, we can extract the common parts of multiple selectors, write them together, simplify the CSS file
- Block elements and inline elements
- Inline elements are also called inline elements and can only accommodate text or other inline elements (different browsers), often with <span>h and <a>
- Block elements generally start from the new row, can hold text, other inline elements, and other block elements, even if the content is not enough, it will fill the entire line . Common with <div> and <p>
- Block elements and inline elements convert to and from each other: display:inline; into inline elements
Display:block; convert to block element
- Flow: Standard flow: In a layout, elements appear sequentially
non-standard flow: a layout in which an element is out of standard flow
- Floats are divided into left float, right float, and clear float. Takes effect on both the block element and the inline element. Floating left/right is equivalent to letting go of your left/right side, and other elements will be arranged on the left/right side of it. Float:left;right; text wraps around the picture effect.
By default: After adjustment:
- Positioning: The element is positioned with position. The property values are static (default), relative (relative positioning), absolute (absolute positioning), fixed (the element box behaves like position is set to absolute, but it contains blocks that are the window itself).
- Format: Position: Property value
Relative: The element box offsets a distance (left and top), the element itself remains unchanged, and the space occupied by the original position is retained. The reference point is the original position of the absolute: the element from the original position, let out the original position, by the elements in the back of the war occupies. The reference point is
It's the nearest non-standard stream.。
CSS Learning notes Collation
