Basic use of CSS

Basic use of CSS
We recommend a front-end Learning Website: http://www.w3school.com.cn/index.html. As a back-end developer, it is enough to understand the basic front-end knowledge, and the rest will be learned again.
CSS IntroductionThe full name of CSS is Cascading Style Sheet (stacked Style sheet). CSS is used to separate the content from the display in html. Through CSS, html will pay more attention to the content itself. With CSS, you can define the display style globally. When using CSS, you can directly reference the tag. The benefit is similar to the function in programming languages, which can be defined in one place and used everywhere, you can modify the global style by modifying the CSS at the definition.
Basic syntaxBasic CSS syntaxCSS Rules consist of two main parts: Selector and one or more declarations. Selector {declaration1; declaration2;... declarationN} selector is usually an HTML element that you need to change the style. Each declaration consists of an attribute and a value. Property is the style attribute you want to set ). Each attribute has a value. The attribute and value are separated by colons. The following code defines the text color in the h1 element as red, and sets the font size to 14 pixels. In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

You should describe only one attribute in each row to enhance the readability of the style definition, as shown in the following figure:

     p {          text-align: center;          color: black;          font-family: arial;     }

It should be noted that css itself is not case sensitive, but its name is case sensitive when css class and id are referenced in html.
Selector GroupYou can group the selector so that the Group selector can share the same declaration. As shown below, all title elements are green.

h1,h2,h3,h4,h5,h6 {  color: green;  }

Property inheritanceBased on CSS, child elements inherit attributes from parent elements. For example:

body {     font-family: Verdana, sans-serif;}

Through CSS inheritance, sub-elements inherit the attributes of the highest level elements (in this example, the body) (these sub-elements such as p, td, ul, ol, ul, li, dl, dt, and dd ). No other rules are required. All the child elements of the body must display the Verdana font. CSS also supports Special customization. For example, you want the paragraph to have a font of Times. No problem. Create a special rule for p so that it will get rid of the rule of the parent element:

     body  {     font-family: Verdana, sans-serif;     }     p  {     font-family: Times, "Times New Roman", serif;     }

Derived SelectorThe derived selector allows you to determine the style of a tag Based on the context of the document. This allows you to more precisely control the scope of use of styles. For example, if you want the strong element in the list to become italic, rather than the regular italic, you can define a derived selector as follows:

li strong {    font-style: italic;    font-weight: normal;  }

Note that The context of the blue code:

I am in bold, not italic, because I am not in the list, so this rule does not work for me

1. I am a italic. This is because the strong element is located in the li element.
2. I am a normal font.

Id SelectorThe id selector can specify a specific style for HTML elements labeled with a specific id. The id selector is defined. The following two id selectors can be used to define the color of the first element as red, and the color of the second element as Green:

#red {color:red;}#green {color:green;}

In the following HTML code, the p element whose id attribute is red is displayed in red, while the p element whose id attribute is green is displayed in green.

This paragraph is red.
This section is green.

In addition to using the id selector to control the style under each tag, the id selector can also be further refined with the derived selector.

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

The above style will only apply to paragraphs that appear in the element where id is sidebar. This element may be a div or table unit, although it may also be a table or other block-level element. It can even be an inline element. Even if the element labeled as sidebar appears only once in the document, this id selector can be used many times as a derived selector:

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

#sidebar h2 {font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;}

Here, unlike other p elements on the page, the p elements in the sidebar get special processing, and, unlike all other h2 elements on the page, the h2 elements in the sidebar get different special processing. The purpose of id is to define a style. Combined with the derived selector, IDs are displayed under different elements.
Class SelectorIn CSS, the class selector is displayed with a dot:

.center {text-align: center}

In the preceding example, all HTML elements with the center class are centered. In the following HTML code, both h1 and p elements have center classes. This means both of them will comply with the rules in the ". center" selector.

     This heading will be center-aligned
     This paragraph will also be center-aligned.

Class can also be used as a derived selector:

.fancy td {color: #f60;background: #666;}

In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (The larger element named fancy may be a table or div) elements can also be selected based on their classes:

     td.fancy {color: #f60;background: #666;}

In the above example, the table unit named fancy will be orange with a gray background.

Different from selecting a derived Selector Based on a class, a derived selector has a larger range. A class-based approach must be used under each specific element to take effect. In the above example, this style is not available even if other table units are included in the table modified by fancy.
CSS ScopeCSS can be defined under three scopes to control different scopes.
Inline StyleRestrained styles are CSS with the minimum scope. If you use this method, you will not be able to enjoy any benefits of CSS, so be careful when using it. To use inline Styles, you must use the style attribute in the relevant labels. The Style attribute can contain any CSS attribute. This example shows how to change the color and left margin of a paragraph:

     This is a paragraph

Internal StyleWhen a document requires a special style, you should use an internal style sheet. You can use
External style sheetWhen a style needs to be applied to many pages, the external style sheet is ideal. When using an external style sheet, you can change the appearance of the entire site by changing a file. Use The label is linked to the style sheet. Tag in (document) header:

The browser reads the style declaration from the file mystyle.css and uses it to format the document. External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with the. css extension. The following is an example of a style sheet file:

hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}

PriorityWhich style will be used when a style is defined in Multiple scopes? The browser sets the internal style sheet of the external style sheet by default (located inLabel) inline style (inside the HTML element) from 1 to 4, priority increases gradually.