CSS Base {property: value;}

1.CSS is the abbreviation for the stacked style sheet (cascading style Sheets). It is used to define the display of HTML elements.
2. There are three ways to introduce CSS into HTML:
A. External style sheet:

B. Embed the style sheet:

C. Inline style sheet:
The property name is a style example:

Selectors in 3.CSS:
A: Simple selector;
A: element selector; element {attribute: value;}
B: Class selector,. Class Name {property: value;} Note there is a point.
C:id selector; #id名 {property: value;} Note that there is a #,id selector that can only be referenced once, and the class selector may be referenced more than once.
D: Pseudo-class selector (with four states) 1, a:link{} (links not visited)
2. a:visited{} (visited link)
3. a:hover{} (mouse over link)
4. a:active{} (Activation link)
E: Pseudo element selector; 1, p:first-line{}
2, p:first-letter{}
4. Composite selector:
A: Intersection selector: The intersection selector consists of two selectors that are directly connected, with the result of selecting the intersection of their respective element ranges.
The first one must be a tag selector, and the second must be a category selector or an ID selector. There can be no spaces between the two selectors.
eg:p.special{}
h3.cls{}
(the selector above matches)

B: The collection selector:
eg:h1,h2,h3,h4,h5,h6{}
H2.special,.special, #one {}

C: Descendant selector: (Inherit the most recent) descendant selectors have effects that are not limited to the "immediate descendants" of the element, but also affect its "descendants at all levels"
5. Understand the cascading of style sheets:
The priority level of the hierarchy is from small to large:
External style sheet
Inline style Sheets
inline style
If you have different selectors in the same style sheet, the priority level is from small to large:
Element Selector
Category Selector
ID Selector



Basic properties of CSS---text styles
1. Length Unit 1.px 2.em
2. Colour definition Color
3. Set font style settings text font font-family: "Bold";
Set the font tilt effect font-style:italic;
Set text bold effect Font-weight:bold; (in bold) Font-weight:bolder; (bold)
FONT-WEIGHT:100 (range 100-900, the larger the number, the thicker the font)

Set the English letter case conversion text-transform:capitalize; (Capitalize the first letter of the word)
Set control text Size font-size:.. px/..%/. Em
Sets the decorative effect of text Text-decoration:none/underline/line-through (strikethrough)/overline (top line);

4. Set paragraph style set paragraph first line indent text-indent: ... EM (.. Distance of the standard character size)/... px
Set the distance between words letter-spacing (letter): ... px Word-spacing (Word):. px
Set the text line inside the paragraph high line-height:
Controls the horizontal position of the text text-align:left/right (right-aligned)/center (centered)/justify (justified)
Set text and background colors color: ...; Background-color: ...;
Set the vertical alignment of a paragraph vertical-align: ...;(only works on elements in table cells)







Basic properties of CSS---image styles
1. Set picture border: border-width: (thickness); Border-color: (color); Border-style: (linear);
Different borders can be set in different styles, Eg:border-left-style, border-top-width .... Solid Solid Line
2. Zoom of the Image: width height (percent, pixels)
3. Graphic Mix:
Text wrapping: float (float)
Picture and text alignment: horizontal alignment text-align:

vertical alignment Vertical-align:
4,. Set the background color and Image: Background-color:background-image:url (address)
You can use Background-repeat: to control tiling, repeat: tile horizontally and vertically, default values.
No-repeat: Uneven paving.
Repeat-x: Tiles only horizontally.
Repeat-y: Tiles are only vertically oriented.
5. Setting the background image location: background-position: (can set two values Eg:left top)
6. Set the background picture fixed position: background-attchment:fixed; Picture scrolling: Scroll
Add: Remove the small dot before the unordered list, list-style:none;
superscript with eg: Image style


Positioning (view position7)
1. Absolute positioning: (the element box set to relative positioning offsets a distance.) The element still retains its pre-positioned shape, and the space it originally occupies remains.
Position:relative;
Top:.. px
Left:. px
2. Relative positioning: (the position of an absolutely positioned element is relative to the nearest positioned element,
If the element has no positioned element, its position is relative to the original containing block. ) Position:absolute;
Top:. px
Left:. px



