CSS properties and remaining selectors

Today's course accelerated, faster than usual, but felt very good. nice~

Property Selector

E[att] Select the e element that has the ATT attribute.

Input[type]{color: #red;}

<input type= "Radio" >

E[att= "Val"] Select the e element that has the ATT attribute and the attribute value equals Val.

Input[type= "Radio"]{color: #red;}

<input type= "Radio" >

E[att~= "Val"] Select the list of words with the ATT attribute with a space-delimited attribute value, one of which equals the e element of Val.

a[class~= "HT"]{FONT-SIZE:16PX;}

<a href= "www.baidu.com" class= "HT SSS" ></a>

E[att^= "Val"] Select the e element with the ATT attribute and the property value as a string starting with Val.

a[href^= "www"]{font-size:16px;}

<a href= "www.baidu.com" ></a>

E[att$= "Val"] Select the e element that has the ATT attribute and the property value is the string ending in Val.

input[type$= "O"]{color:red;} <  type= "Radio">

E[att*= "Val"] Select the e element with the ATT attribute and the property value as a string containing Val.

input[type*= "ad"]{color:red;} <  type= "Radio">

E[att|= "Val"] Select the e element with the ATT attribute and the attribute value to begin with Val and the string separated by the connector "-".

input[class|= "TE"]{color:red;} <  type= "Radio"  class= "Te-ss">

E:first-letter/e::first-letter sets the style of the first character within the object.

Is the first word of the element to match.

E:first-line/e::first-line sets the style of the first row within the object.

E:before/e::before sets the content that occurs before the object, based on the logical structure of the object tree. Used in conjunction with the Content property

E:after/e::after the content that occurs after the object (based on the logical structure of the object tree). Used in conjunction with the Content property

E::p Laceholder Sets the style of the object text placeholder.

E::selection sets the color of the object when it is selected.

<class= "T1"> Pseudo-Object selector to test CSS, sunny and sunny! </ P >

P.T1{WIDTH:100PX;BORDER:1PX solid black;}/* CSS3 syntax changed to::, originally: */

P.t1::first-letter {font-size:20px;font-weight:bold;} /* First character */

p.t1::first-line {color:blue;} /* First line */

CSS:. T2::before{content: ' 123 ';}

. T2::after{content: ' 123 ';}

Compatible:

 html:<  input  type  = "search"   placeholder  Span style= "color: #0000ff;" >= "Test"  >  css:input::-   Webkit-input-placeholder {color:green;}   Input:-ms-input-placeholder {//ie10+ Color:green;}   Input:-moz-placeholder {//firefox4-18 Color:green;} Input::-moz-placeholder {//firefox19+ Color:green;}  

< H3 > Use the mouse to select my </h3><p> Please use the mouse to select my  </p>p::-moz-selection{background-color: #E13300; color:white;} p::selection{background-color: #E13300; color:white;}

Style of CSS

Font-family set the text name, you can use multiple names, or use commas to separate them, and the browser uses the available fonts in order of precedence.

P {font-family: ' Arial ', ' Black body ', ' Soong '}

Font-size setting the size of text

Note: If you use percentages as units, it is based on the size of the parent element font

p {font-size:14px;}    

Font-weight Controlling font weight

p {font-weight:bold;}

Font-style controls whether the font is tilted

Font (typeface style abbreviation)

Font:font-style | | Font-variant | | Font-weight | | Font-size | | /Line-height | | font-familyp {font:italic bold 14px/22px arial}

Color controls the font colors of text

p{    color: #FF0000;}

Text-decoration (text trim lines) control text trim lines

Text-decoration:none | | Underline | | Blink | | overline | | Line-through p {text-decoration:overline;} p {text-decoration:underline;} p {text-decoration:line-through;}

Text-shadow (Text shadow) controls the shaded portion of the text.

Text-shadow:h-shadow V-shadow Blur Color;h-shadow         required. The position of the horizontal shadow. Negative values are allowed. V-shadow         required. The position of the vertical shadow. Negative values are allowed. Blur                   is optional. Blur the distance. Color                 is optional. The color of the shadow. h1{    text-shadow:2px 2px #ff0000;}

Width widths

Width:auto | Length     p {width:300px;} div {width:50%;}

Height altitude

Height:auto | Length img {height:200px;} div {height:100px;}

margin outer margin

Margin:auto | Length Margin-top set the margin on         the top margin-bottom set the margin below Margin-left set the margin to the        left Margin-right        set the right margin div { width:300px; height:100px; margin:10px;} div {width:300px; height:100px; margin:0 Auto;} Abbreviated type: margin: Top margin  right margin  bottom margin margin  : Top bottom margin margin margin    : Top  margin left margin bottom margin    

padding inner margin

padding:lengthdiv {width:300px; height:100px; padding:10px;} Padding-top set the padding on the         top margin padding-bottom     set the padding below Padding-left set the padding        on the left side Padding-right        Set the right padding abbreviation: padding: Top margin  right margin  bottom margin  left margin padding: Bottom margin    padding: top  margin left margin    

Additional knowledge:

padding inner margin

When a box is set with a background image, the background image is covered by default in the range of padding and content

and tile the background image with the upper-left corner of the padding as the datum point.

Border border

Border border in IE does not display the content of the background image, in Firefox displays the content of the background image.

Because the border is between the inside margin and the margin, when the border is set to a dashed line, in IE, the dotted line in the empty Place dew

Out is the background of the padding part, while in Firefox, the dotted line is exposed to the margin part of the background.

margin outer margin

Body is a special box, its background color extends to the margin section, while the other box background color will only cover "padding+ content
section "(ie browser) or" Border+padding+ Content "section (in Firefox browser)

Margin is used to control the distance between blocks and blocks.

If the box model is compared to a painting exhibited in the exhibition hall, then content is the picture itself, padding is the picture and the picture frame between the white,

Border is a picture frame, and margin is the distance between the picture and the picture.

CSS properties and remaining selectors