HTML style CSS Control Basics
CS s rule declaration, contains three types of values 1, text value div { visibility:hidden;} 2, numeric value div { width:200px;} 3, color value 1, color name . such as red, blue, and so on. reference: color name definition, https://www.w3.org/TR/css3-color/#html52, hexadecimal color . Red (#ff0000) Description: 6 digits The first two digits are red, the median two is green, and the last two bits are blue. 3. RGB color Value (Red, Green, Blue). Red  RGB (250, 0, 0) or RGB (100%, 0, 0) 4, Rgba color values (red, Green, Blue, A Lpha). Red 50% Transparency  RGB (0, 0,. 5) |
|
( priority order ) |
|
Finds the element, renders the style.
#号选择id. Select Class
4.4.1 Context Selector 4.4.2, Special context selector: sub-selector > 4.4.3 Special Context selector: next to sibling element + : After adjacent 4.4.4, Special context selector: General sibling element ~: All after the separated 4.4.5, Special context selector: Universal Selector *: Select all |
ID attribute selector: Uniquely identifies an element in the page. Class Property Selector: Identifies a set of elements that have common characteristics. 1. Do not repeat the style for each label. 2. Use inheritance and contextual selectors to allow different tags to share styles. This reduces the effort required to write and maintain CSS.
|
pseudo-class: (similar to selector)there is actually no label attached to the element. UI Pseudo-class : Applies a style to an element when it is in a state. a:hover//when suspended a:link//Default a:active//Single-machine a:after the visited//is clicked (accessed)
change as the target is linked to
structured pseudo-class : The element tag has a certain logical relationship, and the style is applied to the element that conforms to the relationship.
|
|
positioning Elements
3.1, understand the box model: Margin settings margin:5px 10px 8px 9px;margin:5px 10px;margin:10pxmargin-left:10px 3.1, understand the box model: Internal margin settings (IBID.)
3.1. Understanding the Box model: Border Width/style/color |
Border color border rounded corners |
Adds a overflow:hidden to the parent element of the floating element. Floats the parent element at the same time. The last child element of the parent element, which is a non-floating element with a purge style (clear:both/clear:left). Use: After to add a purge element.
|
methods for wrapping floating elements .Mainwrapper{ Border:1px Solid Red; /*Package Floating element: Method One*/ / *overflow:hidden; */ /*Package Floating element: Method Two wing also floating*/ / *float:left; */
} /*Wrap Floating element: Method three using pseudo element (element) */ .Mainwrapper:: After{ content:"."; Display:Block; Clear:both; Visibility:Hidden; Height:0; }
|
Watch out.
|
Center display:width: %; vertical-align: Middle; text-align: center; |
|
|
HTML Style CSS Control basics