CSS basic Properties-table Style (LES8)
1. Control table: cellspacing: Column spacing cellpadding: column padding
border: Table border bgcolor: Table color Border-collapse: Merging border lines of adjacent columns
border-spacing: Setting column spacing
Setting table width: table-layout:fixed (fixed) or auto (auto)

: Represents the table header: Represents the table contents: Indicates the footer (the order can be different, but generally or sequentially)

2. Set the style of the table when the mouse passes through: a:hover
3.CSS and form: A: Make text-like buttons
Transparent (transparent) Set background transparency
border:0px; eg
B: Make colorful drop-down menu select option
C: Make only underline input box border:0px/none;
border-bottom:1px (thickness) dashed (linear) #000000 (color);
Add: 1.display:block (row-level element changed to block-level element)/inline (block-level element changed to row-level element)
2.CSS3 selector:: The Nth-of-type (n) selector matches each element of the nth child element of a particular type that belongs to the parent element.
n can be a number, a keyword, or a formula.



Use CSS to set links and navigation menus (LES9)
1. Set hyperlink style: In HTML you can also use the Pseudo class selector's four styles a:link (not accessed) a:visited (accessed) in the CSS.
A:hover (mouse Move Up) a:active (active)
2. Create a button-style hyperlink: Text-decoration:none; a:link{} a:active{}
(these can be set) background:;
Color:;
BORDER-RIGHT:PX solid;
BORDER-BOTTOM:PX solid;
BORDER-LEFT:PX solid;
Border-top:px.
3. Create a fluorescent menu: Apply unordered list,

, A:hover, (check les9).
4. Control the mouse (cursor) pointer. {cursor:} (check the properties of other CSS 2.0 Chinese manual).
5. Format the list of items: You can use an ordered list

2. With unordered list

• Use List-style to set.




• 6. Create a simple navigation menu:




• A: vertically arranged menus




• Many times the list-style-type:none is used to remove numbers or dots before an ordered or unordered list.




• B: Landscape Menu




• The implementation of the conversion can only be set Float:left, while the width is canceled.




• 7. Set the picture rollover effect: (refers to a picture in the Web page, when the mouse pointer passes through to replace another picture.) ) can be used hover.






• Add CSS3 attribute rotate (angle)




• Effect: When the mouse is moved up, the list can rotate the angle you set. (is clockwise, negative is counterclockwise, if 180 degrees, you can see the word is inverted.) Can't see the turn clearly




• , but can see the change of the word)




• Transform (conversion): rotate (rotation; rotation; rotate; turn) ( -20deg); deg: degree (degree)




• (View les9-5)








• CSS box model (Les 10)




• 1. The concept of the box: in CSS, a separate box model content (contents), Border (border), padding (padding) and margin (margin) 4 parts.




• The width or height that a box actually occupies is made up of content + padding + border + margin.




• 2. Set border, padding, margins:




• A padding (padding) Padding property can be set to 1, 2, 3, and 4 attribute values, respectively, as follows:




• When you set 1 property values, it means that the upper and lower left and right 4 padding are the values.




• When setting 2 attribute values, the former is the value of the upper and lower padding, which is the value of the left and right padding.




• When setting 3 attribute values, the value of padding on the 1th bit, the 2nd is the value of left and right padding, and 3rd is the lower padding value.




• When setting 4 property values, follow the clockwise direction, followed by the top, right, bottom, and left padding values.






• b margin margin refers to the same element as the distance between the element and the set of margin and padding.




• 3. The relationship between the boxes:




• Standard document Flow:




tags and Tags: p is simply a chunk container tag, i.e.

And

• is the equivalent of a container,


• Can accommodate various HTML elements such as paragraphs, headings, tables, pictures, and even chapters.


• The difference is that P is a block-level element that contains elements that wrap automatically. span is an inline element and does not wrap.


