Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about the use of css basic grammar examples, with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

An overview

CSS refers to cascading style sheets (Cascading Style Sheets)

Style defines how HTML elements are displayed

Styles are usually stored in stylesheets

Styles are added to HTML 4.0to solve the problem of separation of content and presentation.

External stylesheets can greatly improve productivity

External stylesheets are usually stored in CSS files

Multiple style definitions can be cascaded into one

Two cascading order

Which style is used when the same HTML element is defined by more than one style?

In general, all styles are cascaded in a new virtual stylesheet according to the following rules, where the number 4 has the highest priority.

1. Browser default settings

two。 External style sheet

3. Internal style sheet (located inside the label)

4. Inline style (inside the HTML element)

Three basic CSS grammars

The CSS syntax consists of three parts: selector, attribute, and value:

Selector {property: value}

The selector is usually the HTML element or tag you want to define, the property is the attribute you want to change, and each attribute has a value. Properties and values are separated by colons and surrounded by curly braces to form a complete style declaration (declaration).

Tip: if the value is several words, put the value in quotation marks:

P {font-family: "sans serif";}

Tip: if you want to define more than one declaration, you need to separate each declaration with a semicolon. The following example shows how to define a central paragraph of red text. The last rule does not require a semicolon, but it is a good habit to add a semicolon:

P {text-align:center; color:red;}

Tip: only one attribute should be described on each line to enhance the readability of the style definition:

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

Tip: whether or not to include spaces does not affect how CSS works in the browser, but it can increase readability; unlike XHTML, CSS is not case-sensitive. There is one exception: class and id names are case-sensitive when it comes to working with HTML documents.

Tip: do not leave a space between the attribute value and the unit. If you use "margin-left: 20px" instead of "margin-left: 20px", it only works in IE 6, but it doesn't work in Mozilla/Firefox or Netscape.

Four CSS Advanced Grammar

1. Selector grouping

Selectors can be grouped so that the grouped selectors can share the same declaration. Separate the selectors that need to be grouped with commas. In the following example, we group all the title elements. All the title elements are green.

H2,h3,h3,h4,h6,h7 {color: green;}

two。 Inheritance and its problems

According to CSS, the child element inherits attributes from the parent element. But it doesn't always work this way. Look at the following rule:

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

According to the above rule, the body element of the site will use the Verdana font (if the font exists on the visitor's system).

Through CSS inheritance, child elements inherit attributes owned by the highest-level elements (in this case, body) (such as p, td, ul, ol, ul, li, dl, dt, and dd). No additional rules are required, all child elements of body should display Verdana fonts, and so should child elements of child elements. In most modern browsers, this is true. But in the bloody age of browser wars, this may not have happened. Netscape 4, for example, does not support inheritance, ignoring not only inheritance but also the rules that apply to body elements. There is still a problem with IE/Windows until IE6, and font styles in the table are ignored. What should we do?

Methods:

/ /: define a parent element style and apply it to the overall body {font-family: Verdana, sans-serif;} / /: use a group selector to prevent some browsers from refusing to inherit td, ul, ol, ul, li, dl, dt, dd {font-family: Verdana, sans-serif } / /: if a child element does not want to inherit style, you can define a special rule to get rid of the parent element rule p {font-family: Times, "Times New Roman", serif;}

3. Derived selector

The derived selector allows you to style a tag based on the context of the document. For example, if you want the strong element in the list to become italic instead of the usual bold, you can define a derived selector like this:

/ /: when the element is inside the element, the font is italic, otherwise, the font is bold li strong {font-style: italic; font-weight: normal;}

Example:

Strong {color: red;} h3 {color: red;} h3 strong {color: blue;}

Here is the HTML it exerts its influence:

The strongly emphasized word in this paragraph isred.

This subhead is also red.The strongly emphasized word in this subhead isblue.

4. Id selector

The id selector can specify a specific style for HTML elements marked with a specific id. The id selector is defined by "#". The following two id selectors, the first element that defines the attribute id= "red" is red, and the second element that defines id= "green" is green:

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

In the following HTML code, the p element with the id attribute of red is shown in red, while the p element with the id attribute of green is shown in green.

This paragraph is red.

This paragraph is green.

Note: the id attribute can only appear once in each HTML document.

5. Id selector + derived selector

In modern layouts, id selectors are often used to build derived selectors.

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

The above style applies only to paragraphs that appear within elements where id is sidebar. This element is most likely a div or a table cell, although it may also be a table or other block-level element. It can even be an inline element, such as or, but this usage is illegal because it cannot be embedded in an inline element

.

6. Class selector

The class selector is displayed with a period (.):

.center {text-align: center}

All HTML elements that have the center class are centered. In the following HTML code, both H2 and p elements have center classes. This means that both will follow the rules in the ".center" selector.

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

Note: numbers cannot be used in the first character of a class name! It does not work in Mozilla or Firefox.

1 > Class selection + derived selection

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

In the above example, the table cells inside the larger element of the class named fancy display orange text with a gray background. (a larger element named fancy may be a table or a div.)

2 > derived selection + Class selection

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

In the above example, the table cell named fancy will be orange with a gray background, while other elements will not be affected.

How to introduce CSS?

There are three ways to insert a style sheet:

1. External style sheets external style sheets are ideal when styles need to be applied to many pages. Each page uses tags to link to the stylesheet. The tag is in the header (of the document):

two。 Internal style sheets you should use internal style sheets when a single document requires a special style. You can use tags to define internal stylesheets at the head of the document, like this:

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

3. Inline styles lose many of the advantages of stylesheets because they mix presentation with content. Use this method with caution, such as when the style needs to be applied only once to an element.

To use inline style, you need to use the style attribute within the associated tag. The Style property can contain any CSS attribute. This example shows how to change the color and left margin of a paragraph:

This is a paragraph

4. Multiple styles if some properties are defined by the same selector in different stylesheets, the property values will be inherited from the more specific stylesheet.

These are all the contents of the article "css basic Grammar use case Analysis". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.