HTML Style CSS Control basics

Source: Internet
Author: User
Tags border color

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.