CSS Learning notes (1)

1. CSS code structure

selector {

attribute: value;

attribute: value;

}//A set (attribute: value) is called declaration, and curly braces contain multiple sets of declarations

The value appears as 0 o'clock and does not need to be added to PX units, since 0 is 0

For example:

P {   text-align: Center;    color: black;    font-family: Arial;    margin: 0;    padding: 0;}

　　　　　　

2. The first character of the class name cannot use a number because it does not work in Mozilla or Firefox, considering compatibility.

If you have multiple groupings, you can separate the selectors that need to be grouped by commas, and the grouped selectors can share the same declaration.

For example:

H1,h2,h3,h4,h5,h6 {    color: blue;}

3. HTML elements can be selected based on their class [also equivalent to one-to-one relationship]

For example:

{    color: #f60;     background: #666;}

In the example above, a table cell with the class name fancy will have a #666 background color and a #f60 font color.

<TD class= "Fancy" > My style will change </td><p class= "Fancy" > I have fancy annotations, but my style has not changed </p>

This is because the effect of the rule I write is limited to the table cell labeled fancy (that is, the TD element is used to select the Fangcy Class).

4. There are 4 common types of attribute selectors:

(1) Attribute selector, example setting style for all elements with the title property

[title] color: blue; }

(2) attribute and value Selector, example setting style for all elements with title= "Hello"

[Title=hello] color: blue; }

(3) attribute and value selector-Multiple values, examples for property values separated by spaces

[Title~=hello] Color Blue; }

<H1 title= "Hello World" > My style was changed </H1><H2 title= "World Hello" > My style was changed 

In the example, the property values that are separated by hyphens are appropriate

[title|=en] color: blue; }

(4) Styling examples for formatting forms are particularly useful when styling a form without a class or ID

 input[type= "text"]  { display : Span style= "color: #0000ff;" > block ; :  150px ;  Margin-bottom :  10px ;  Background-color :  blue ;  font-family :  Verdana, Arial ;} input[type= "button"]  { display :  block ;  width :  120px ;  Margin-left :  35px ;  font-family :  Verdana, Arial ;} 

<input type= "text" name= "name" value= "Mini_wyy" size= "" "><input type=" button "value=" button "

5. External style sheet

Page Use <link> label link to style sheet,<link> label in (document) header

CSS Learning notes (1)