- Placeholder use
The CSS3 has the corresponding common method to beautify the placeholder hint information. You can set the message text color, transparency, background colors and so on.
In order to maximize compatibility with all browsers, it is necessary to add a browser engine prefix to the placeholder property in CSS.
Example: Modify the text color.
/* WebKit Browsers */
::-webkit-input-placeholder {
Color: #fff;
Opacity:1;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
Color: #fff;
Opacity:1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
Color: #fff;
Opacity:1;
}
/* Internet Explorer * *
:-ms-input-placeholder {
Color: #fff;
Opacity:1;
}
- Background background settings
Background-image Set background image;
Background-repeat set the background image tiling order;
Background-position positioning background image;
Background-size set the size of the background image;
Background-color sets the color of the background.
Background can be ligatures, can also be written separately.
Such as:
{Background:url (path) no-repeat/repeat-x/repet-y 20px 20px;} Or
{
Background-image:url (path);
Background-repeat:no-repeat/repeat-x/repet-y;
background-position:20px 2px;
backgjround-size:20px 20px;
}
- Application of float
The Float property defines the direction in which the element floats.
Left floating;
Right float;
None default, not floating;
Inherit inherits the parent element of the float property.
A floating property is a block-level element that can be controlled by a margin.
- Position attribute Application
Relative defines the parent element.
Absolute defines a child element.
Fixed generates an absolutely positioned element that is positioned relative to the browser window.
The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
The Relative generates relatively positioned elements that are positioned relative to their normal positions.
Static default value. No positioning, element appears in normal stream
This property allows elements not to be arranged in a normal flow layout and can be positioned by left, Top,right,bottom, and Z-index to set the stacking order of elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order. Negative values can be used, but can only be used in anchored elements.
- Precedence Order of CSS styles
CSS style calls are divided into: internal style, external style, inline style;
The inline style has the highest level > inner style > External style.
Precedence of CSS style selectors:
The weighted value of the inline style sheet is up to 1000;
The ID selector has a weight value of 100
The class selector has a weight value of 10
The weight value of the HTML tag Selector is 1
CSS Precedence Rules
Selectors have a weighted value, the greater the weight the higher the priority;
When the authority values are equal, the style sheet settings that appear after are better than the style sheet settings that appear first;
The creator's rules are higher than the viewer: that is, the CSS style set by the page writer has precedence over the style set by the browser;
The inherited CSS style is not as good as the later specified CSS style;
<body>
<div id= "span" >
<p class= "Spancon" >
<span>123</span>
</p>
</div>
</body>
In the example above, we will define the font color of 123.
A <span style= "color: #000" >123</span> This time the color is #000 and the highest level.
B. Spancon span{Color: #000;}
C #span. Spancon span{Color: #000;}
D span{color: #000;}
The order is a > B > C > D.
Add a style using a script
The order in which Internet Explorer downloads or renders may be as follows:
The order of IE download is from top to bottom;
The execution of JavaScript functions will block the download of IE;
The order of IE rendering is also from top to bottom;
The download and rendering of IE is carried out at the same time;
When you render to a portion of a page, all of its parts are already downloaded (but not all associated elements have been downloaded.) )
During the download process, if you encounter a tag embedded in the file, and the file is semantically explanatory (for example: JS script, CSS style), then the download process of IE will enable a separate connection to download. And after the download to parse, if JS, CSS, if there is a redefinition, the function defined later will overwrite the previously defined function.
During parsing, the download of all elements down the page is stopped. The style sheet file is special, and after its download is complete, it is parsed with all previously downloaded style sheets, and after parsing is completed, all previous elements (including previously rendered) are re-styled. and continue to render in this way until the entire page rendering is complete.
Firefox handles downloading and rendering in roughly the same order, but with some nuances, such as the rendering of an IFRAME.
CSS Application One