CSS Knowledge Point 2@qunar

1. Import

Import should be placed in front of internal rules, otherwise it will be invalid;

Impor the introduction of multiple files, flashing, the browser will download the imported CSS file, and then to parse, should avoid the use of import

2, important

The important has the highest priority. But important IE6 under the bug;

IE6 and the following browsers have a more explicit support problem exists,!important does not overwrite the rules that fall behind the same style. Take a look at the following code:

Div{color: #f00!important;color: #000;} In the above code, IE6 and the following browser div text color is #000!important does not overwrite the following rules; The text color of the div under other browsers is #f00

Div{color: #f00!important;}　　Div{color: #000;} In the above code, IE6 and the following browsers in the text color of the div is consistent with other browsers, are #f00   

3. Self-adapting layout

Overflow:hidden, by setting the Overflow:hidden, can make the content width adaptive.

<style>. demo{width:960px;height:500px;margin:0 Auto;　　}. aside{float:left;width:200px;height:200px;margin-right:20px;background: #aaa;　　}. Content{height:200px;overflow:hidden;background: #0ff; }　　. inner{margin:0　　10px 0 10px; }</style> 

<div class="Demo" ><div class="inner" ><div class="aside" >aside</div></ Div><div class="Content" > by setting the Overflow:hidden, can make the content width adaptive, but if you set the aside float to left, also adjust the margin </ div> </div>    

4, Row high

The IE6 element has a fixed row height, and when the height is less than the smallest row height, even a smaller definition will still fail. But you can fix it by setting Overflow:hidden

. demo{width:500px;height:1px;overflow:hidden;background: #aaa;} <div class="Demo" ></div>

5. CSS selector

1. Sub-selector e>f, select all the child elements F as the E element.

2. Adjacent selector e+f, choose to cling to the E element after the F element.

3. Brother Selector e~f, select all sibling element F behind the E element.

4.nth-child (n), n is counted starting from 1, like this is counted from 1 onwards.

5.e:last-child: Matches the last child element of the parent element, E. For this property to take effect, the E object must be a child element of an object.

6. Target

Matches the element pointed to by the relevant URL;

. B:target{color: #f00} <a href="#a" >click</a> <div id="a" >change red</div> 

CSS Target use premise: a note of the HREF value to match the ID of the note is consistent;

7. Enhance the form

Why increase the response area:

Enhance the user experience

Take the check box as an example:

　　　　Original: You can only click on the check box to select or uncheck
Enhanced: When you click the check box or the text next to it, you can select or deselect

　　

Use label Tags:
for="Blue" ><input type="checkbox" Id="Blue"/> Blue </label>
Or:

<input type="checkbox" id=for="Blue" > Blue </label>
　　

This is done using the label label's for property, and the for value is the same as the ID of the check box that needs to strengthen the response area, regardless of location;
　　
Set the For property in the label so that its value equals the value of the input ID to be compatible with IE6;

Want to at the end of a row, click on any of the can be selected, can be set up, it feels like this need not much

for="Blue" ><input type="checkbox" Id="Blue"/> Blue </label> label{display:block;  for="Blue" ><input type="checkbox" Id="Blue"/> Blue </label>      

8, checked pseudo-class

Matches the selected element on the user interface, commonly used for input type radio and checkbox;

<style>input:checked+span{background: #f00;}　　Input:checked+span:after{content:"I was chosen";} </style>

<form method="POST" action="#" ><fieldset> <legend> Select the following items try </legend> <ul> <li><label><input type="Radio" name="Colour-group" value="0"/><span> Blue </span></label></li> <li><label><input type="Radio" name="Colour-group" value="1"/><span> Red </span></label></li> <li><label><input type="Radio" name= "Colour-group" Value= "2"/><span> black </span></ label></li> </ul></fieldset><fieldset> <legend> Select the items below try </legend> <ul > <li><label><input type= "checkbox" Name= " Colour-group2 "Value=" 0 "/><span> Blue </span></label></li> < Li><label><input type= "checkbox" Name= " Colour-group2 "Value=" 1 "/><span> Red </span></label></li> < Li><label><input type= "checkbox" Name= " Colour-group2 "Value=" 2 "/><span> black </span></label></li></ Ul></fieldset> </form>           

A checkbox can be multiple, not mutually exclusive, and radio can be mutually exclusive and only one of them will be selected.

With checked, you can switch between hiding and showing.

9, Transform

Allows us to rotate, scale, move, or tilt the elements, only to explain the scaling;

Browser default font size is 12px, if you want the page font size of 10px;

<style>. Demo{font-size:11px;-webkit-transform:scale (10/12);　　} Span{display:inline-block; } </style> <span class="Demo" > Non-loud word big God hair </span>

The scale is set relative to the browser's default font size, and span is set

10, Border

The value of the border-color depends on the value of the color, and the Border-color can also be set.