CSS notes three ....

1. Property selector:

a). E[att]: Select all e elements that have the ATT attribute.

<style>            Input[name] {                  color:red;           } </style><body>           <p name= "IPT" > I am P tag </p>           <p name= "IPT" > I am P tag </p></ Body>

b). E[att= ' Val ']: Select all elements that have the ATT attribute and the property value is Val E.

<style>            input[name= ' IPT '] {                  color:red;           } </style><body>           <p name= "IPT" > I am P tag </p>           <p name= "IPT" > I am P tag </p></ Body>

c). E[att~= ' val ': Select an e element that has the ATT attribute and the value of the attribute as a space-delimited list of words that is equal to Val.

<style>           u[class~= "UU"] {              background:pink;            } </style><body>           <u class= "UU uu" > I am u tag <u></body>

D). E[att^= ' Val ']: Select the e element that has the ATT attribute and the property value begins with a Val string.

<style>           p[class^= ' P ']{                font-szie:20px;           } </style><body>           <p class= ' p_1 ' > I am P tag </p>           <p  class= ' p_2 ' > I am P tag </p >           <p  class= ' p_3 ' > I am P tag </p></body>

e). E[att$= ' Val ']: Select the e element of the string with the ATT attribute and the attribute value ending in Val.

<style>           p[class$= ' P ']{                font-szie:20px;           } </style><body>           <p class= ' 11_p ' > I am P tag </p>           <p  class= ' 2_p ' > I am P tag </ p>           <p  class= ' 3_p ' > I am P tag </p></body>

f). E[att*= ' Val ']: Select the e element with the ATT attribute and the attribute value containing the Val string.

<style>           p[class*= ' a ']{                font-szie:20px;           } </style><body>           <p class= ' pap ' > I am P tag </p>           <p  class= ' pap ' > I am P tag </p >           <p  class= ' pap ' > I am P tag </p></body>

g). E[att|= ' Val ']: Select the e element that has the ATT attribute and the attribute value starts with Val and is delimited with '-' hyphens.

<style>           p[class|= ' P ']{                font-szie:20px;           } </style><body>           <p class= ' p-1 ' > I am P tag </p>           <p  class= ' p-2 ' > I am P tag </p >           <p  class= ' p-3 ' > I am P tag </p></body>

2. Pseudo-Object selector: Select several common ones.

<style>           p:first-letter{                     //Set style font-szie:20px for the first character                ;           }          P:first-line {                        //Set style color:red for the first line                ;          } </style><body>           <p>web Front | This is about using CSS to control the text paragraph indentation 2 characters, using the CSS of this article properties, through the text properties, you can change the text color, character spacing, alignment, decorates the text, indenting the text. Indent text indents the first line of a paragraph on a web page, which is ...</p></body>

<style>            Input:placeholder {                  color:red;           } </style><body>           <input type= "text" placeholder></body>

3.font-family: Set the text name, order.

<style>            p {                  font-family: ' Microsoft Ya Black ', ' Arial ';           } </style><body>           <p> I am P tag </p></body>

4.font-size: Sets the text size.

<style>            p {                  font-size:20px;           } </style><body>           <p> I am P tag </p></body>

5.font-weight: Sets the text thickness.

<style>            p {                  font-weight: ' Microsoft Ya Black ', ' Arial ';           } </style><body>           <p> I am P tag </p></body>

6.font-style: Controls whether the font is skewed.

<style>            p {                  font-style: ' Italic ';           } </style><body>           <p> I am P tag </p></body>

7.font: Abbreviated form.

<style>            p {                  font:italic bold 14px/20px ' Microsoft Jacob Black ';           } </style><body>           <p> I am P tag </p></body>

8.colo: Controls the font color of the text.

<style>            p {                 color:red;
RGB (0-255,0-255,0-255);
                 RGBA (0-255,0-255,0-255,0.5);
              }</style><body>           <p> I am P tag </p></body>

9.text-decoration: Controls text trim lines.

<style>            p {                 text-decoration:none/overline/line-through/underline           }</style><body>           <p> I am P tag </p></body>

10.text-shadow: Controls the shaded portion of the text.

<style>            p {                 text-shadow:2px 2px 2px red;           } </style><body>           <p> I am P tag </p></body>

11.width: Width.

<style>            p {                 width:20px;           } </style><body>           <p> I am P tag </p></body>

12.height: Height.

<style>            p {                 height:20px;           } </style><body>           <p> I am P tag </p></body>

13.margin: Margin.

<style>            Div {                margin-left:20px;                margin-top:20px;               margin-right:20px;               margin-bottom:20px;           } </style><body>           <div> I'm a div tag </div></body>

14.padding: Inner margin.

<style>            Div {                padding-top:20px;                padding-left:20px;                padding-bottom:20px;                padding-left:20px;            } </style><body>           <div> I'm a div tag </div></body>

　　

CSS notes three ....