• 4. The positioning principle of the box in the standard flow:


• Horizontal margin between elements in rows: When the two-line elements are close together, the distance between them is the margin-right of the 1th element plus the margin-left of the 2nd element.


• Vertical margin between block-level elements: when two block-level elements are arranged vertically, the situation is different. The distance between two block-level elements is not the sum of Margin-bottom and Margin-top,


• But the larger of the two.



• {background positioning: background-position:center; There are many ways to provide values for the Background-position property. First of all


• You can use some keywords: top, bottom, left, right, and center. Usually, these keywords will appear in pairs,


• But that's not always the case. You can also use length values, such as 100px or 5cm, and finally you can use a percentage value. )






• The floating and positioning of CSS boxes


• 1. Floating box (float): In the standard flow, a block-level element automatically stretches in the horizontal direction. In the vertical direction will not side-by.


• There is a float property in the CSS, and by default the value of the None,float property is set to left or right, and the element is tightly tightened to its parent element,


• Use clear to clear the effects of floats


• The clear property can be set to both, in addition to left and right, to clear both sides of the effect.


• The Position property can set 4 values:


• Static: Default value


• Relative: relative positioning (relative to its original position, by offsetting the specified distance to reach the new position.) Does not affect other boxes)


• Absolute: Absolute positioning (the relative position of its parent element will affect the box behind him as if the box had been taken away,


• The other boxes in the back will fill the front position. ）


• Fixed: Fix position (when the scrollbar slide does not change position, it will always be there.) ）


• 2. Positioning of the box (static):


• box positioning (relative)--left, right, top, bottom these four properties are valid only if the Position property is set to absolute, relative, or fixed.





• The 3.z-index:z-index property is used to adjust the upper and lower positions of overlapping blocks when positioned, and elements with large z-index values are located above the value small. (The default Z-index value is 0, and when the Z-index value of two blocks is the same,


• Will maintain the original high and low coverage relationship. ）


• 4. Display Properties of the box: block and inline two values for display properties, one for block level display, and one for inline display. Display also has a value of none, when set to None,


• Indicates that the element will be hidden. This hiding means that the element disappears completely from the page.




• 8.28


• 1.overflow (overflow): There are four values: visible (default value. Do not cut content or add scroll bars)


• Hidden (hide the extra part of the content)


• Auto (displays scroll bar when content is out of box)


• Scroll (always show scroll bars)


• 2.display (Display): Common value: None: This element is not displayed.


• Block: This element will be displayed as a block-level element with a newline character before and after this element


• Inline: This element is displayed as an inline element with no line breaks before or after the element.


• Inline-block: inline block element.


• 3.clip (CUT): Two values: Auto: Object No clipping


• Rect (number Numbers): Provides four offset values from upper-right-bottom-left, calculated from the upper-left corner of the object as a (0,0) coordinate.


• Any of these values can be replaced with auto, that is, this edge is not clipped. NOTE: Retrieves or sets the visual area of the object.


• The parts outside the area are transparent. The value of position must be set to absolute, which is used by this property.





• 8.29 (Review)


• 1.height:auto


• Overflow:hidden This is a combination that makes the auto change as high as the inner box (or the tallest box). Must be used together.


• 2. Positioning (position) the left here means: how far from the right side. Top refers to how far from the top.




• Relative positioning: (position:relative;) Its reference point is: The upper-left corner of its original position. The original position will be occupied after the move.


• Absolute positioning: (position:absolute;) Its reference point is: its parent element has the upper-left corner of the position. The original position will be empty after the move.


• 3. Clear only affects the purge itself. It means: Want to make which block move, on which block to use clear. usually with clear:left; clear:both;


• 4.display (display): Display:none; hidden, space left for them to use.


• Visibility:hidden, hidden, place empty, still there.


• Display:inline; This element is displayed as an inline element with no line breaks before or after the element.


• Display:block; This element will be displayed as a block-level element with a newline character before and after this element.


• 5. Use the IFRAME to implement the framework structure:

